Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Retina ready: Grafiken als SVG performant in Webseiten einbinden

    Retina ready: Grafiken als SVG performant in Webseiten einbinden
Responsive WordPress-Theme: BonPress

In Zeiten, wo mit verschiedendsten Endgeräten auf Websites zugreifen, müssen Grafiken besonderen Anforderungen genügen. Vektorgrafiken im SVG-Format sind hier eine pragmatische Lösung, erklärt Sergej Müller (wpSEO).

 

In Zeiten von HiDPI-Displays macht man sich als Webentwickler zunehmend Gedanken über die Kompatibilität zu modernen Bildschirmen. Früher war das der Internet Explorer, der eine gesonderte Behandlung wünschte. Zu der Sorte gehört auch Outlook als merkwürdiges E-Mail-Programm mit der HTML-Engine aus dem Textprogramm Word. In der Gegenwart sind es Retina-Displays, die ebenfalls einen Sonderfall darstellen: Für Auflösungen solch eines Kalibers müssen Bilder in doppelter Auflösung angelegt werden, um der Pixeldichte der Endgeräte zu entsprechen. Doch warum nicht gleich auf ein Grafikformat setzen, welches beiden Generationen der Bildschirme gerecht wird? SVG lässt grüßen.

Browser-Support: Desktop & Mobile

SVG definiert sich als skalierbares Vektorformat, welches von W3C für Vektorgrafiken empfohlen wird. Immer öfters trifft man im Web auf die Dateiendung .svg bzw. .svgz - so langsam kommt das Bildformat in Fahrt. Auch mit der Browser-Unterstützung sieht es prächtig aus, wenn man IE kleiner 9 und Android kleiner 3 ignorieren (abhängig von der Zielgruppe) oder „statische" Alternativen anbieten kann.

Wahre Stärke: Komprimierung

Die Einbindung der SVG-Dateien in Webseiten ähnelt sich der Konkurrenz: Datei auf den Server laden, in HTML bzw. CSS verknüpfen – die Vektorgrafik zeigt Lebenszeichen. Soweit verständlich.

Doch Scalable Vector Graphics haben einen wesentlichen Vorteil gegenüber PNG & Co. und ähneln in dieser Hinsicht den CSS- und JavaScript-Dateien: Es gibt die Möglichkeit, die vorteilhafte GZIP-Komprimierung zu nutzen. Im Klartext heißt es, SVG-Bilder lassen sich in komprimierter Form vom Server zum Browser übertragen. Der Client entpackt selbsttätig die GZIP-Datei und zeigt den Inhalt (SVG) an. Die Vorgehensweise reduziert die Übertragungszeit der Grafik, entsprechend minimiert sich der Ladevorgang der Seite. Von der Anzahl und Größe der auf einer Webseite eingebundenen SVG-Ressourcen hängt der Gesamtgewinn der eingesetzten Komprimierungstechnik ab.

Aktivierung der Server-Komprimierung für SVG-Files

(Apache .htaccess & Deflate-Modul)

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>
AddType image/svg+xml .svg

Da SVG-Bilder sich selten ändern, ist es effizienter die Datei in bereits komprimierter Form auf dem Server zur Verfügung zu stellen. Somit nimmt man dem Server die Aufgabe der Kompression ab, beschleunigt zusätzlich die Auslieferung der Datei und schont dabei die Server-Ressourcen.

Manuelle Komprimierung der SVG-Files

(Beispiel auf dem Mac)

  1. SVG-Datei aus einem Vektorprogramm exportieren
  2. Auf der Konsole zur Datei navigieren
  3. gzip -9 image.svg eingeben (der Dateiname ist anzupassen)
  4. Generierte Datei von image.svg.gz in image.svgz umbenennen
  5. Auf den Server übertragen und als image.svgz im Quelltext der Webseite verlinken

(Apache .htaccess, statt den oberen Eintrag)

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Wichtig bei Adobe AI

