Scalable Vector Graphics (SVG) FAQ

Was ist SVG?

Mit welchen Tools betrachte ich SVG-Grafiken?

Wie sieht eine SVG-Grafik aus?

Gibt es für SVG geeignete WYSIWYG-Editoren?

Gibt es vergleichbare Standards?

Bietet SVG gegenüber Flash Vorteile?

Kann ich SVG-Grafiken in HTML einbinden?

Kann ich in ein SVG-Dokument Formulare einbinden?

Wie mache ich SVG-Grafiken web-tauglich?

Warum erscheint nur Text beim Aufruf einer SVG-Grafik im Browserfenster?

Was ist SVG?

Scalable Vector Graphics ist die vom W3C lancierte XML-Anwendung zur Beschreibung zweidimensionaler Vektorgrafiken. Damit können Sie wie mit guten Grafikprogrammen Zeichnungen erstellen, diese mit Texten kombinieren, transformieren und Filter sowie andere grafische Effekte anwenden. SVG bietet die Möglichkeit, rein über Auszeichnung Grafiken zu animieren oder interaktiv zu machen. Darüber hinaus unterstützt es die Einbindung von Script-Sprachen wie JavaScript oder ECMAScript.

Seit dem 4. September 2001 hat SVG 1.0 eine offizielle W3C-Recommendation.

Mit welchen Tools betrachte ich SVG-Grafiken?

Es gibt viele Viewer oder eigenständige Browser für SVG. Empfehlenswert sind momentan

• der Adobe SVG-Viewer, ein PlugIn für Netscape Navigator, Internet Explorer, Opera 5.x und Real Player 8
• der Batik SVG-Browser, ein Standalone-Browser von Apache (Bestandteil des Batik SVG-Toolkits, in dem auch nützliche Tools u. a. für die TrueType-in-SVG-Font-Konvertierung enthalten sind)

Weitere sind u. a. Amaya (W3C), X-Smiles XML-Browser, CSIRO SVG-Toolkit, IBM SVG View.

Wie sieht eine SVG-Grafik aus?

Nachfolgend sehen Sie das berühmte "Hallo Welt"-Beispiel in SVG-Schreibweise:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="100" 
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Hallo Welt!</title>
<!-- ****** Es folgt ein gelbes Rechteck ****** -->
<rect width="200" height="100" fill="yellow" />
<!-- ****** Es folgt der Text ****** -->
<text x="75" y="50">
Hallo Welt!
</text>
</svg>

In einem SVG-Viewer sehen Sie folgende Grafik:

SVG Version?

Gibt es für SVG geeignete WYSIWYG-Editoren?

Ja. Mit folgenden Grafikprogrammen können Sie bereits in SVG konvertieren:

• Adobe Illustrator ab Version 9
• Amaya vom W3C (Editor und Webbrowser in einem)
• Corel DRAW ab Version 9
• ITEDO IsoDraw ab Version 5
• Jasc WebDraw (speziell für den SVG-Export entwickeltes Tool. Hiermit sind sogar Animationen über eine "Timeline" möglich)

Gibt es vergleichbare Standards?

Ja. Der Standard, dessen Funktionsumfang dem von SVG am nächsten kommt, ist Flash. Grundsätzlich können Sie mit SVG aber auch

• Grafiken erstellen wie in jedem professionellen Grafikprogramm (z.B. Macromedia Freehand oder Adobe Illustrator)
• Online-Dokumentationen erstellen wie mit HTML
• Elektronische Dokumente erstellen wie mit PDF
• Präsentationen erstellen wie mit PowerPoint
• Bilder und Alphamasken verarbeiten (fast) wie mit Photoshop

Bietet SVG gegenüber Flash Vorteile?

Ja, sogar einige. Die wichtigsten Vorteile sind nachfolgend aufgelistet:

Strukturierung und Zugriff über Script-Sprachen

SVG ist textbasiert und XML-strukturiert, während Flash im verkapselten Binärformat vorliegt. Dadurch sind bei Letzterem Zugriffe über Script-Sprachen wie JavaScript, PHP, ASP oder Perl erheblich schwieriger.

XML-Erweiterungskonzept

