SVG (Scalable Vector Graphics) ist eine der "Neuerungen", die das W3C empfiehlt und die auf Webdesigner zukommen wird. SVG ist vor allem dann interessant, wenn man auf der Webseite mit Vector-Grafiken arbeiten muss (z.B. bei Diagrammen oder dergleichen). Aber was ist SVG eigentlich genau?
Das SVG-Format basiert auf XML. Im Prinzip beschreibt man innerhalb einer XML-Datei, welche Form(en) man darstellen will und welches Aussehen diese Formen haben sollen.
Ein Beispiel:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width = "150" height = "150" rx = "10" ry = "10" fill ="#dc0000" stroke="black" stroke-width = "1" transform="rotate(22, 50, 200)" />
<text x ="50" y= "80" fill ="white" font-size ="18">
Thorsten testet SVG
</text>
</svg>
Was passiert hier genau? Zunächst definieren wir den Doctype, genau wie es auch bei HTML-Dokumenten oder XML-Dokumenten notwendig ist. Im zweiten Schritt definieren wir die svg-Version mit dem <svg> Tag.
Hier im Beispiel zeichne ich eine Rectangle (Tag <rect>). Dieser Rectangle gebe ich Koordinaten für den Start mit (x und y-Achse).
rx und
ry runden die Ecken ab,
fill setzt die Füllfarbe.
stroke bildet den Rahmen, im Beispiel hat der Rahmen eine Breite von 1px Stärke. Mittles
transform verändern wir die Box nun noch und lassen sie rotieren. Dann lege ich einen Text (Tag <text>) über die Box in der Füllfarbe weiss, definiere noch die Schriftgröße und den die Koordinaten.
Das Ergebnis (in einem SVG-kompatiblen Browser):
Welche Browser unterstützen SVG eigentlich? Zumindes vom Firefox, Opera und Chrome kann ich sagen, daß die aktuellen Versionen das obige Beispiel darstellen können.
Update: Beim Internet Explorer benötigt man ein Plugin (z.B. den Adobe SVG Viewer, der wird allerdings nicht mehr weiterentwickelt). Gute Nachrichten dennoch: der IE9 kann mit SVG umgehen.SVG bietet großes Potential und unterstützt auch ausgefeiltere Dinge wie Gradienten, Animationen usw. Wer sich detailliert mit Scalable Vector Graphics beschäften will (weil er es wissen möchte oder weil er es zwingend braucht) sollte mal einen Blick auf die folgenden Webseiten werfen:
Um die Frage aus dem Betreff zu beantworten: Ja, aus meiner Sicht ist SVG absolut brauchbar und durch die mittlerweile recht ausgeprägte Unterstützung der Browser auch für den jetzigen bedingt Einsatz geeignet. Man sollte sich allerdings Gedanken machen, was man im Falle fehlender Browserunterstütung macht. Hier bietet sich zumindest für die älteren IE-Versionen ein Fallback auf eine GIF- oder PNG-Grafik an.
« Letzte Änderung: 10.10.2010 20:13 »