SVG




Scalable Vector Graphics

WOFÜR SVG?

  • ist die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken.

    Verschiedene Formen  der Einbindung

    • Einbindung über <img src=„meineSVG.svg“ ….>
    • Einbindung im HTML-Baum

    • Alle modernen Browser unterstützen die Anzeige von SVG (IE ab 9)
    • wenn man SVG animiert, hat man ein konforme Alternaive zu Flash

    Was ist SVG?


    • Basiert auf XML
    • „Schwester“ von XHTML
    • Die neuen Browser können SVG darstellen, (IE>8)
    • Inhalte von SVG-Dateien sind für computerunterstützte Übersetzung geeignet (zum Beispiel poedit)
    • SVG-Dokument wird in einer Baumstruktur aus verschiedenen Elementen mit Attributen aufgebaut

    Aufbau einer SVG-Datei


    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    • XML-Deklaration
    • Dokumententypdeklaration
     <svg xmlns="http://www.w3.org/2000/svg">
    • svg-Tag – mit Namespace-Definition
    • svg-Tag ist das Wurzelelement – muss vorhanden sein
    • <g> --> Elemente in Gruppen zusammenfassen Werte als Fließkommazahlen

    Aufbau einer SVG-Datei

         <path d="M50,50
    A30,30 0 0,1 35,20
    L100,100
    M110,110
    L100,0"
    style="stroke:#660000; fill:none;"/>
    D ->drawing command
    A->Arc
    L->Line
    M->move to

    Und hier die spektakuläre Ausgabe dieses Codes

    SVG mit Tools erzeugen


    • INCSCAPE – freies Tool für Windows
     

    SVG und Animation


    • Zeitliche Änderung eines Attributes oder einer Eigenschaft
    • Änderung der Position von Elementen im aktuellen Koordinatensystem
      =Deklarative Animation
    • Basiert auf SMIL – einer anderen XML-Sprache

    SVG und Animation




    Alternativ: Animation mit Javascript, jQuery, CSS
    Beispiel: Ausgabe von SVG mittels Javascript


    Alternativen zuM Zeichnen mit SVG

    • Zum Beispiel HTML5 Canvas: Javascript erzeugt Zeichnung mit Kreisbögen, Bézierkurven, Farbverläufen, PNG, GIF, JPEG, Transparenz, Text, Animation ist möglich
    • Zeichenumfang wie SVG
    • Tutorial: http://www.ajaxschmiede.de/canvas/einfuehrung-in-canvas/
    • Nachteil von Canvas:
        • Keine Vektorgrafik (Skalierbarkeit)
        • Kein Zugriff über DOM
        • Keine Speicherung der Objekte

    SVG hat Zukunft

    • Animierte Logos
        • http://snapsvg.io/


    SVG vs Canvas

      Man verwendet SVG immer dann,
          • wenn schon Vektorgrafiken vorliegen  -Datenausstausch – medienübergreifend
          • wenn Interaktion erforderlich ist (z.B. auf Kartenpfad klicken)
          • wenn Responive-Design gefragt ist
          • wenn eine Zoomfunktion erforderlich ist
          • wenn man vernünftig arbeiten möchte