Stefanmelz of slashworks
11/8/2016 - 7:55 AM

SVG Sprite erstellen

SVG Sprite erstellen

README.md
content_copyfile_download
  • Rendered
  • Source

Anleitung SVG Sprite erstellen

Video: https://youtu.be/MffRwB8zbKs

Icon in Illustrator vorbereiten

Das Icon muss in Illustrator bereinigt werden, z. B. unsichtbare Ebenen entfernen, Pfade zusammenführen, Text in Pfade umwandeln usw. Für konventionelle Icons muss die Farbe auf schwarz (#000000) gestellt werden. Die Zeichenflächen-Größe sollte zwischen verschiedenen Icons gleich sein, z. B. 40x40.

Icon als SVG speichern

Das Icon als SVG speichern. Im Speichern-Dialog per "SVG-Code…" den Code anzeigen lassen und kopieren.

SVG optimieren

Unter https://jakearchibald.github.io/svgomg/ den kopierten SVG-Code aus der Zwischenablage einfügen. Den optimierten SVG-Code per Copy-Button herunterladen.

SVG-Code in Sprite einfügen

Den kopierten SVG-Code in die Sprite-Datei einfügen. SVG- und Style-Tags müssen entfernt werden. Die übrigen Tags mit den Pfadangaben (path, circle, rect etc.) werden in das symbol-Tag geschrieben:

<symbol id="mein-icon" viewBox="0 0 40 40">
  <title>Mein Icon</title>
  <path …>
</symbol>

Das viewBox-Attribut entspricht der Zeichenflächengröße aus Illustrator, oder kann aus dem SVG-Tag abgelesen werden.

SVG-Icon referenzieren

Um ein Icon aus dem SVG-Sprite zu verwenden, wird an der gewünschten Stelle ein leeres SVG-Element erstellt und mittels -Tag auf das Symbol verwiesen.

<strong>Menü <svg><use xlink:href="icon-sprite.svg#icon-burger"></use></svg></strong>

Polyfill für IE - svg4everybody

Um in älteren IE-Versionen externe SVG-Quellen zu verwenden, kann der polfyfill svg4everybody verwendet werden: https://github.com/jonathantneal/svg4everybody

Link-Sammlung: https://css-tricks.com/svg-use-with-external-reference-take-2/ https://github.com/jonathantneal/svg4everybody

icon-sprite.svg
content_copyfile_download
  • Rendered
  • Source
Menu
icon-style.css
content_copyfile_download
/* Basis-Definitionen für SVG Icons, um sie besser neben Text zu positionieren. */
.svg-icon {
  display: inline-block;  /* Icon neben Text positionieren. */
  fill: currentColor;     /* Icon nimmt Textfarbe an. */
  height: 1em;            /* Höhe basiert auf Schriftgröße. */
  overflow: hidden;
  vertical-align: -.15em; /* Variabler Wert, damit das Icon besser zum Text ausgerichtet wird. */
  width: 1em;             /* Breite basiert auf Schriftgröße. */
}
icons.html
content_copyfile_download
<svg class="svg-icon">
  <use xlink:href="icon-sprite.svg#mein-icon"></use>
</svg>