Mit SVG können Sie das Erweiterungskonzept von XML in Anspruch nehmen, was für Flash nicht gilt. Das Erweiterungskonzept umfasst für SVG vor allem folgende Vorteile:

• Verknüpfung mit anderen XML-Sprachen wie XHMTL, SMIL etc. über Namensräume oder sogenannte "foreign Objects" ("fremde Objekte", die in SVG über das Tag <foreignObject> implementiert werden)
• Breite Unterstützung der XML-Verlinkungssprachen XLink, XPath und XPointer
• Transformation und Styling mit XSL(T)

Dafür können Sie sowohl Flash- bzw. Shockwave-Movies als auch SVG-Grafiken über die Tags <embed> oder <object> in HTML einbetten.

Tools

Für SVG-Grafiken benötigen Sie einen einfachen Texteditor. Hingegen sind Sie bei Flash, um dessen vollen Funktionsumfang auszunutzen, auf ein kostenpflichtiges Tool angewiesen: Macromedia Flash.

Übersetzungen

Übersetzungen oder andere Textänderungen sind in SVG direkt über den Texteditor möglich, während Sie bei Flash auf das vergleichsweise schwerfällige Autoren-Tool angewiesen sind.

Text-Such-Funktion

Mit den bekanntesten SVG-Viewern (Adobe SVG-Viewer und Batik SVG-Browser) können Sie auf der angezeigten Grafik nach Texten suchen, was mit dem Flash- oder Shockwave-Player nicht möglich ist. So ist beispielsweise eine SVG-Landkarte denkbar, auf der Sie über die Such-Funktion des Adobe SVG-Viewers nach Städten suchen.

Ausführliche Vergleiche zwischen SVG und Flash finden Sie unter

• http://broadway.cs.nott.ac.uk/projects/SVG/flash2svg/
• http://www.carto.net/papers/svg/comparison_flash_svg.html
• http://www.svg4all.de/svg/svgliste.htm

Kann ich SVG-Grafiken in HTML einbinden?

Ja. Mit Hilfe der Tags <embed> und <object> binden Sie SVG-Grafiken genauso in HTML ein wie Shockwave-Movies. Z.B.:

<embed src="beispiel.svg" width="300" height="300" type="image/svg+xml">

Kann ich in ein SVG-Dokument Formulare einbinden?

Eigentlich ja. Sie können XHTML- oder XForms-Formulare über XML-Namensräume in SVG integrieren. Jedoch unterstützen das bisher nur exotische SVG-Browser wie Amaya (W3C) oder X-Smiles.

Besser ist es, Sie binden SVG-Grafiken mit Hilfe der Tags <embed> oder <object> in HTML ein. Dort setzen Sie die Formulare in das HTML-Layout und verknüpfen diese mit den SVG-Grafiken über Scripts (JavaSript).

Wie mache ich SVG-Grafiken web-tauglich?

Um SVG-Grafiken im Web zu publizieren, muss der Webserver zuerst konfiguriert werden (andernfalls erkennt dieser das neue Format nicht und liefert beim Request einfachen Text zurück). Dazu setzen Sie bzw. der Systemadministrator in der MIME-Type-Liste des Webservers den SVG-MIME-Type. Dieser lautet:

image/svg+xml

Sind Sie kein Systemadministrator und haben somit keinen Zugriff auf die MIME-Type-Liste, können Sie unter Apache diesen Eintrag für Ihr Webverzeichnis selbst vornehmen. Dazu legen Sie in einem einfachen Texteditor eine Datei '.htaccess' an (Speicher unter -> .htaccess). In diese schreiben Sie folgende Zeilen:

AddType image/svg+xml svg
AddType image/svg+xml svgz

Jetzt müssen Sie .htaccess nur noch in Ihr Webverzeichnis auf dem Webserver kopieren.

Mehr zu .htaccess erfahren Sie hier.

Warum erscheint nur Text beim Aufruf einer SVG-Grafik im Browserfenster?

Das liegt daran, dass der Webserver das neue Format nicht erkennt und dementsprechend beim Request nur Text zurückliefern kann. Sie müssen den Webserver entsprechend konfigurieren. Dazu setzen Sie bzw. der Systemadministrator in der MIME-Type-Liste des Webservers den SVG-MIME-Type. Dieser lautet:

image/svg+xml