SVG-FAQ

1.1 Allgemeines

1.1.a
Was ist SVG?
1.1.a SVG ist die Abkürzung für Scalable Vector Graphics. Es handelt es sich dabei um ein Vektorgrafikformat für das Internet, das auf XML basiert und die Elemente der Grafiken mithilfe von XML-Tags definiert.
1.1.b
Wie kann SVG verwendet werden?
1.1.b SVG-Grafiken können anstelle von normalen GIF, JPG oder PNG-Grafiken in einer Webseite verwendet werden. Allerdings werden Sie nicht mit dem <img>-Tag in eine Webseite eingefügt, sondern mit den Tags <embed> oder <object>. Zur Darstellung wird dann ein Browser oder Plug-In benötigt. Die zweite Möglichkeit SVG-Grafiken in Webseiten zu verwenden, besteht darin, Sie in XML-Dateien zu integrieren, die dann vom Browser dargestellt werden. Zudem können Sie SVG-Grafiken natürlich auch serverseitig per PHP oder ASP erzeugen lassen und damit bpsw. Charts erzeugen, deren Daten zur Laufzeit aus einer Datenbank abgerufen werden.
1.1.c
Welche Browser unterstützen SVG?
1.1.c Zur Zeit gibt es offiziell noch keinen Browser, der den vollen SVG-Standard unterstützt. Mozilla (+MathML/SVG) und Firefox 1.5 unterstützen erst einen Teil des Standards, das heißt die meisten geometrischen Figuren, bestimmte Attribute, aber noch keine Verläufe, Füllmuster, Animation und kein JavaScript in SVG-Grafiken. Ansonsten gibt es IE- und Netscape-kompatible Plug-Ins zur Darstellung der Grafiken, bspw. den Adobe(r)-SVG-Viewer und den Corel SVG-Viewer. Der neue Opera Browser 8.x und höher kann ebenfalls schon große Teile des SVG-Standard darstellen. Aber auch er beherscht weder JavaScript noch Filter.
1.1.d
Wie können die anderen Browser SVG-Grafiken darstellen?
1.1.d Alle anderen Browser benötigen Sie zur Darstellung ein Plug-In. Derzeit gibt es dazu den SVG-Viewer von Adobe®. Aktuell ist derzeit die Version 3.03, die in mehreren Sprachen und für verschiedene Browser verfügbar ist. Unterstützt werden:
  • Netscape Navigator 4.x
  • Internet Explorer 4.x
  • Internet Explorer 5.x und höher

Das Plug-In funktioniert allerdings zusätzlich auch

  • im Netscape 6 / Mozilla 0.8.x Browser oder höher
  • in Opera 5.x oder höher

auch wenn dies offiziell von Adobe® nicht angegeben wird.

Leider hat die aktuelle Version 3.03 diverse Probleme, auch beim Betrieb im Internet Explorer 6. Damit werden bspw. keine SVG-Grafiken dargestellt, die mit dem object-Element eingebunden werden, wenn für diese das type-Attribut angegeben wurde. Verhältnismäßig problemlos funktioniert das jedoch noch, wenn es nur eine SVG-Grafik in der Seite gibt. Spätenstens wenn eine Seite mehr als ein object-Element enthält, wird keine der Grafiken mehr dargestellt. Das äußert sich darin, dass der Internet Explorer ewig lädt, ohne zu einer Anzeige zu kommen. Mit dem, allerdings nicht validen embed-Element zeigt der Internet Explorer die Grafiken jedoch an.

Außer dem SVG-Viewer von Adobe® gibt es jetzt auch einen SVG-Viewer von Corel. Sie finden ihn im Download-Bereich der Corel-Webseite.