Adobe Illustrator erlaubt eine Speicherung von komprimierten SVG-Dateien, die eine Endung .svgz erhalten. Diese Dateien sind teilweise korrupt und steigen in den meisten Browsern mit einem Encoding Error aus. Dito beim Versuch SVGs aus Adobe AI manuell nach SVGZ umzuwandeln. Der Workaround ist, die betroffene SVG in einen Text-Editor zu ziehen, dort die erste Zeile <?xml version="1.0" encoding="utf-8"?> in <?xml version="1.0"?> zu modifizieren. Nach der Speicherung kann die Vektorgrafik nach obiger Anleitung durch GZIP verkleinert werden.

Vergleich der Formate

  • Original (Vektor): 279 KB
  • PNG: 377 KB
  • PNG (Smushit): 324 KB
  • JPEG (80 %): 78 KB
  • SVG: 94 KB
  • SVGZ: 25 KB

Schaut man sich die Vergleichstabelle an, stellt man prompt fest: JPEG liefert ebenso gute Gründe zur Einbindung. Doch erstens leiden JPEGs an sichtbaren Qualitätsverlusten und zweitens müssten 2 Versionen der Grafik angefertigt werden (= Pflegeaufwand).

Fazit

Perfekte, verlustfreie, platz- und ladezeitsparende Alternative zu Webgrafiken. Mit sichtbar feiner (nativer) Skalierung. Ideal geeignet für Illustrationen aller Art. Auf wpSEO.de kommt die vorgestellte Technik zum Einsatz: Das Logo wie das "Schweizer Messer" sind in SVGZ deklariert.

Natürlich eignet sich SVG(Z) ausschliesslich für Vektorgrafiken, die als solche von Anfang an konzipiert und angelegt wurden. Fotos und andere Bildelemente müssen für HiDPI weiterhin in separater Größe geführt werden.

Bonus

An Caching der SVG-Vektoren denken. Zum Beispiel mit:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

Über den Autor

Sergej Müller ist Entwickler von wpSEO, einem polulären SEO-Plugin für Wordpress.

Finde einen Job, den du liebst

17 Reaktionen
Kerim
Kerim

Sollte es nicht so sein?
"Für Auflösungen solch eines Kalibers müssen Bilder in vierfacher Auflösung angelegt werden, um der Pixeldichte der Endgeräte zu entsprechen."
Das Bild wird ja doppelt so breit und doppelt so hoch, so ist das Verhältnis 4:1.

Aber ja, SVG ist eine Möglichkeit. Habe auch bereits erste Versuche damit gestartet, mit einer Verwinderung der Dateigrösse. Aber kommt halt sehr auf den Bildinhalt an, ob ein Vorteil entstehen kann.

Antworten
nachtgold
nachtgold

@Florian das dachte ich auch als ich den Artikel lass, dass es kein Vorteil sein kann wenn man die Daten nachträglich komprimiert. Im Gegenteil, da es recht aufwendig ist, SVGs vorzukomprimieren, damit der Server sich nicht unnötig damit belasstet, ist kein Vorteil.

Antworten
Florian

Wie gesagt:

Mir geht's um pauschale Aussagen wie „Doch Scalable Vector Graphics haben einen wesentlichen Vorteil gegenüber PNG & Co. […] Es gibt die Möglichkeit, die vorteilhafte GZIP-Komprimierung zu nutzen."

Die Entropiekodierung ist in beiden Fällen gegeben, da PNG ebenfalls verlustfrei komprimiert. Insofern kann dies kein „wesentlicher Vorteil” sein.

Der Größenvorteil im Beispiel rührt daher, dass das eine ein Vektorformat, das andere Bitmap-basiert. Das ist im Falle von Illustrationen ein Vorteil, weil die Informationen mit geringer Datenmenge repräsentiert werden können (die anschließend Komprimierung, ob über Dateiformat oder Server, ist dann nur „Formsache”).

