Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

SVG/Anwendung und Praxis/Sprites

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im CSS-Sprites-Artikel haben Sie gelernt, wie Sie grafische Elemente wie Icons, Logos und Dekorationen zu einer größeren Grafik, einem Sprite zusammenfassen können.

Der Einsatz einer SVG-Grafik gegenüber einer Rastergrafik hat hier mehrere Vorteile.

SVG-Grafiken sind

Neben der herkömmlichen Einbindung als Hintergrundbild und der passenden Positionierung mit background-position können Sie SVGs auch anders einbinden.

HTML-inline Sprites[Bearbeiten]

Da SVG als XML-Dialekt direkt in HTML eingebunden werden kann, können Sie die Definitionen für Ihre Icons direkt in Ihre Webseiten integrieren.

Beispiel
<!DOCTYPE html>
<!-- HTML-Code -->

<svg style="display:none;">
  <!-- Platz für Icons -->
</svg>

<!-- zusätzlicher HTML-Code -->
</html>
Irgendwo in Ihrem HTML-Dokument wird ein SVG-Codeblock integriert, der nicht angezeigt wird.

Die Icon Grafiken werden nun jeweils in ein symbol-Element notiert, dessen id dann mithilfe eines use-Elements aufgerufen wird.

Diese Methode hat verschiedene Vorteile:

  • Symbol-Elemente werden vom Browser nicht dargestellt.
  • Sie können mit einem viewBox-Attribut positioniert und skaliert werden.
Beachten Sie: Safari iOS stellt keine Icons dar, wenn die Referenzierung mit use vor dem Laden der symbol-Elemente erfolgt. Stellen Sie das SVG-Fragment daher vor ihren HTML-Code.

CSS inline SVG-Sprites[Bearbeiten]

Sie können SVG-Sprites auch als Hintergrundbilder in ein Stylesheet einbinden. Anstelle der URL, die auf eine weitere (Grafik-)Datei referenziert, werden die SVG-Grafiken als Data-URI direkt eingebunden. Das Stylesheet dient so als Sprite, was mehrere Vorteile hat: Es spart HTTP-Requests und die Bilder werden im Cache gespeichert.

Beispiel
<a href="checkout.html">zum Warenkorb<span class="warenkorb-icon"></span></a>
.warenkorb-icon{
    background-image: url('data:image/svg+xml;…'); 
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 1em;
    width: 1em;
}
Die in eine Data-URI umgewandelte SVG-Grafik wird direkt in Ihrem Stylesheet integriert.

In dieser Technologie spielt das Stylesheet die Rolle des Sprites und die SVG-Icons werden wie gewohnt als Hintergrundbilder eingebunden. So einfach diese Methode ist, hat sie doch einige Nachteile:

Die Data-URIs können nicht

  • mit CSS gestylt und mit :hover verändert werden - es müsste eine zusätzliche Grafik umgewandelt werden
  • mit CSS animiert werden - eine in der Grafik befindliche SMIL-Animation wäre möglich.
Beachten Sie: Data-URIs benötigen maskierte Sonderzeichen[1]:
  • Internet Explorer versteht kein < und >
  • Firefox versteht kein #
Es ist empfehlenswert, Data-URIs durch einen Data-URI-Generator umwandeln zu lassen.

Fragmentbezeichner[Bearbeiten]

SVG-Grafiken sind Grafiken und so ist es nur logisch, sie auch als Grafiken einzubinden. Damit Sie aber nicht eine Unzahl von Icons verwalten müssen, werden alle Icons in einer SVG-Grafik zusammengefasst und mit einem Fragmentbezeichner (fragment-identifier) bestimmt. Dies ist z.B. ein id-Attribut, das einen Teil der Grafik identifiziert und dann mit dem viewBox-Attribut passend skaliert.[2]

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Leer

Details: caniuse.com

Beispiel
<img src='icons.svg#svgView(viewBox(64, 0, 32, 32))' alt="Warenkorb Icon"/>
Die SVG-Grafik mit allen Icons wird als Bild referenziert und dann wie bei einem CSS-Sprite passend verschoben.


Eine weitere Möglichkeit bietet das view-Element. Mit ihm können Sie im Definitionsabschnitt des SVGs eine bestimmte Ansicht festlegen und dann später im HTML-Bereich des Dokuments das Bild mit dem Fragmentbezeichner referenzieren, sodass nur der festgelegte Abschnitt angezeigt wird.

Beispiel
<view id='warenkorb-icon' viewBox='64 0 32 32' />

<img src='icons.svg#warenkorb-icon alt="Warenkorb Icon"/>
Das Warenkorb-Icon wird mit dem viewBox-Attribut innerhalb des view-Elements passend skaliert und dann im img referenziert.


Empfehlung: Verwenden Sie diese Methode. Sie hat einige Vorteile:
  • Die SVG-Icons sind in einer Grafik integriert und sparen so HTTP-Requests.
  • Die Icons sind in einer externen Grafik-Datei und werden so im Cache gespeichert.
Beachten Sie: Diese Methode funktioniert in allen modernen Browsern außer im Safari. Hier ist nur das Verwenden von Fragmentbezeichnern im img-Element möglich, nicht jedoch bei der CSS-Eigenschaft background-image.[3]

Ben Travis empfiehlt hier

  • das Verwenden von background und background-position.
  • das Einbinden der SVG-Grafiken in object- oder iframe-Elementen.


Beispiel
<object type='image/svg+xml' data='icons.svg?id=#svgView(viewBox(64,0,32,32))'></object>
Das Warenkorb-Icon wird mit dem viewBox-Attribut passend skaliert und mit einem object-Element referenziert.

Quellen[Bearbeiten]

  1. selfHTML-Forum: SVG-Sprites in CSSvom 24.11.2015
  2. W3C: SVGFragmentIdentifiers
  3. Ben Travis: SVG Sprite Sheets - Safari Issues

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

deutsch:

englisch:

Sprite-Generator:

  • github: SVG Sprite
    SVG Sprite is an Node.js module, which optimizes a bunch of SVG files, and bakes them into SVG sprite-types including traditional CSS sprites for background and/or foreground images, SVG stacks and more.

Polyfill: