CSS, HTML und Javascript mit {stil}

SVG Sprites – die neuen alten Icon-Fonts

SVG Sprites ähneln den Image Sprites mit CSS.

Statt eine SVG-Datei für jedes Symbol zu laden, liegen alle Symbole in einer SVG-Datei und werden über ein hash – das #-Symbol am Ende des Dateinamens – angesprochen.

Noch setzen die meisten Webseiten Icon-Fonts anstelle von SVG-Symbolen ein – ein kompliziertes Verfahren, bei dem Symbole, Icons oder kleine Grafiken in Zeichen eines Fonts umgewandelt werden.

Icon-Fonts sind zwar beliebig skalierbar, aber jedes Icon kann nur eine Farbe annehmen. Dazu kommt der Overhead, eine Grafik in ein Zeichen eines Fonts umzuwandeln, um es dann wieder als Grafik anzuzeigen.

Der direkte Einsatz von SVG-Icons ist effizienter und mit dem Ende von IE8 genauso sicher wie Icon-Fonts.

SVG Sprites in object- oder iframe-Tag

Genauso wie bei einem Icon-Font liegen alle Symbole oder Grafiken in einer einzigen SVG-Datei, allerdings liegen die einzelnen Grafiken oder Symbole übereinander gestapelt in der SVG-Grafik und sind nicht neben- oder untereinander aufgereiht.

Jedes Symbol liegt in einer SVG-Gruppe mit einer ID und einem class-Attribut. .sprite { display:none} verhindert das Rendern der Symbole im HTML-Dokument.

<svg xmlns="http://www.w3.org/2000/svg" 
     width="100%" height="100%" 
     viewBox="0 0 140 140">

    <style>
        .sprite { display:none }
        .sprite:target { display: inline }
    </style>

    <g id="fish" class="sprite">
        <circle r="40" cy="70" cx="70" fill="gainsboro" />
        <path fill="firebrick" d="…" />
    </g>
    <g id="ice" class="sprite" transform="translate(-140)">
        <circle fill="gainsboro" cx="210" cy="70" r="40" />
        <path fill="firebrick" d="…" />
    </g>
    …
</svg>

.sprite:target { display: inline } spricht eine individuelle Gruppe über das #-Symbol am Ende des Dateinamens an.

<object type="image/svg+xml" 
        width="100" height="100" 
        data="sprites.svg#fish"></object>
<object type="image/svg+xml" 
        width="100" height="100" 
        data="sprites.svg#shrimp"></object>
<object type="image/svg+xml" 
        width="100" height="100" 
        data="sprites.svg#coc"></object>

SVG use Sprites

Wenn das SVG in die HTML-Seite gesetzt werden kann, agiert das use-Tag als Sprite.

Die Gesamtgrafik ist nicht sichtbar, z.B. via display: none.

Wenn die Icons aus mehr als einem Element bestehen, liegen sie in einem SVG g-Tag – auf jeden Fall brauchen sie eine id.

<g id="cherry">
   <path d="m 1029,301.6 c 31,-41.2 201,-145.4 201,… " />
   …
</g>

An ihrem Einsatzort werden die Icons mit einem eigenen SVG-Tag und use eingebunden.

<svg viewBox="0 0 440 440" width="100%" height="100%">
    <use xlink:href="#cherry" transform="translate(-900)" />
</svg>