Schon seit gefühlten 200 Jahren ist SVG eine Technologie, die eigentlich super ist, aber immer noch kein Schwein verwendet, weil sie

1. nur von den allermodernsten Browsern nativ unterstützt wird.
2. kein User sich genötigt fühlt, ein entsprechendes Plugin zu installieren (Und womit? Mit Recht!)
3. sich kein Webdesigner damit wirklich auskennt.

Nachdem ich heute kurz anrecherchiert habe, bestätigt sich leider das allgemeine Urteil: SVG ist noch nicht reif für das reale Web, obwohl mit Firefox 1.5 und der neuesten Safari-Version zwei wichtige Browser SVG von Haus aus unterstützen. Ich will kurz erläutern, von welcher Seite ich mich dem Thema genähert habe.

Vor zwei Wochen entschied ich mich – wie viele Webdesigner – in meinem Blog die »RSS«- und »XML«-Buttons durch das neue, hübsche Quasi-Standard-Feed-Icon zu ersetzen. Recht so. Und dabei ging mir durch den Kopf, was mir schon des Öfteren durch den Kopf ging; Warum muss ich aus diesem simplen Symbölchen, das als Vektorgrafik nur wenige Byte schwer ist, eigentlich umständlich eine Pixelgrafik backen, um sie auf meiner Website einzusetzen? Diese Vorgehensweise hat zwei entscheidende Nachteile: Die Grafik wird dateimäßig größer, dafür ist sie nicht mehr skalierbar. Warum kann ich nicht eine knuffige SVG-Datei draus machen, um diese dann direkt als Vektor-Objekt in meine Website einzubetten? Gesagt, probiert. Besser gesagt: Die SVG-Variante des Icons liegt im Download-Paket bereits bei. Nur schnell eingebaut, und alle (aktuellen Browserbenutzer) sind glücklich … Dachte ich.

Doch halt: Warum muss ich eigentlich bei der Einbindung der Grafik die Anzeigegröße in Pixeln angeben? Wäre es nicht viel sinnvoller, Höhe und Breite der Grafik in em enzugeben, so dass das Icon beim Textskalieren gleich automatisch mitwachsen kann? Prinzipiell funktioniert das auch (natürlich per CSS), nur leider wird hierbei lediglich der Viewport für die SVG-Grafik skaliert, nicht dessen Inhalt. Sprich: Wenn ich im Browser den Text zoome, wächst zwar der Platzhalter für das Icon mit, nicht aber das Icon an sich. Das gleiche gilt natürlich auch für alle Bulletpoints und andere Grafiken, die man sonst üblicherweise per CSS als Hintergrundgrafik einbindet. Hier könnte SVG seine volle Stärke ausspielen. Alleine die skalierbare Einbindung scheint nicht zu funktionieren. Eigentlich ein Witz, denn wozu trägt SVG das »Scalable« im Namen?

Bei Mozilla hat man sich letzten Sommer mit einem ähnlichen Problem befasst – in dieser Diskussion geht es darum, ob beim Textzoom nur die Textbereiche einer SVG-Grafik skaliert werden, oder die Grafik als Ganzes. Ich fordere nun einfach mal frech die Möglichkeit ein, SVG-Grafiken so einzubetten, dass ihre Größe relativ zur Fensterbreite (Prozentangabe) oder relativ zur Schriftgröße (em) wachsen oder schrumpfen kann. Es würden sich nette neue Möglichkeiten ergeben, gerade was
liquide oder elastische Layouts angeht.

Sollte es diese Möglichkeit längst geben und der olle Gerrit schlampig recherchiert haben, dann bitte ich um Verzeihung. Natürlich weiß ich, dass man auch eine Flash-Grafik verwenden kann, um den gewünschten Effekt zu erreichen, aber das wäre ja viel zu einfach und unidealistisch gedacht ;-)

update: Kommando teilweise zurück … Wenn man in der SVG-Datei die globale Größenangaben weglässt, kann man auch SVGs mit em-Angaben skalieren. Danke für den Tipp geht an Kommentator Martin. Beispiel hier zu begutachten.

update2: Nochmal neu: Das Ganze klappt offensichtlich auch, wenn im SVG-File eine Größenangabe gemacht wird. Noch habe ich nicht alles durchgespielt und getestet, aber eventuell kommt demnächst ein genaueres How-To zum Thema SVG und skalierte Einbettung. Kurzinfo: Mit Adobe Illustrator lassen sich SVGs über die Funktion »Fürs Web abspeichern« grandios gut erzeugen. Alles weitere später. Und guckt mal meine aktuellen Feed-Icons in der Sidebar an ;-)