Antworten
Sergej Müller

@Alexander Trust
Nachrichtenbilder sind meist Fotos. Fotos sind nie SVG.

Antworten
Sergej Müller

@Florian
Und ob das richtig ist. Am Ende zählt die Dateigröße und da ist SVG mit seiner (Server-)Komprimierung eine Nasenlänge voraus. Das ist der wahre Vorteil von SVGs. Mir als Entwickler bringt ein PNG mit integrierter Kompression nix, wenn es zehnfach größer ist.

Antworten
Florian

Der Vorteil, dass die wahre Stärke von SVG die Komprimierung sei, finde ich so nicht richtig. PNG bringt diese verlustfreie Komprimierung bereits im Dateiformat mit, insofern ist es dann egal, ob der Server mit oder ohne Kompression arbeitet (da eh keine weitere verlustfreie Kompression mehr möglich ist). Insofern würde das hinsichtlich Kompression gesehen eher als Nachteil sehen, da das SVG-Dateiformat keine Komprimierung mitbringt. Das ist ja eigentlich aber auch nicht der Punkt, da das eine Bitmap-Grafik und das andere eine Vektorgrafik ist (mit entsprechenden Vor- und Nachteilen).

Antworten
Alexander Trust

SVG finde ich grundsätzlich eine prima Idee, ich bin auch froh über die "Freaks" - positiv ausgedrückt -, die für die Wikipedia Firmenlogos als SVG-Grafiken umwandeln.

Nur dummerweise kann man als "Newsquelle" noch nicht Gebrauch davon machen, denn Nachrichten-Bilder sind wie das Salz in der Suppe, fehlen sie, schmeckt es (Google) fast nicht. Und in den Richtlinien dort heißt es, dass lediglich JPG und PNG akzeptiert werden.

Vielleicht kann ja jemand ein gutes Wort bei Google einlegen. Denn die hier angesprochene Ladezeitverkürzung dürfte durchaus im Sinne des Suchmaschinenbetreibers sein, der ja zuletzt mit seinen Panda und Penguin getauften Algorithmus-Updates auch in diese Richtung agiert hat.

Antworten
Land karten
Land karten

Wenn man nicht nur einfache Beispiele hier und da sondern auch den SVG-Standard beim W3C anschaut merkt man, das man oft Tabellen-Werte usw. nativ benutzen kann weil man Viewports und Skalen usw. jeweils für Teile von SVGs einfach festlegt und ganz natürlich z.b. die nativen Aktienkurse oder Preise oder Messwerte ohne Umrechnung nutzen kann und die Pixel und Koordinatentransformation von ein paar SVG-Definitionen erledigt wird. Man muss also nicht erst mühselig mehrere Transformationen machen sondern kann oft die nativen Daten benutzen was viele aber nicht wollen weil man dann an die Daten kommt und die Lizenzen auch nicht erlauben, als öffentlicher Quasi-Proxy für z.B. Börsenkurse zu agieren.
Wie bei Folien die man übereinanderlegt oder Powerpoint-Hintergrund-Bilder kann man z.b. im Vektorgrafik-Programm ein SVG erzeugen und bequem (XSLT oder sonstwie) mit einem anderen SVG mischen welches z.b. von Javascript oder XSLT o.ä. erzeugt wurde. SVG skaliert die verschiedenen SVGs dann zueinander wenn man die passenden Befehle angibt. Wie performant das ist, weiss ich allerdings nicht. Für Quartalszahlen, Balkendiagramme, Kuchendiagramme und Infografiken o.ä. sollte es ausreichend sein und erleichtert ein einheitliches Erscheinungsbild von Grafiken.

Interessant wären Techniken um SVGs einmalig auszurechnen und z.b. als Bitmaps/Gifs o.ä. zwischenzuspeichern und für Apps oder im DOM als immutable Objekte benutzen zu können.

