Überblick

SVG steht für Scalable Vector Graphics und ist der offizielle auf XML basierende Vektorgraphik-Standard des W3C. SVG-Grafiken bestehen aus ASCII-Code, können mit jedem beliebigem Texteditor erstellt werden und sind ohne Qualitätsverlust skalierbar. SVG unterstützt Stylesprachen wie z.B. CSS und Scriptsprachen wie z.B. JavaScript oder ECMAScript.
SVG berücksichtigt folgende drei Arten von grafischen Elementen:

  • vektorbasierte Geometrie (Linien, Kreise, Ellipsen, Rechtecke, Polylinien, Polygone, Symbole und Pfad-Elemente)
  • Pixelbilder
  • Text

Nähere Informationen zu den graphischen Elementen von SVG findet man unter:

Graphische Möglichkeiten von SVG

SVG Grafiken benötigen derzeit zur Darstellung noch ein Plug-In, das von Adobe kostenlos zur Verfügung gestellt wird und nur im Microsoft Internet Explorer einwandfrei funktioniert. Andere Browser wie Mozilla bzw. Firefox arbeiten noch an einem entsprechenden Plug-In.

Download Adobe SVG Viewer

XML steht für Extensible Markup Language und ist ein Standard zur Erstellung strukturierter, maschinen- und menschenlesbarer Dateien. Man könnte auch sagen, dass XML eine Verallgemeinerung von HTML ist. Wie bei HTML verwendet XML Tags, welche im Gegensatz zu HTML nicht vordefiniert sind und somit frei wählbar sind, sofern die XML-Datei keiner DTD (Document Type Definition) unterliegt.
Durch XML ist es möglich Daten von ihrer Repräsentation zu trennen.

Für dieses Modul werden XML-Grundkenntnisse vorausgesetzt.

Entwicklungsgeschichte

Der SVG-Standard wurde von einem Konsortium bestehend aus Mitgliedern des W3C, Forschungsinstituten und Firmen aus dem Graphik-, Multimedia- und Netzwerk-Umfeld entwickelt. Zu diesen Firmen gehören Adobe, Apple, Autodesk, Bit-Flash, Corel, Hewlett Packard, IBM, Kodak, Macromedia, Microsoft, Netscape, Quark, Sun und Visio.
SVG wird als offenes Format auch von der Open-Source Community unterstützt.

Die erste Arbeitsgrundlage wurde am 11. Februar 1999 veröffentlicht. Seit dem 2. August 2000 existiert die offizielle Version 1.0. Am 14. Jänner 2003 veröffentlichte das W3C die Version 1.1 und SVG Mobile für Handys und PDAs. An Version 2.0 wird gerade gearbeitet [Stand Jänner 2005].

Datenstruktur

SVG beruht auf dem XML Standard und ist somit aus einem "header" und einem "rootelement" (dem eigentlichen SVG Block) aufgebaut:

<?xml version="1.1" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="[Breite]" height="[Höhe]">
...
</svg>

