Zukunftsichere Webgestaltung mit SVG statt PNG und GIF

Neuer Mac mit Retina-Display oder HiDPI-im neuen Laptop. Und das alte Firmenlogo sieht dank Skalierung unscharf aus?

Dabei existiert mit dem Scalable Vector Graphics ein offenes Grafikformat das echte Wunder vollbringt und sich mittlerweile problemlos überall einsetzen lässt.

Im Internet existieren fast 20 verschiedene Bildformate die jedoch nicht von alle Browsern verstanden werden.

Die gängigsten Bildformate sind:

JPG oder JPEG
Jpeg ist das Format der Wahl für Fotos. Es ist zwar schon etwas älter aber sehr platzsparend da es sich beliebig komprimieren lässt.
Je nach Kompression sieht man Artefakte die bei Fotos jedoch weniger auffallen als bei Grafiken.

GIF
Das Graphics Interchange Format verliert langsam an Bedeutung. Es eignet sich mit maximal 256 Farben nur für Grafik und primitive grafische Animation. Ein Vorteil ist die geringe Größe im Vergleich zu PNG.

PNG
Das Portable Network Graphics hat GIF weitgehend abgelöst. Es kann verlustfrei und verlustbehaftet komprimiert werden oder die Dateigröße mit einer indizierten Farbpalette minimiert werden.

SVG
Scalable Vector Graphics ist der offizielle Standard für 2D Grafik im Web. Es ist ein XML Format das als Objekt direkt im Browser dargestellt, erzeugt und manipuliert werden kann.

Warum SVG?

Wie der Name schon sagt ist SVG ein Vektorgrafikformat. Es lässt sich dadruch unbegrenzt verlustfrei vergrößern und verkleinern. Gerade in Zeiten von hochauflösenden Bildschirmen und flexiblen Layouts steigt die Qualität der Darstellung deutlich. Es ist vergleichsweise klein und kann sehr schnell durch den Browser dargestellt werden. Selbst komplexe Grafiken mit viel Text und Verläufen sind selten größer als 30 KB.

Was ist mit alten Browsern?

Alle Browser seit 2014 unterstützen das SVG-Format. Einige Ausnahme sind die Internet Expolorer bis Version 8 die aber so gut wie keine Rolle mehr spielen. (0.15%). Derart veraltete Browser sollten aus Sicherheitsgründen (und auch Layouteinschränkungen) nicht mehr einsetzen.

Wie einbinden?

Wie alle Bildformate lassen sich SVGs als <img> Tag oder auch via CSS als Background Image einbinden. Da es direkt vom Browser dargestellt wird kann eine SCG Grafik auch als <svg> HTML Element eingebunden werden. Viele moderne Javascipt Anwendungen benutzen SVG um z.B. Charts darzustellen, Animationen zu steuern oder interaktive Karten zu steuern.

Auch SVGs können wie Bilder auf eine bestimmte Höhe und Breite festgelegt werden. Entweder durch die Dokumentengröße im Grafikprogramm,  width und height im CSS bzw Styleangaben oder die height und width Attribute vom <img> Tag. Letzteres ist aber schlechter Stil. In Zeiten von flexiblen Layouts sollte man eher CSS-Klassen wie img-fluid verwenden die das Bild der Auflösung anpasst.

Ein Beispiel

SVG-Grafiken eignen sich besonders gut für Firmenlogos, Icons oder besondere Schriften.

Als Beispiel hier das offizielle HTML 5 Logo. Die Datei ist nur 674 Bytes groß.

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 
 
 
<title>HTML5 Logo</title>
 
 
<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"></path> 
<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"></path> 
<path fill="#f16529" d="M256 480.5V131H404.3L376 447"></path> <path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"></path> <path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"></path> 
</svg>
HTML 5

SVGs in Dokument- und Printvorlagen

Auch für Briefe und Werbematerialien eignet sich das SVG Format. Dort ersetzt es langsam EPS. Zwar unterstützt es offiziell kein CMYK. Allerdings werden Flyer, Broschüren, Visitenkarten und Poster zunehmend digital gedruckt.

Natürlich unterstützen Word und Open-Office auch SVG. Wenn man also das alte Rasterbild Logo ersetzen will, dann kann man zu SVG greifen.

Erzeugen und Bearbeiten von SVGs

inkscape

Die meisten Grafikprogramme unterstützen mittlerweile das SVG Format. Es muss jedoch nicht immer Corel Draw sein. Unser Tool der Wahl ist das Open Source Programm Inkscape. Inkscape ist sozusagen der Spezialist für SVG da es SVG als Standardformat verwendet. Inkscape ist einfach und sehr mächtig. Es lässt sich auch im professionellen Bereich uneingeschränkt einsetzen.

Inkscape kann auch vorhandene (nicht Vektor) Grafiken in SVGs konvertieren. Je nachdem wie groß und sauber die PNGs, GIFs oder JPEGs sind, ist kaum Nacharbeit erforderlich.

Wir verwenden Inkscape auch für Präsentationen, Mockups und Webseitenlayouts.

Inkscape gibt es für Windows, Linux und MacOS

Animationen mit SVG

Wie eingangs erwähnt verwalten Browser die XML Knoten im Dokument wie normale HTML Anweisungen. Das bedeutet dass man die Eigenschaften von Linien, Flächen oder Verläufen mit Javascript beeinflussen kann. Dadurch sind auch Animationen mittels Javascript oder CSS möglich.

Hier das abgewandelte Beispiel einer Succes-Animation von Simon Wuyts. Zum starten der Animation einfach über den Kreis fahren.