5. März 2018 // von Julian Kern

Vektorgrafiken im modernen Web

Im Zuge unserer Erneuerungen für die mobile Thomann-Seite räumen wir vieles auf, gehen aber auch — für uns — neue technische Wege. Einer davon ist, Vektorgrafiken zu verwenden. Vektorgrafiken, oder auch “SVG” (für “Scaleable Vector Graphic”, “Skalierbare Vektorgrafik”), zeichnen sich dadurch aus, dass sie, wie der Name sagt, voll skalierbar sind. Im Gegensatz zu den üblichen Bitmap-Grafiken wie JPEGs oder PNGs, bei denen im Prinzip jedes einzelne Pixel mit Position und Farbwert beschrieben wird, gibt es bei SVG-Grafiken nur Pfadangaben. Das ist vergleichbar mit dem “Malen nach Zahlen”: Es werden Punkte angegeben, die mit Linien verbunden sind, es können aber auch geometrische Formen angegeben werden.

Im Prinzip ist das SVG also eine Zeichenanleitung für den Computer. Diese Anleitung ist dabei aber nicht pixelgenau geschrieben, sondern in Verhältnissen — sie skaliert also mit, wenn man die SVG-Grafik vergrößert oder verkleinert. Und genau das ist auch der unschlagbare Vorteil von SVGs: Ich benötige nur eine Grafik, die ich in beliebiger Größe darstellen kann. Im Gegensatz dazu sollte ich für Bitmap-Grafiken immer mehrere Versionen zur Verfügung stellen, um zum Beispiel auf einem kleinen Smartphone Bildschirm eine kleinere Version anzuzeigen, als auf dem großen Desktop-PC.

Im Web-Kontext ergibt sich mit SVGs ein weiterer Vorteil: Ich kann sie durch CSS beeinflussen. Wo man früher gleich acht oder zwölf Icon-Bilder brauchte, zum Beispiel für einen Pfeil (vier Richtungen à drei Farbvariationen), brauche ich heute nur einen SVG-Pfeil, den ich via CSS drehen und einfärben kann.

Vektorgrafiken als solche sind nichts Neues mehr. Grafiker arbeiten seit vielen Jahren damit, und auch im Web gibt es diesen Standard schon seit 2001. Allerdings unterstützten viele Browser bis vor wenigen Jahren den SVG-Standard nicht oder nicht komplett, was eine Benutzung de facto unmöglich machte. Das hat sich mittlerweile, auch durch verändertes Nutzerverhalten, geändert.

Das Re-Design unseres Footers passt da wie Faust aufs Auge: Viele kleine verschiedene Grafiken, an denen man das Einbinden und das Arbeiten mit SVGs erproben und verfeinern kann. Letztendlich haben wir uns für eine Variante entschieden: Das Inline-SVG aus einem Spritesheet. In einem sogenannten Spritesheet sind alle Grafiken zusammengefasst, werden vom Browser also gleichzeitig geladen und stehen sofort zur Verfügung. Die Einbindung erfolgt dann so:

<span class="svg-icon svg-icon-arrow">
    <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="spritesheet.svg#arrow"></use>
    </svg>   
</span>

Was wir hier sehen: einen <use>-Tag, der dafür verantwortlich ist das Spritesheet aufzurufen, und das Icon, in diesem Fall “arrow” daraus zu extrahieren. Ein <svg>-Element, ohne dessen Kontext das <use>-Element nicht funktioniert. Als letztes haben wir das <span>-Element, mit dessen Hilfe wir gewisse Basis-CSS-Styles anbringen können:

  .svg-icon {
    width: 50px;
    height: 50px;
    color: gray;
    background-color: transparent;
    display: inline-block;
    box-sizing: border-box;
}
.svg-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    box-sizing: border-box;
}

Viel gibt es in diesem CSS nicht zu sehen: Das Icon bekommt eine gewisse Basisgröße, und wird so angelegt, dass es sich immer am <span>-Element ausrichtet. Spannend ist aber die Angabe fill: currentColor. Diese sagt dem SVG-Icon, dass es die Farbe seines Kontextes annehmen soll, also die der color-Angabe — das macht es ganz einfach dieses Icon einzufärben.

Automatisierung

Um die Vektorgrafiken so einfach benutzen zu können, muss natürlich erst einmal das Spritesheet erstellt werden. Das könnte man manuell tun, müsste es aber auch jedes Mal manuell anpassen, wenn ein neues Icon hinzukommt. Hier greift bei uns ein automatisches Script. Unsere Statischen Ressourcen (wie die bisherigen Icons, CSS, JavaScript), werden schon länger nachbehandelt. Im Falle von CSS und JS heißt das zum Beispiel, dass der Code “minified” wird, also unnötiger Platz eingespart wird, der zwar zur Entwicklung praktisch, aber zur Ausführung nicht nötig ist. Für die neuen SVG-Icons heißt das, dass wir alle in einem bestimmten Ordner befindlichen zu einem Spritesheet zusammenfügen. Dabei werden auch noch unnütze Angaben entfernt, um weiter Platz zu sparen.

Diese Nachbehandlungen erfolgen bei uns mittels “Grunt”, für die SVGs kommt das Plugin “grunt-svgstore” zum Einsatz.

Ausnahmen

Einige wenige Grafiken kommen nicht als Inline-SVG zum Einsatz. Das liegt zum einen daran, dass sie nur selten benutzt werden oder anderweitig in einem Spritesheet keinen Sinn machen würden — zum anderen liegt es aber auch daran, dass das <use>-Element nicht mit zusätzlichen Definitionen wie Farbverläufen umgehen kann. Zum Beispiel bei den “Badges” im neuen Footer.

Diese Badges werden ganz gewöhnlich über ein <img>-Element eingebunden, denn das geht mit SVG als Grafikformat immer problemlos.

Auch wenn die Integration in unsere Infrastruktur und Prozesse am Anfang nicht ganz einfach war, bieten SVGs doch einen klaren Mehrwert gegenüber Bitmap-Icons, und sorgen dafür, dass unser Shop schlank und schnell bleibt.

Verwandte Blogposts