 |
Grafiken im WWW mit geringer Dateigröße, die gut aussehen und sich dann auch noch stufenlos vergrößern und verkleinern lassen - ohne Qualitätsverlust? Ja, das gibt es. SVG, eine neue, auf XML basierende Auszeichnungssprache, bietet genau diese Features - und noch mehr: SVG ermöglicht auch Animationen und die Programmierung interaktiver Anwendungen. Damit ist SVG ein Flash-Konkurrent. Übrigens wurde
Da SVG auf XML (siehe dazu unser XML-Tutorial) basiert, kann jeder es mit einem Texteditor erstellen. Wir wollen im Folgenden zeigen, wie das geht, basierend auf SVG Version 1.0. Natürlich können Sie SVG-Dateien auch mit richtigen Grafikprogrammen erstellen. Inzwischen gibt es dafür sogar schon einen Spezialisten, Webdraw von Jasc Software.
Bevor Sie mit dem Tutorial fortfahren, müssen Sie eine Möglichkeit haben, sich die Resultate auch anzusehen: Sie benötigen ein SVG-Plugin für Ihren Browser. Wir empfehlen den SVG Viewer von Adbobe.
Hallo Quadrat
Nun aber los! Erstellen Sie irgendwo eine Textdatei namens test.svg. Das geht mit dem Texteditor Ihrer Wahl, auch mit dem Windows-Editor Notepad. Tipp: um die Dateiendung .svg zu erzwingen, setzen Sie den ganzen Dateinamen im "Speichern"-Dialog in Anführungszeichen.
Füllen Sie die Textdatei mit diesem Code:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="2" y="2" width="100" height="100"/>
</svg>
Diesen Code in neuem Fenster anzeigen
Nun öffnen Sie die Datei im Browser (wir empfehlen den IE). Wenn ein Doppelklick auf die Datei nicht fruchtet, benutzen Sie den "Öffnen"-Dialog Ihrer Browsers.
Jetzt sollte ein schwarzes Quadrat angezeigt werden. Wenn nicht, dann gehen Sie die oberen Schritte noch einmal durch, denn solange das Quadrat nicht angezeigt wird, können Sie mit SVG nicht arbeiten.
XML als Grundlage
Bitte behalten Sie stets im Hinterkopf, dass SVG auf XML aufbaut. Das bedeutet:
- Die Dateien müssen einem streng formalen Aufbau folgen. Die eigentlichen SVG-Elemente werden immer umschlossen von:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
...
</svg>
- Bei Tags wird zwischen Groß- und Kleinschreibung unterschieden.
- Tags, die nicht geschlossen werden (
</tag>), müssen in der Form <tag a="b" /> (also mit einem Slash am Ende) notiert werden
Rechtecke
Wir sind jetzt bereit, in die echte SVG-Erstellung einzusteigen. Zunächst gehen wir daher auf ein simples Element ein, das Rechteck.
Im Beispiel wurde das Rechteck erzeugt durch diesen Code:
<rect x="2" y="2" width="100" height="100"/>.
Die Attribute x und y legen die Position der linken oberen Ecke des Rechtecks fest, width und height die Breite des Rechtecks. Für die y-Koordinate gilt der obere Rand des Browsers als 0, nicht der untere, wie der normale Mensch es eigentlich erwarten würde.
Style Sheets
Unser bisheriges Quadrat sieht noch ziemlich dürftig aus. Ziemlich schwarz, und bisher kennen wir keine Methode, das zu ändern.
Erfreulicherweise gibt es jedoch eine: entweder die Verwendung von Style Sheets oder die Verwendung von sog. "presentation attributes".
Beispiel (Style Sheets):
<rect x="2" y="2" width="100" height="100" style="fill: green;"/>.
Die gleiche Wirkung hat folgender Code ("presentation attribute"):
<rect x="2" y="2" width="100" height="100" fill="green"/>.
Das Style Sheet-Attribut steht also auch direkt als Tag-Attribut zur Verfügung. Das gilt nicht nur für fill, sondern für alle Attribute. Welchen der beiden Wege Sie bevorzugen, hängt ganz von Ihnen ab.
Style Sheets in SVG sind nicht das gleiche wie XHTML-CSS! Viele Attribute werden Sie in beiden Style Sheet-Varianten finden, aber bei weitem nicht alle.
Es ist übrigens auch möglich, Style Sheets am Anfang eines SVG-Dokuments zu deklarieren oder mit class-Atttributen zu arbeiten. Wie das geht, zeigt folgender Code:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<defs>
<style type="text/css"><![CDATA[
rect
{
fill: red;
}
.special
{
fill: blue;
}
]]></style>
</defs>
<rect x="2" y="2" width="10" height="10"/>
<rect x="12" y="12" width="10" height="10"/>
<rect x="22" y="22" width="10" height="10" class="special"/>
</svg>
Diesen Code in neuem Fenster anzeigen
Im Gegensatz zu XHTML können die Style-Definitionen also nicht direkt notiert werden. Stattdessen müssen sie von einem Gerüst umgeben sein:
<defs>
<style type="text/css"><![CDATA[
...
]]></style>
</defs>
Im weiteren Verlauf der Tutorials werden wir mit Presentation Attributes arbeiten. Behalten Sie jedoch die Style Sheets im Hinterkopf - vielleicht werden sie sich irgendwann einmal als praktischer erweisen.
Weitere Attribute
Es gibt noch viele andere Attribute, mit denen Sie das Aussehen Ihrer Objekte beeinflussen können. Im Folgenden eine kleine Liste:
Rahmen
Rahmen werden definiert über die beiden Attribute stroke-width (Breite des Rahmens) und stroke (Farbe des Rahmens).
Transparenzen
Um Rahmen bzw. Füllung eines Objektes transparent zu machen, verwenden Sie die Attribute stroke-opacity und fill-opacity. Akzeptiert werden Werte zwischen 0 (ganz transparent) und 1 (nicht transparent). Um ein Objekt in seiner Gesamtheit transparent zu machen, können Sie auch das Attribut opacity verwenden.
Folgender Code kombiniert das:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="0" y="0" width="20" height="20" fill="navy"/>
<rect x="20" y="20" width="20" height="20" fill="navy"/>
<rect x="40" y="40" width="20" height="20" fill="navy"/>
<rect x="40" y="40" width="200" height="200" fill="#66ccff" stroke-width="5px" stroke="black" fill-opacity="0.6"/>
</svg>
Diesen Code in neuem Fenster anzeigen
Abgerundete Rechtecke
Man kann übrigens auch abgerundete Rechtecke erzeugen. Dazu einfach die Attribute rx und ry setzen:
<rect x="40" y="40" rx="10" ry="10" width="200" height="200" fill="navy"/>
Linien
Fürs erste haben wir genug von Rechtecken. Sehen wir uns eine Linie an:
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3">
Diesen Code in neuem Fenster anzeigen
Die Linie geht von den Koordinaten x1,y1 zu x2,y2. Farbe und Dicke werden durch die Rahmen-Attribute festgelegt.
Kreise und Ellipsen
Kreise werden definiert durch einen Mittelpunkt (cx, cy) und einen Radius (r). Ellipsen dagegen über einen Mittelpunkt und zwei Angaben zur Richtung (rx, ry)
<circle cx="100" cy="100" r="50" fill="navy" stroke="black" stroke-width="5px"/>
<ellipse cx="300" cy="300" rx="100" ry="70" fill="navy" stroke="red" stroke-width="5px"/>
Diesen Code in neuem Fenster anzeigen
Polygon
Polygone (Vielecke) lassen sich durch eine Liste von Punkten definieren. Zwei Punkte werden durch ein Leerzeichen getrennt, zwei Koordinaten eines Punktes durch ein Komma:
<polygon points="100,0 150,50 50,50" stroke="red" stroke-width="1px"/>
Diesen Code in neuem Fenster anzeigen
Andere Objekte
Es gibt noch andere Objekte, so z.B. die äußerst komplexen Pfade. Eine gute Information dazu finden Sie bei Webreference.com.
Effekte
Effekte bzw. Filter sind sehr komplex, so dass wir das Thema hier nur minimal anreißen können. Für nähere Erläuterungen und weitere Beispiele sehen Sie sich bitte den entsprechenden Abschnitt der W3C-Recommendation an.
Folgender Code aktiviert einen Weichzeichner-Filter:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<defs>
<filter id="MeinFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"/>
</filter>
</defs>
<rect filter="url(#MeinFilter)" x="100" y="100" width="100" height="100" fill="#3399ff"/>
</svg>
Diesen Code in neuem Fenster anzeigen
Wichtig ist: im <defs>-Abschnitt werden Filter-Methoden definiert. Innerhalb eines <filter> können dann verschiedene Effekte aktiviert werden, hier der Weichzeichner feGaussianBlur. Will man eine solche Liste verschiedener Effekte auf ein Element anwenden, so setzt man das Attribut filter. Beachten Sie, dass das, was innerhalb von url() steht, an die id der Effekt-Liste angepasst ist.
Farbverläufe
Für Farbverläufe gilt Ähnliches wie für die Effekte: wir werden das Thema nur kurz anreißen und empfehlen die W3C-Dokumentation für weitere Informationen.
Sehen Sie sich folgenden Code an:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<defs>
<linearGradient id="fv" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="black" stop-opacity="1"/>
<stop offset="25%" stop-color="navy" stop-opacity="1"/>
<stop offset="50%" stop-color="blue" stop-opacity="1"/>
<stop offset="75%" stop-color="red" stop-opacity="1"/>
<stop offset="100%" stop-color="white" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="40" y="40" width="200" height="200" fill="url(#fv)">
</svg>
Diesen Code in neuem Fenster anzeigen
Ein Farbverlauf wird also ähnlich definiert wie ein Filter, nämlich innerhalb von <defs>. Auch die Anwendung verläuft analog, nämlich indem innerhalb von fill="url(...)" auf die id des Farbverlaufes Bezug genommen wird.
Das Aussehen des Farbverlaufes wird über das linearGradient-Tag bestimmt. Die Attribute x1, y1, x2 und y2 verändern die Ausrichtung und Breite des Farbverlaufes, also z.B. ob ein Farbverlauf nur die Häfte des zur Verfügung stehenden Platzes einnimmt oder ob der Farbverlauf gedreht werden soll.
Innerhalb des Tags findet sich dann die Liste von Farben, die der Verlauf beinhalten soll. Das Attribut offset definiert dann, wo innerhalb des Verlaufes eine Farbe stehen soll.
Text
Natürlich lässt SVG auch die Einbindung von Text zu. Dazu dient das <text>-Tag. Die Position des Textes lässt sich über die Attribute x und y festlegen. Die Attribute für Füllung funktionieren wie bei den anderen Tags, und für die Schriftformatierung können die von CSS bekannten Attribute genutzt werden.
Innerhalb von <text> kann das tspan-Tag genutzt werden, um bestimmte Text-Teile anders zu formatieren. Es akzeptiert die gleichen Attribute wie das text-Tag.
Gerade auf Text wirken Effekte meist gut - folgendes Beispiel zeigt es:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<defs>
<filter id="MeinFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<text filter="url(#MeinFilter)" x="40" y="80" font-family="Verdana" font-size="20pt" fill="navy">Lorem <tspan font-size="35pt">ipsum</tspan> dolor sit amet</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Animation
Animation und Interaktivität sind zwei Themenkomplexe, denen wir separate Artikel widmen werden. Wenn Sie einen kleinen Vorgeschmack wollen, sehen Sie sich doch einmal diesen Code in Aktion an (man beachte: die Datei ist gerade einmal 1,5 KB groß!):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<defs>
<filter id="MeinFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="0" y="0" width="300" height="50" stroke="black" stroke-width="3px" fill="#000099">
<animate attributeName="x" attributeType="XML" begin="0s" dur="0.4s" fill="freeze" from="0" to="300" />
<animate attributeName="y" attributeType="XML" begin="0.4s" dur="0.4s" fill="freeze" from="0" to="300" />
</rect>
<text x="450" y="450" font-family="Verdana" font-size="20pt" fill="black" opacity="0">SVG contra Flash!
<animate attributeName="opacity" attributeType="XML" begin="0.4s" dur="3" fill="freeze" from="0" to="1" />
<animate attributeName="x" attributeType="XML" begin="3.4s" dur="0.5" fill="freeze" from="450" to="329" />
<animate attributeName="y" attributeType="XML" begin="3.4s" dur="0.5" fill="freeze" from="450" to="335" />
<animate attributeName="fill" attributeType="XML" begin="3.9s" dur="0.5" fill="freeze" from="black" to="white" />
<animate attributeName="fill" attributeType="XML" begin="4.4s" dur="0.5" fill="freeze" from="white" to="#66ff66" />
<animate attributeName="fill" attributeType="XML" begin="4.9s" dur="0.5" fill="freeze" from="#66ff66" to="#ccccff" />
<animate attributeName="fill" attributeType="XML" begin="5.4s" dur="0.5" fill="freeze" from="#ccccff" to="white" />
</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Weiterführendes...
... finden Sie auf der SVG-Seite des W3C!
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
