Dieser Artikel ist als Fortführung von SVG-Sprite als Background: Nutzung und Automatisierung anzusehen. Es gelten dieselben Vorbedingungen und dasselbe Setup. Fragen offen? Wir helfen!
Anstatt SVGs als Hintergrundgrafik zu verwenden, geht es bei dieser Technik darum SVG-Grafiken wie Bilder als Inline-Element einzusetzen. Der Vorteil ist, dass bei dieser Methode zwei Farben im Inline-SVG angepasst werden können und die Skalierung einfacher ist.
SVGs mit symbols als Inline svg
Diese Methode kurz zusammengefasst:
- Nutzung als inline SVG-Element (<svg><use xlink:href=“sprite.svg#symbol“ /></svg>)
- Größe des Icons sehr leicht per CSS einstellbar
- SVG-Daten sind cachebar
- Zwei Farben sind manipulierbar
- Beim Abruf von externen Servern ist auf CORS zu achten
Grunt-Task konfigurieren
Die Konfiguration des symbol-Tasks ist sehr einfach. Es wird nur der Zielpfad und der Name des Sprites angegeben. Die Einstellungen für den Modus symbol lege ich wie folgt fest:
svg_sprite: {
icons: {
expand: true,
cwd: 'src/img',
src: ['**/*.svg'],
dest: "./",
options: {
mode: {
symbol: {
bust: false,
dest: "dest/css",
sprite: "../img/symbols.svg"
}
}
}
}
}
Mit den Konfigurationsoptionen im Bereich svg kann man noch Einfluss auf das Endresultat nehmen und den Output etwas steuern.
svg: {
xmlDeclaration: true,
doctypeDeclaration: true,
namespaceIDs: true,
dimensionAttributes: true
}Inline-SVG Sprite nutzen
Als Resultat des Tasks erhalten wir so eine saubere und optimierte symbols.svg. Diese können wir nun in einem <use>-Tag referenzieren.
<svg class="icon">
<use xlink:href="symbols.svg#shopping-cart"></use>
</svg>
Auch hier entspricht die ID (Hash-Wert) jeweils dem Dateinamen der ursprünglichen SVG-Grafik.
Demo
In der Demo auf codepen.io wurde die Inline-SVG-Grafik nun nicht extern referenziert, sondern inline in die Seite gelegt. Der Effekt ist aber derselbe. Ruhig auch mal über die Symbole mit der Maus drüber fahren.
See the Pen
Inline SVG Sizing by Markus Winkelmann (@designerzone)
on CodePen.
Bei der externen Referenzierung muss man explizit darauf achten, dass man keine Domain übergreifenden Requests (Cross-Origin Resource Sharing) versucht. Oder aber man hat dafür Sorge zu tragen, dass ein entsprechender Aufruf durch einen Header am SVG-Response erlaubt wird.
Farbmanipulation
Bei dieser Methode kann man durch einen Trick zwei Farben verändern. Im SVG erhalten die gewünschten Pfade das Präsentations-Attribut fill=“currentColor“. Diese Angabe bewirkt, dass für dieses Element die gewählte Schriftfarbe (color) als Füllfarbe gilt. Daher kann bei dieser Methode ein Icon mit fill und color zweifarbig „angemalt“ werden.
Browserkompatibilität
Die allgemeine SVG-Kompatibilität ist sehr gut. Allerdings wird die Methode mit dem Fragment Identifier an einer externen Ressource nicht vom IE und vom Android Stock Browser unterstützt. Hier hilft das JavaScript SVG4everybody von Jonathan Neal. Dieses holt per AJAX die entsprechenden SVG-Daten und fügt sie in die Seite ein, damit die genannten Browser auch Grafiken anzeigen.
Volle Kontrolle über SVG und die Pfade
Möchte man die volle farbliche Kontrolle über ein SVG haben, muss der komplette Quellcode des SVG inline im HTML enthalten sein. Dann kann man die einzelnen Form-Elemente mit Klassen versehen und umfangreich stylen. Weitere Hilfe nötig?
Kommentare