Blog
Bloghead

REVOLVER 9 UX: PIXELGENAU, RESPONSIVE UND SCHARF – SVG-ICONS II

SVG IN HTML EINBINDEN

Neben einzelnen Grundelementen lassen sich mit SV-Grafiken Filter, wie z. B. Schlagschatten, Weichzeichner oder Überblender umsetzen. Auch animiert bietet SVG viele spannende Möglichkeiten. Einfache Bewegungs- und Form-Tweens lassen sich unkompliziert integrieren. Damit steht der Darstellung von Bewegungen in Charts und Diagrammen nichts im Weg.

Die Integration von SVG erfolgt entweder referenziert – also über einen Verweis auf den Speicherpfad der Datei – oder als Code in der HTML- oder der CSS-Datei. Mit den folgenden Tags lassen sich die SV-Grafiken referenzieren:

  • <img>-Tag

    Die SVG-Datei liegt als Resource auf dem Server und wird über das <img>-Tag aufgerufen.
  • <object>-Tag

    Der Vorteil bei dieser Methode ist die Möglichkeit Fallback-Mechanismen einzubauen. Diese geben Alternativen (in Text oder als PNG) aus, wenn die SVG-Datei einmal nicht geladen oder angezeigt werden kann.

Mit der Weiterentwicklung von HTML 5 kann SVG endlich sein ganzes Potenzial ausspielen. Die bereits 2001 vom W3C standardisierte Technologie lässt sich nun auch nativ in den Quellcode einbetten. Das Aussehen wird dabei grundlegend mit CSS beeinflusst. Hierfür wurde ein neues Tag eingeführt:

  • <svg>-Tag

    Der Code der Datei liegt inline im Body des HTML-Dokuments. Über JavaScript ist so ein komfortabler Zugriff auf das Aussehen der SV-Grafik möglich. So kann man einfach Animationen und Mouse-Over-Effekte umsetzen.

 

SVG IN CSS EINBINDEN

Neben den schon angesprochenen Alternativen, können SVG-Dateien auch als Background-Image inline in CSS eingebunden werden. Um die Dateigröße beim Einsatz von vielen Grafiken zu reduzieren, empfiehlt es sich die SV-Grafik mit einer Base-64-Kodierung in die CSS-Datei zu integrieren. Das sieht im Beispiel unseres „Add-Icons“ folgendermaßen aus.

Die Integration im HTML-Dokument erfolgt dann in einem „div-Kontainer“.

Vor allem für Seiten, in denen viele Grafiken zum Einsatz kommen, ist diese Methode eine tolle Möglichkeit die Performance zu verbessern. Lädt man die Seite neu, werden alle über herkömmliche Wege eingebundene Grafiken, immer wieder geladen. So werden bei jeder Server-Anfrage unzählige Grafiken über das Netz empfangen.

Integriert man alle vorkommenden Grafiken wie beschrieben in die CSS-Datei, wird diese zwar in erster Linie aufgeblasen – einmal geladen, sind die Grafiken dann im Cache und müssen nicht wieder bei jeder weiteren Server-Anfrage erneut geladen werden.

In Revolver 9 werden die Icons über die CSS-Datei integriert werden. Bedenkt man den Einsatz von insgesamt weit über 100 Icons lässt sich ein spürbarer Performance-Zuwachs feststellen. Für unseren Fall ist diese Methode für das Darstellen von scharfen SVG-Grafiken also alternativlos.

 

LINKS

Erstellt 4, Apr 2014 in News von bjoern.weiler
Bearbeitet 8, Apr 2014 von bjoern.weiler

...