1.1.e
Welche Zukunft hat SVG?
1.1.e Hellsehen kann sicherlich keiner, aber ich bin der Meinung, dass SVG in Kürze die Rastergrafikformate GIF, JPG und PNG aus dem Internet verdrängen wird. Die Vorteile von SVG sind so gravierend, dass SVG nur erfolgreich sein kann. Spätestens wenn der SVG-Viewer die gleiche Verbreitung wie der PDF-Reader erreicht hat und 90% aller Browser SVG-Grafiken darstellen können, steht dem vermehrten Einsatz von SVG-Grafiken nichts mehr im Wege und die Webdesigner werden schnell die Vorzüge von SVG zu schätzen lernen zumal es auch schon viele Grafikprogramme gibt, die SVG-Dateien speichern können.
1.1.f
Welche Vorteile bietet SVG gegenüber Rastergrafiken?
1.1.f
  • Dadurch dass die SVG-Grafiken aus XML-Code bestehen ist die Dateigröße extrem klein. Das liegt natürlich auch daran, dass eben nur Vektorkoordinaten gespeichert werden müssen, aber nicht die einzelnen Pixel.
  • Trotzdem können Effekte wie Schatten, Farbverläufe und Animationen definiert werden, die in Rastergrafiken möglich sind.
  • Anders als bei animierten GIF-Grafiken erhöhen Animationen in SVG-Grafiken aber nicht die Dateigröße.
  • SVG-Grafiken haben ein DOM über das die Grafiken per Skript manipuliert werden können. Damit sind dynamische Grafiken möglich, die auf Benutzeraktionen reagieren.
  • Mit Hilfe von XSL können Sie SVG-Grafiken aus XML-Dateien erzeugen.
1.1.g
Mit welchen Programmen können SVG/XML-Dateien erstellt werden?
1.1.g SVG-Dateien können Sie im Prinzip mit jedem einfachen Texteditor erstellen. Es gibt aber auch schon Grafikprogramme, die SVG-Dateien exportieren oder erstellen können. Zu den Programmen mit SVG-Exportfiltern gehören:
  • Adobe® Illustrator® 9.0
  • Corel Draw 10

Von Jasc gibt es WebDraw, ein Grafikprogramm, mit dem SVG-Grafiken in einer grafischen Umgebung ähnlich der von Paint Shop Pro erstellt werden können. Für XML-Dateien gibt es inzwischen eine ganze Reihe von XML-Editoren mit denen Sie die Dateien erstellen können.

1.1.h
Kann SVG-Code auch direkt in eine HTML-Seite eingefügt werden?
1.1.h Ja, das geht. Die folgende Möglichkeit ist für die Darstellung jedoch an spezifische Voraussetzungen gebunden:
  • Es muss der SVG-Viewer 3.0 installiert sein
  • Es muss der Internet Explorer 5.0 oder höher verwendet werden
  • Als Betriebssystem muss Windows verwendet werden.

Zudem kann eine solche Seite weder als HTML noch als XHTML-Seite validiert werden. Die für die Darstellung des SVG-Codes relevanten Teile sind des Listings sind kursiv dargestellt. Download

Listing: 1.1.h #1

<HTML xmlns:svg= "http://www.w3.org/2000/svg">
<object id="AdobeSVG" CLASSID= "clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>

<BODY>
<svg:svg width="300" height="300">
<svg:g style="font-size:13; fill:yellow">
<svg:circle cx="100" cy="85" r="15" style="stroke:gray" />
</svg:g>
</svg:svg>
</BODY>

</HTML>

Allternativ ist es in Mozilla-Versionen die SVG unterstützen auch Möglich eine XML-Datei (mit der Endung XML zu definieren), die neben dem SVG-Code HTML-Code für einfache Textausgaben enthalten. Download

Listing: 1.1.h #1

<?xml version="1.0" encoding="iso-8859-1"?>

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:html="http://www.w3.org/1999/xhtml">

<circle cx="50" cy="50" r="20" style="fill:yellow;stroke:black" />

<text x="10" y="30" style="fill:black;font-size:10px">test</text>

<foreignObject x="80" y="20" height="150px" width="100%">

<html:div style="background-color:silver;border:solid 1px;width:250px;height:148px">

<html:h1 style="font-family:Arial;font-size:18px">Überschrift</html:h1>

<html:p style="font-family:Arial;font-size:12px;color:blue">Dies ist ein normaler Absatz, der auch automatische Umbrüche enthalten kann.</html:p>

<html:ul style="font-family:Arial;font-size:10px;color:blue">

<html:li>listeneintrag 1</html:li>

<html:li>listeneintrag 2</html:li>

<html:li>listeneintrag 3</html:li>

</html:ul></html:div>

</foreignObject>

</svg>

1.2 Aufbau von SVG-Dateien

1.2.a
Welche Dateinamens-Erweiterungen benötigen SVG-Dateien?
1.2.a SVG-Dateien sollten die Dateinamenserweiterung SVG oder SVGZ haben. Letztere wird für gezippte SVG-Dateien benötigt. Wenn SVG-Elemente in XML-Dateien eingebettet werden, muss die Datei natürlich die Dateinamenserweiterung XML bekommen. Aber auch PHP-Dateien, die die SVG-Code zurückgeben sind denkbar und möglich. Dann muss die PHP-Datei jedoch den korrekten Content-Typ image/svg+xml zurückgeben.
1.2.b
Wie ist eine SVG-Datei aufgebaut?
1.2.b Eine SVG-Datei beginnt immer mit der Angabe der XML-Version und eventuell dem verwendeten Zeichensatz. Danach folgt die DOCTYPE-Angabe mit der DTD und dann der Tag <svg> der mit </svg> abgeschlossen wird. Zwischen diesen beiden Tags werden dann die SVG-Elemente definiert. Download

