praegnanz.de büro für intervernetzte medien

Gerrit, 08.01.2006

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

  1. Andreas Dittes am 8. Januar 2006 #

    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!
  2. Julian am 8. Januar 2006 #

    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.
  3. Martin am 8. Januar 2006 #

    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.
  4. Martin am 8. Januar 2006 #

    Argh. object-Tag mein ich. Wieso fliegen hier denn Tags raus? Und das sogar, wenn sie maskiert sind!
  5. Frederic am 8. Januar 2006 #

    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
  6. Gerrit am 8. Januar 2006 #

    @Martin: Danke, ist upgedatet!

    @Frederic: Das ist nichts Neues. Aber Pixelbilder sehen skaliert einfach mistig aus!
  7. Florian am 8. Januar 2006 #

    Hey Gerrit,
    Momentan sind da leider keine Feedicons in der Sidebar!

    Grüße

    Flo
  8. Gerrit am 8. Januar 2006 #

    Dann nutze einen aktuellen Browser, der SVG unterstützt! Darum geht’s ja.
  9. Julian am 8. Januar 2006 #

    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.
  10. Florian am 8. Januar 2006 #

    Ich benutze Safari in der neuesten Version! ;-)
  11. Florian am 8. Januar 2006 #

    Update:
    Mit Firefox (auch neu) sehe ich einen grünen Strich. MIt dem Vergrössern kommt eine Scrollbar zum vorschein.
  12. Stefan am 9. Januar 2006 #

    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.
  13. Martin am 9. Januar 2006 #

    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.
  14. Mathias am 9. Januar 2006 #

    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…
  15. Sebastian Gruber am 9. Januar 2006 #

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

    Okay, der Firefox nimmt wohl doch die Größenangaben in der SVG-Datei ernst. Jetzt sollte es funky aussehen, oder?
  17. Boris am 9. Januar 2006 #

    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?
  18. Gerrit am 9. Januar 2006 #

    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 :-)
  19. Robert am 9. Januar 2006 #

    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.
  20. Mathias am 9. Januar 2006 #

    Jetzt sieht’s schnucklig aus.
  21. Ano Nym am 9. Januar 2006 #

    Die Inkscape-SVGs werden partout nicht vergößert – geht das irgendwie?
  22. Michael Preidel am 10. Januar 2006 #

    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.
  23. Gerrit am 10. Januar 2006 #

    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.
  24. Michael Preidel am 10. Januar 2006 #

    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.
  25. Gerrit am 10. Januar 2006 #

    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.
  26. Boris am 10. Januar 2006 #

    @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.
  27. hukl am 10. Januar 2006 #

    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 !
  28. Thibaud am 10. Januar 2006 #

    Vielleicht kannst du was an deinem Feed machen, diesen Beitrag hab ich zweinmal gekriegt, zweimal direkt untereinander.
  29. Alexander am 10. Januar 2006 #

    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.
  30. typneun am 13. Januar 2006 #

    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…
  31. Ole am 18. Januar 2006 #

    und bei mir verabschiedet sich Safari vollständig, wenn ich deine Seite aufrufe :-(
  32. Peter am 20. Januar 2006 #

    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)

  33. haka am 18. Februar 2006 #

    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.

  34. Bertil am 13. Mai 2006 #

    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.

  35. Pawel am 13. November 2006 #

    @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.

  36. MiSc am 8. Februar 2007 #

    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 schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.