In der obersten Zeile wird die Versionsnummer (version="1.1") und der verwendete Zeichenstandard (endcoing="utf-8") festgelegt. Außerdem wird angegeben, dass sich die SVG Datei in Abhängigkeit eines anderen Dokuments befindet (standalone="no"). In dem vorliegenden Beispiel ist die DTD (Document Type Definition) wie aus der zweiten Zeilen ersichtlich die offizielle DTD des W3C (DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd"). Eine DTD ist ein Regelwerk dem die XML-Datei gehorchen muss, dh in der DTD ist festgelegt was im eigentlichen SVG-Block wie vorkommen darf und was nicht. Schließlich beginnt danach der eigentliche SVG Block (<svg ... </svg>), an dessen Anfang die Breite und Höhe des Bildschirmausschnitts definiert sind, in dem die Grafik angezeigt wird (width="[Breite]" height="[Höhe]").

Im Gegensatz zu Macromedia Flash ist SVG kein Binärformat sondern ein Textformat. Der Quelltext ist deshalb jederzeit mit einem einfachen Texteditor einsehbar. Das Erstellen oder Abändern von SVG-Dateien kann deshalb natürlich auch mittels eines einfachen Texteditors erfolgen, sofern die Dateiendung ".svg" und nicht ".svgz" ist.

Kompression

SVG-Dateien können auf zwei unterschiedliche Arten gespeichert werden:

  • SVG
    Bei diesem Format wird keine Kompression durchgeführt, die Daten werden als XML-Code gespeichert.
  • SVGZ
    Im SVGZ-Format wird die Datei um 50 % bis 80 % ihrer Größe (im Vergleich zu SVG) reduziert. Das verwendete Kompressionsverfahren ist gzip. Dateien in diesem Format können jedoch nicht mit einem Texteditor bearbeitet werden.

Speicheroptionen

Adobe Illustrator [Version CS] bietet die Möglichkeit Dateien im SVG-Format (Datei - Für Web Speichern - Dateiformatmenü: SVG) abzuspeichern. Der Benutzer hat dabei die Möglichkeit folgende Einstellungen zu treffen:


Speicheroption für SVG in Adobe Illustrator [Version CS ]

Schriftenmenü
Mit den Optionen in diesem Menü kann man festlegen, welche Schriften aus der SVG-Datei eingebettet bzw. verknüpft werden sollen.

  • "Ohne (Systemschriften verwenden)"
    Die benötigten Schriften müssen auf den Endbenutzersystemen installiert sein.
  • "Nur verwendete Schriftzeichen"
    Es werden nur die Schriftzeichen für den Text im aktuellen Bildmaterial miteinbezogen.
  • Die übrigen Einstellungen ("Englisch", "Englisch und verwendete Schriftzeichen", "Latein", "Latein und verwendete Schriftzeichen", "Alle Schriftzeichen") sind sinnvoll, wenn der Textinhalt der SVG-Datei dynamisch ist (wie z. B. servergenerierter oder interaktiver Text).

Bilder einbetten oder verknüpfen
Man kann zwischen "Bilder einbetten" oder "Bilder verknüpfen" wählen. Durch das Einbetten von Bildern vergrößert sich zwar die Datei, es wird damit aber sichergestellt, dass die Pixelbilder stets verfügbar sind.

CSS-Eigenschaften
Hier kann man festlegen, wie die Stilattribute im SVG-Code gespeichert werden sollen:

  • "Präsentationsattribute"
    Dies ist die Standardmethode. Es werden die Eigenschaften an der höchsten Stelle der Hierarchie zugewiesen. Dies bietet bei spezifischen Bearbeitungen und Transformationen das höchste Maß an Flexibilität.
  • "Stilattribute"
    Hier werden Dateien erstellt, die sich gut lesen lassen. Die Dateien werden dabei aber u. U. größer. Diese Option eignet sich besonders wenn der SVG-Code bei Transformationen verwendet wird, wie z. B. bei Transformationen mit XSLT (Extensible Stylesheet Language Transformation).
  • "Entitätsreferenzen"
    Verwendet man diese Option so führt es zu kürzeren Rendering-Zeiten und kleineren SVG-Dateien.
  • "Stilelemente"
    Diese Option wird verwendet, wenn Dateien auch für HTML-Dokumente verwendet werden. Nach dem Auswählen von "Stilelemente" kann man ein Stilelement in der SVG-Datei in eine externe Formatvorlagendatei (Stylesheet) verschieben, auf die in der HTML-Datei verwiesen wird. Es verlangsamt sich jedoch die Rendering-Geschwindigkeit.

Zeichenkodierung
Hier kann festgelegt werden, wie die Zeichen in der SVG-Datei kodiert werden. Die UTF-Kodierung (Unicode Transformation Format) wird von allen XML-Prozessoren unterstützt.

Kompression
Eine komprimierte SVG-Datei (SVGZ) wird erstellt.

Dezimal
Legt die Genauigkeit der Vektordaten in der SVG-Datei fest. Es können bis zu 7 Dezimalstellen festgelegt werden. Je höher der Wert, desto größer die Datei und desto besser die Bildqualität.

Vergleiche

Vergleich zwischen Macromedia SWF bzw. Macromedia Flash und SVG:

Kriterium SWF SVG
Offener Standard Nein, Macromedia Spezifikation Ja, W3C Spezifikation
Formattyp Binär Text-basiert (XML)
MIME-Typ Application/x-Shockwave-flash Image/svg+xml
Streamingfähig Ja Nein
Interaktivität Ja, mittels Scripts und Events Ja, mittels Scripts, SMIL (Synchronized Multimedia Integration Language) und Events
DOM
Internes "DOM"
SVGDom (ist mit DOMLevel 1 Recommendation kompatible)
automatische Browser-Unterstützung
Nein, Plug-In jedoch weit verbreitet
Nein, Plug-In nicht weit verbreitet
Bearbeitung/Änderungen Nur in der fla-Datei möglich Direkt in der svg-Datei möglich

Vorteile/Nachteile

Vorteile

  • Offener Standard des W3C
  • SVG-Dokumente sind indexierbar z.B. von Suchmaschinen.
  • XHTML-Kompatibilität und Scriptfähigkeit (Einsatz von z.B. JavaScript möglich)
  • SVG besitzt ein eigenes DOM (mit DOM Level 1 Recommendation kompatible) und kann Elemente, die auf DOM basieren einsetzen.
  • SVG unterstützt ICC- und sRGB-Farbprofile.
  • SVG ist skalierbar, zoomen ist ohne Qualitätsverlust möglich
  • SVG ist mit einem Texteditor erstellbar, es ist jedoch empfehlenswert eine Autorenumgebungen (z.B. JASC WebDraw, Adobe Illustrator) zu verwenden, da diese die Arbeit um einiges erleichtern.

Nachteile

  • Wird von Browsern noch nicht automatisch unterstützt bzw. noch gar nicht unterstützt (trotz Plug-In)
  • Das benötigte Plug-In ist relativ groß (3 MB)
  • SVG-Dateien sind nicht streamingfähig

Anwendungsgebiete

SVG kann für alle Webseiten mit dynamischen Inhalten eingesetzt werden, vor allem wenn qualitativ hochwertige Grafiken gefordert werden. Mögliche Anwendungsgebiete sind daher u.a.:

  • Webdesign generell
  • Technische Illustrationen
  • Wissenschaftliche Datenvisualisierung (Chemie, Physik,…)
  • Online-Kataloge und E-Commerce
  • Online-Lern-Systeme
  • Multimedia und Unterhaltung