Listing: 1.2.b

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">

</svg>

1.2.c
Gibt es alternative DTDs?
1.2.c Ja, es gibt inzwischen eine neue, die für die aktuelle Version 1.1 des SVG-Standards vorgesehen ist. Wenn Sie jedoch nur den SVG 1.0-Standard verwenden, benötigen Sie diese DTD noch nicht. Darüber hinaus gibt es inzwischen DTDs für SVG-Basic und SVG-Thiny:

Listing: 1.2.c

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

1.2.d
Wie sieht eine XML-Datei mit SVG-Elementen aus?
1.2.d Eine XML-Datei mit SVG-Elementen ist im Prinzip eine normale XML-Datei, in der ein svg-Namespace definiert wird. Download

Listing: 1.2.d

<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg">

</svg>

1.2.e
Können SVG-Inhalte direkt in eine HTML-Datei eingefügt werden?
1.2.e Nein, das geht nicht, da HTML die Definition von Namensräumen nicht unterstützt. Um eine SVG-Datei in einer HTML-Seite anzuzeigen, müssen Sie eine externe SVG-Datei mit der HTML-Seite verlinken. Die einzige Möglichkeit ist die unter Punkt 1.1.h beschriebene.
1.2.f
Kann eine SVG-Datei mehr als einen <svg>-Tag enthalten?
1.2.f Nein. Sie können immer nur ein <svg>-Element innerhalb einer SVG-Datei verwenden. Allerdings haben Sie in XML-Dateien natürlich die Möglichkeit mehrere <svg>-Elemente zu definieren.
1.2.g
Kann eine SVG-Datei auch unsichtbare Elemente enthalten?
1.2.g Ja. Zur Definition von Elementen, die nicht gerendert werden sollen, können Sie den <defs>-Tag verwenden. Alle Elemente die Sie hier definieren, werden erst gerendert, wenn Sie sie verwenden. Sinnvoll ist der Tag zur Definition von:
  • Filtern
  • Farbverläufen
  • Symbolen
  • Animationen
  • StyleSheets
  • Skripten
1.2.h
Wie können verschiedene Elemente gruppiert werden?
1.2.h Sie können Elemente gruppieren, indem Sie sie in einen <g>-Tag einfassen.
1.2.i
Wie werden StyleSheets definiert?
1.2.i Sie können StyleSheets mit dem <style>-Tag definieren. Die StyleSheets selbst müssen Sie dann aber in eine CDATA-Abschnitt einfassen. Folgendes Listing definiert ein StyleSheet zur Formatierung von Text und enthält einen <text>-Tag um einen Text auszugeben. Download

Listing: 1.2.i

...
<svg width="440" height="300" xmlns="http://www.w3.org/2000/svg">

<style type="text/css"><![CDATA[
text {fill:red;font-family:Arial,Helvetica;
font-size:14px;font-stretch:ultra-expanded;
font-weight:bold}
]]>
</style>
<text x="2px" y="20px">Dieser Text wurde
mit StyleSheets formatiert</text>
</svg>

1.2.j
Warum funktionieren meine Links in Mozilla nicht?
1.2.j Neuere Mozilla-Versionen mit SVG-Support erfordern für Links zusäztlich eine Namespace-Angabe für den XLINK-Namensraum:

Listing: 1.2.j

...
<svg width="440" height="300" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink">
...
</svg>

1.3 Basis-Elemente von SVG-Grafiken

1.3.a
Wie können Kreise definiert werden?
1.3.a Um Kreise zu zeichnen, gibt es die Tags <circle> und <ellipse>. Sie verfügen beide über die Attribute cx und cy die die x- und y-Koordinaten für den Mittelpunkt festlegen. Der Tag <circle> verfügt zudem noch über ein Attribut r. Damit können Sie den Radius des Kreises definieren. Der Tag <ellipse> verfügt dagegen über zwei weiteren Attribute, rx und ry. Sie legen getrennt den vertikalen (ry) und horizontalen ( ry) Radius fest. Sind beide Werte gleich, erzeugen Sie somit einen Kreis. Das folgende Listing definiert zunächst zwei Kreise, einmal mit <circle> und den zweiten mit <ellipse>. Die anderen beiden Tags definieren zwei Ellipsen. Download

