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;"/>
SVG mit Tools erzeugen
- Adobe Illustrator
- Für Illustratoren und andere Profis (Preis!)
- ONLINE Zeichenwerkzeug SVG-edit
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, interaktive Infografiken (mit Javascript)
- Datengetriebene Infografiken (mit Javascript-Bibliotheken)
- http://d3js.org/
- Kreisuhr
- Zoomable Treemap
- Obama's Budget Proposal
- US-Ausenhandelsüberschuss
- 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
SVG
By Ingrid Bluoss
SVG
- 2,174