SVG in Website skalierbar einbetten
Der Artikeltitel ist ein Homage an den Artikel von Gerrit van Aaken, der mich zu eigenen Experimenten inspiriert hat.
Mit einer Testseite und browsershots.org kann man recht schnell feststellen, dass SVG auf allen Browsern bereits gut unterstützt wird. Auf allen Browsern? Nein, ein Hersteller aus Redmond hat es bis zur Version 8 seines Browsers nicht geschaft, dies nativ zu implementieren, gelobt aber sich etwas einfallen zu lassen, da die Adobe den SVG-Viewer nicht länger bereitsstellen will.
Es gibt verschiedene Einbettungsmöglichkeiten von SVG in die Website, direkt im Dokument (inline), als externe Datei mittels <object> oder als Hintergrund mittels CSS. Letzteres beherrscht bisher leider nur Opera.Für die Website halle-neustadt.info habe ich mich für die zweite Variante entschieden.
Wenn die Grafik noch nicht zur Verfügung steht, muss man diese erzeugen. Meine Wahl war auf das Logo der früher eigenständigen Stadt Halle-Neustadt gefallen. Die verlinkte Grafik ist natürlich in einer sehr schlechten Qualität. Ich habe mich entschieden, diese nicht neu zu zeichnen (was aber durchaus eine Alternative sein kann). Dazu habe 
ich das Vektorprogramm Inksacape genutzt. Dieses steht für alle Plattformen kostenlos zur Verfügung und verwendet generell SVG zu Speicherung von Vektorgrafiken und kann auch ein Bitmap vektorisieren. Das Original kann man dann löschen. Das Ergebnis kann sich durchaus sehen lassen.
Die Dateigröße war in meinem Beispiel zunächst einmal sehr enttäuschend und es war eine umfangreichen Nacharbeit nötig. Durch die schlechte Qualität des Originals benutzt Inkscape viel zu viele Objekte und Knoten. Letztere kann man mit Strg-L reduzieren. Eine Erläuterung von Inkscape würde hier den Rahmen sprengen, deshalb sei nur kurz auf die Dokumentation verwiesen.
Am Ende beträgt die Grafik jetzt 14,1kb und ist klein genug. Die Einbettung ist einfach:
<object type=“image/svg+xml” data=“templates/neustadt3/img/Wappen_Halle-Neustadt_1.svg”>
Sie benötigen einen SVG-fähigen Browser!</object>
Statt des Textes ist auch die Angabe eines Alternativbildes für den IE möglich. Das wäre bei einem Firmenlogo sicher auch notwendig. Da es sich um einen privaten Blog handelt, sehen die IE-Nutzer eben etwas weniger. Ich habe mich dafür entschieden das object per CSS Eigenschaften zuzuweisen. Alternativ wäre das auch im svg selbst möglich gewesen. Die Darstellung im Konqueror sieht merkwürdig aus, da er aber eine eher geringe Verbreitung hat, habe ich das vernachlässigt.
Fazit: SVG ist gut verwendbar. Mit den Möglichkeiten stehen wir sicher noch am Anfang. Ein Blick auf die MDC-Seite zeigt interessante Beispiele, die einen Eindruck vermiteln, was durch die direkte Manipulation der Bilder möglich wird. Für CSS-Designs wird es dann spannend, wenn alle modernen Browser auch die Einbettung per url(background.svg) gestatten.
geschrieben von Pawel