Dank Flash hat SVG 5-10 Jahre verloren. :-/

Nativ skalieren tut es nicht unbedingt immer besonders gut weil die Engine nicht weiss, was wie wichtig ist. Mario oder Lara Croft oder Duke Nukem für 320x200 oder kleinere Grafik-Auflösungen runterrechnen geht nicht immer gut nur mit automatischer Skalierung. Ein Emphasize oder "Important"-Attribut bzw. Style könnte wichtige von unwichten "Punkten"/Linien/Objekten in einer Punktwolke unterscheidbar und bei herumskalieren auf diverten Geräten klarer sichtbar machen als wenn man es nur trivial größer Skaliert.
Wenn man ein typographisches "A" mit Serifen doppelt so hoch und doppelt so breit macht, wird der dünne Strich auch nicht doppelt so dick weil es sonst zu fett aussieht. Umgekehrt kann man es bei kleiner-Rechnen nicht einfach simpel herunterskalieren weil der dünne Strich sonst vielleicht wegoptimiert wird und vom 'A' Teile unsichtbar werden. Früher gabs "Printshop" für Matrix-Drucker. Das waren immer recht grob skalierte Buchstaben.
Bei Retina vs. HD-TV vs. Ipad-1 vs. Iphone merkt man sowas dann und braucht wirksame Lösungen.
Auch bei Landkarten und Straßen-Namen fällt einem das Problem oft schnell auf wenn man herumzoomt. Man kann zwar die Autobahn oder Landstraße dicker/dünner machen aber die Straßen-Namen haben engere Abmessungen die sinnvoll sind und müssen auch noch überschneidungsfrei zu anderen Straßennamen oder Dingen auf der Landkarte angeordnet werden.

Antworten
Sergej Müller

@Andrey
Super Wert, danke dir.

Antworten
Andrey
Andrey

@Sergej
Bei einer 2 MB großen SVG, die ausschließlich aus paths besteht, konnte ich fast 700 KB gut machen.
Vom Aufwand her ca. 30 Zeilen XSLT.

gruß Andrey

Antworten
Sergej Müller

@Stefan Schult
Unterschiedlich sieht er aus. Textlich, bildlich. Google: svg fallback

Antworten
Stefan Schult
Stefan Schult

Hier wird die ganze Zeit von einem Fallback geredet wie sieht denn so ein Fallback aus?

Antworten
Sergej Müller

@moeller_gm
Aktuell surfen deutschlandweit 10 % der Nutzer mit einem IE < 9. Man kann aber auch für diese 10 % ein Fallback einbauen. Ich finde es aber nicht tragisch, wenn eine, zwei Illustrationen auf der Webseite für diese Nutzer nicht sichtbar sind. Hauptsache, Bedienelemente funktionieren. Wie ich oben schon sagte, alles eine Frage der Zielgruppe.

Antworten
moeller_gm
moeller_gm

Also ich finde nicht das die Brwoserunterstützung prächtig aussieht.
Kein IE8? Bei 95% der Seiten ein absolutes NoGo.
Und naja Android unter V3 bedeutet auch einfach mal den größten Teil der Android User, da die Hersteller vielfach kein Update auf V4 anbieten.

Antworten
Sergej Müller

@ Andrey
Hast du mal ausprobiert, ob sich der Aufwand lohnt?

Antworten
Andrey
Andrey

hi,

Man könnte noch per XSLT die paths auf 2 Nachkommastellen bereinigen und dann erst "gzipen".

gruß Andrey

Antworten
manuel
manuel

Interessant wäre noch die Verwendung von SVGs in den Webseiten inklusive Fallback-Lösung. Habe das mal versucht und bin am Fallback und an der Anpassung der Größe gescheitert. Bei mir wurde nicht die Größe der Grafik geändert sondern nur das Bild nach der Pixelanzahl einfach abgeschnitten.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen