Scalable Vector Graphics skalierbar einbetten (2×update)

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 ;-)

38 Kommentare

Andreas Dittes

ja, svg is ne nette sache. da muss es irgend eine pixellobby geben, die das verhindert. *verschwörungstheorieausdenk*
nein, aber vor allem für große symbolgrafiken oder hintergründe würde das einen großen vorteil bieten. ausserdem die sache mit der skalierbarkeit: die webseite könnte auf dem pda/smartphone genauso aussehen wie auf dem 30‹‹ plasmafernseher. und das ohne qualitätsverlust.
…ich werde weiter warten. svg for president!

Julian

Nach genau so einer Möglichkeit suche ich auch, da muss doch irgendwer geschlafen haben, als man sich überlegte, wie das alles denn zu implementieren sei. Wenn man dann noch frei skalierbare Hintergrundbilder hätte, stünde der komplett über Textzoom skalierbaren Seite nichts entgegen… ein Traum.

Martin

Wenn man aus feed-icon.svg die width- und height-Angaben entfernt (default ist afaik 100 %), nimmt es (direkt aufgefufen) so viel Platz im Browserfenster wie möglich ein. Ein -Tag wird dann auch voll ausgefüllt. Zumindest in Firefox.

Martin

Argh. object-Tag mein ich. Wieso fliegen hier denn Tags raus? Und das sogar, wenn sie maskiert sind!

Frederic

Hi Gerrit,
vielleicht hilft dir das weiter – zumindest mit Pixelbildern ist es kein Problem, dann sollte .svg auch kein Thema sein:
http://sonspring.com/journal/em-image-sizing

Gerrit

@Martin: Danke, ist upgedatet!
@Frederic: Das ist nichts Neues. Aber Pixelbilder sehen skaliert einfach mistig aus!

Florian

Hey Gerrit,
Momentan sind da leider keine Feedicons in der Sidebar!
Grüße
Flo

Gerrit

Dann nutze einen aktuellen Browser, der SVG unterstützt! Darum geht’s ja.

Julian

Woa, sieht sehr cool aus. Leider kann man, wie ich gerade eben festgestellt habe, in Safari den Text nicht beliebig vergrößern, was an dieser Stelle zur Feier des Tages mal angebracht wäre. Bin schon sehr gespannt auf das Howto.

Florian

Ich benutze Safari in der neuesten Version! ;-)

Florian

Update:
Mit Firefox (auch neu) sehe ich einen grünen Strich. MIt dem Vergrössern kommt eine Scrollbar zum vorschein.

Stefan

Ich nutze ja schon länger Linux als Betriebssystem von daher stand Illustrator auch nie zur Debatte. SVG ist daher das Format der Wahl, wenn es um Vektorgraphiken geht. Der Editor Inkscape beispielsweise kann Graphiken in jeder beliebiegen Größe auch als Bitmap rendern und ist auch für alle Systeme (u.a. MacOS) zu haben. Je stärker XHMTL modularisiert wird, umso mehr werden XML-Formate mit eigenen Namensräumen an Bedeutung gewinnen. Ebenso das Multimediaforamt SMIL, aber das ist noch sehr lange Zukunftsmusik.

Martin

Ich weiß ja nicht, ob du noch am basteln bist, aber derzeit sieht das bei mir nicht so aus, wie es wohl sein soll:
Firefox 1.5
Opera 8.51
Beides auf Windows XP mit der Standard-Schriftgröße.

Mathias

Die Idee ist der Hammer. Danach habe ich schon lange gesucht, obwohl es wieder einmal einen Moment dauern wird, bis im MSIE dies auch implementiert wird. Und ja, obwohl ich ihn auch nicht gern habe (den IE), so ist er doch weit verbreitet… schade, aber trotzdem kann man auch diesen unverständigen Benutzern näher kommen, indem man sich soweit wie möglich an die Standards hält.
P.S. Das mit den RSS-Icons bei deinen Feeds, Gerrit, kann ich auch bestätigen. Ich benutze Firefox in der letzten Verison und es zeigt auch nur Obiges an…

Sebastian Gruber

bei mir (opera 8.5 mit adobe-plugin [ja, ich weiß, nativ gibt’s inzwischen auch]) funktioniert alles, wie’s sein soll.

Gerrit

Okay, der Firefox nimmt wohl doch die Größenangaben in der SVG-Datei ernst. Jetzt sollte es funky aussehen, oder?

Boris

Sieht funky aus. Nur kann ich irgendwie nicht erfolgreich nachvollziehen, wie ich das (Original-)Ding mit dem Illustrator skalieren kann – »Für Web speichern«… etc. ist klar, aber wenn ich da irgendetwas in dem Bildgrößen-Feld ändere, erhalte ich später im Browser eine XML-Fehlermeldung: »XML-Verarbeitungsfehler: Undefinierte Entität«
Oder habe ich da etwas völlig falsch verstanden und muss das Bild schon als reine Illustrator-Grafik vorab auf die richtige Größe skalieren?

Gerrit

Im Illustrator änderst Du gar keine globale Größenangabe. Es ist völlig egal, wie groß das Ding im Illustrator angelegt ist. Statt dessen gehst Du einfach mit einem Texteditor in die finale Datei hinein und löschst aus dem png-Tag die width- und height- Angabe raus :-)

Robert

Was mir noch aufgefallen ist wenn man CSS anschaltet dann sind die SVG plötzlich riesen groß. Was natürlich nicht oft vorkommt, aber im Sinn der Zugänglichkeit usw. sicher nicht ideal.

Mathias

Jetzt sieht’s schnucklig aus.

Ano Nym

Die Inkscape-SVGs werden partout nicht vergößert – geht das irgendwie?

Michael Preidel

Im September 2005 verfügten lediglich 11,5% aller internetfähigen PCs über ein SVG Plugin (Quelle). Vor allem auch vor dem Hintergrund, dass Adobe mit Flash ja seit kurzem über eine zweite Vektortechnologie verfügt, die aber laut der gleichen NPD-Statistik 97,3% der Internet-Nutzer nutzen bzw. sehen können, glaube ich kaum, dass SVG jemals aus seinem Nischendasein herauskommen wird.
Und ein Webkit mit integrierter SVG-Unterstützung wird da wahrscheinlich auch nicht viel dran ändern können.

Gerrit

Diese Zahlen sind mir klar, nur finde ich, dass irgendwann einer mal anfangen muss, sonst bewegt sich da auch wirklich nichts. Wenn es nicht Leute wie Zeldman oder Meyer gegeben hätte, die CSS-Layouts zu einer Zeit vorangetrieben haben, als allgemein noch absolut nicht die Rede davon war, wären wir alle der Tabellen-Hölle nie entkommen.
Und ganz ehrlich: SVG hat als XML-Format sehr coole Möglichkeiten, gerade was das Styling mit CSS angeht. Und man denke auch an eine Dynamisierung mittels PHP oder anderen serverseitigen Techniken. Hier steckt großes Potenzial drin, und der Grafik-Monopolist Adobe ist SVG ja auch nicht abgeneigt… Also: Mal sehen, was draus wird, ein bisschen Idealismus ist natürlich immer von Vorteil, wenn man sowas anfängt.

Michael Preidel

Als Mitentwickler der SVG Spezifikationen ist Adobe naturgemäß nicht abgeneigt. Ich will dir auch überhaupt nicht widersprechen – natürlich bietet SVG hervorragende Möglichkeiten. Es hätte meines Erachtens sogar das Potential, so eine Art Postscript fürs Web zu werden.
Ich befürchte nur, dass Adobe nach dem Macromedia-Kauf seine SVG-Führungsrolle aufgibt und sich auf Flash konzentriert.

Gerrit

Diese Befürchtung habe ich auch – schließlich ist Flash etabliert. Nur eben nicht so leicht zu handhaben … Sollte der IE7 SVG unterstützen (Man wird ja mal träumen dürfen), dann lohnt es sich jedoch trotzdem, verstärkt darüber nachzudenken. Anscheinend sind im IE-Entwicklerteam ja keine dummen Leute zusammengekommen. Die werden einiges besser machen als bisher.

Boris

@Gerrit (Kommentar 19):
Klappt bei mir nicht. Egal, was ich da an Größenangaben rauslösche, die Datei erzeugt danach im Ffox einen XML-Verarbeitungsfehler.

hukl

Hmm das ist auch mal wieder interessant. SVG hab ich ja schon vor Ewigkeiten auf dem Schirm gehabt, damals noch von Adobe gehyped um Flash entgegenzutreten. Da sie sich Flash nun einfach gekauft haben … ;)
Es ist wahrlich an der Zeit SVG von der unkommerziellen Seite aus zu schieben. Dein Beitrag hat mir sehr gefallen. Ich werd mal schauen ob ich die Tage auch noch was dazu schreibe.
In diesem Sinne: Entdecke die Möglichkeiten !

Thibaud

Vielleicht kannst du was an deinem Feed machen, diesen Beitrag hab ich zweinmal gekriegt, zweimal direkt untereinander.

Alexander

Im MSIE 6 gibt es auf den Einzelposting-Seiten ein großes weißes Loch oben; weiß aber nicht, ob das nicht auch schon vorher da war. Davon abgesehen sind die SVG-Icons natürlich sehr schick.

typneun

also, wenn ich diese seite in einem ausgeblendeten tab lade und dann einblende, rödelt sich safari nen wolf. kann das an diesem svg liegen? ich nehms mal an, denn sonst verhält sich safari eher zahm…

Ole

und bei mir verabschiedet sich Safari vollständig, wenn ich deine Seite aufrufe :-(

Peter

In Safari 2.04 sehe ich nur den alternativen Text der Icons, in Firefox 1.5 / Mac kommts wie es soll. Eigentlich dachte ich, ich hätte den aktuellen Safari; zumindest wird er über Software-Update nicht aktueller. Kannst Du mal nachschauen, ob hier ein Plugin wirkt? (Liste der Plugins)

haka

SVG kommt, und auch Adobe wird es weiter unterstützen. Inzwischen kann bereits FlashLite (für Handies) SVG-Tiny rendern, und soweit ich weiß gibt es einen SVG-Export für die neue Flash-Software.

Zum Opera-Problem: die Scollbars erscheinen, wenn die im object-tag angegebene Größe kleiner ist als die Größe der SVG-Datei. Kann mit der relativen Größe zusammenhängen. Aber auch der IE 6 hat noch seine Macken, z.B. beim Ausdruck. Die Darstellung von alternativen Inhalten, wenn die Datei nicht vorhanden oder nicht lesbar ist funzt nur in Opera korrekt.

Es bleibt nur zu hoffen, dass Mozilla und Opera mithalten können. Bisher ist da die SVG-Unterstützung eher rudimentär.

Praktisch beim Illustrator (geht auch mit Photoshop und Pixelbilder): SVG kann direkt über den Öffnendialog von einer Webadresse geladen werden.

Bertil

SVG ist eine sehr interessante Technologie, die viele Möglichkeiten bietet, denken Sie an Kartendarstellungen im Web
auf PCs, PDAs und andere Mobile Devices. Unbestreitbar, die Darstellung in einigen Browsern hat noch seine Macken,
probieren Sie doch einfach K-Meleon mit Adobe Beta6 SVG-Plugin und die Welt ist wieder in Ordnung! Ich werde auf meiner Webseite und in meiner Webapplikation (für 1000 User und mehr) sicherlich SVG/SVGZ einsetzen, schon allein aus Kostengründen  …
Es sind leider nur wenige Firmen und Anwender etwas experimentierfreudig und bereit technolgisch andere Wege als die große Masse zu gehen.

Pawel

@Boris
Der FF untersützt nur eine Teilmenge der Spezifikation nativ. Er kommt deshalb reproduzierbar nicht mit Deklaration wie xmls:a usw. (um Zeile 11 des exportierten Dokuments) zurecht.
Diese kann aber gelöscht werden, ebenso wie die (weiter unten) folgenden a: Das sagt einem dann aber auch der FF.

MiSc

Bilder skalierbar anzeigen

Da gibt’s dann noch die Möglichkeit, dass ich ein Bild mitwachsen lassen will, oder zumindest den Bildausschnitt. Größeres Bild in div einbetten und mit overflow:hidden überlappende Teile ausblenden. Breite und Höhe vom div mit em angeben und fertig ist der skalierbare Bildausschnitt!

de.selfhtml.org
(ihr müsst nur noch die anzeige mit firebug auf em umstellen)

Kommentar verfassen