Listing: 1.3.a

...
<svg width="440" height="300">

<circle cx="20" cy="20" r="10" style="stroke:red;fill:none"/>
<ellipse cx="40" cy="40" rx="10" ry="10" style="stroke:red;fill:none"/>
<ellipse cx="40" cy="40" rx="20" ry="10" style="stroke:blue;fill:none"/>
<ellipse cx="40" cy="40" rx="10" ry="20" style="stroke:blue;fill:none"/>

</svg>

1.3.b
Was ist der Unterschied zwischen den Tags <ellipse> und <circle>?
1.3.b Das Sie nur mit dem <ellipse>-Tag die Möglichkeit haben unterschiedliche Angaben für den vertikalen und horizontalen Radius zu definieren, können Sie nur damit Ellipsen erzeugen. Um einen Kreis zu definieren können Sie aber beide Tags verwenden.
1.3.c
Wie werden Rechtecke und/oder Quadrate definiert?
1.3.c Um Rechtecke und Quadrate zu erzeugen gibt es den <rect>-Tag. Über dessen Attribute width und height  können Sie Breite und Höhe festlegen. Bei gleichen Werten erhalten Sie ein Quadrat, bei unterschiedlichen ein Rechteck. Folgendes Listing definiert zunächst ein Rechteck und als zweites ein Quadrat. Download

Listing: 1.3.c

...
<svg width="440" height="300">

<rect x="10" y="10" width="20" height="10" style="stroke:blue;fill:none"/>
<rect x="10" y="30" width="10" height="10" style="stroke:red;fill:none"/>

</svg>

1.3.d
Gibt es die Möglichkeit bei Rechtecken abgerundete Ecken zu erzeugen?
1.3.d Ja, die gibt es. Sie können dazu die Attribute rx und ry angeben. Sie definieren den Radius der Rundung. Das folgende Listing definiert zwei unterschiedliche Rundungen. Download

Listing: 1.3.d

...
<svg width="440" height="300">

<rect x="10" y="10" width="60" height="30" rx="20" ry="50" style="stroke:blue;fill:none"/>
<rect x="10" y="30" width="40" height="40" rx="5" ry="5" style="stroke:red;fill:none"/>

</svg>

1.3.e
Wie können Linien gezeichnet werden?
1.3.e Für Linien gibt es den <line>-Tag. Er verfügt über die Attributpaare x1/y1 für die Anfangskoordinate und x2/y2 für die Endkoordinate. Dazwischen wird eine Linie gezeichnet. Folgendes Listing zeichnet auf diese Weise eine waagerechte Linie. Download

Listing: 1.3.e

...
<svg width="440" height="300">
<line x1="0" y1="10" x2="20" y2="10" style="stroke:green;stroke-width:2px"/>
</svg>

Tipp: Mozilla 1.1 kennt den <line>-Tag noch nicht. Wenn Sie Grafiken erstellen, die auch in Mozilla angezeigt werden sollen, sollten Sie stattdessen den <polyline>-Tag verwenden, um Linien zu zeichnen.

1.3.f
Können mehrere Linien zu einer verbunden werden?
1.3.f Nein. Sie können mehrere <line>-Elemente nur gruppieren, aber nicht miteinander verbinden. Wenn Sie eine Linie mit Winkeln zeichnen möchten, können Sie dazu aber auch den <polyline>-Tag verwenden. Mit dessen points-Attribut geben Sie eine Liste von Koordinaten Paaren in der Form points="x1,y1,x2,y2,x3,y3..." an. Diese Koordinaten stellen dann die Eckpunkte der Linie dar. Folgendes Listing erzeugt bspw. eine Zickzack-Linie. Download

Listing: 1.3.f

<svg xmlns="http://www.w3.org/2000/svg">

<polyline points="50,50,75,25,100,75,125,25,150,75"
style="stroke-width:2px;stroke:black;fill:none">

</svg>

Hinweise: Wenn Sie für eine Polylinie nicht explizit mit fill:none im style-Attribut angeben, dass sie nicht gefüllt werden soll, wird die Fläche, die sich aus der geraden Verbindung zwischen erster und letzter Koordinate ergibt, schwarz gefüllt.

(c) 2003, Helma Spona, Dorfstr. 120c. 47647 Kerken-Stenden