html SVG Sprite erstellen

Posted 2021-05-11

# 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:

```html
<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 <use>-Tag auf das Symbol verwiesen.

```html
<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

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-burger" viewBox="0 0 89 56.7">
        <title>Menu</title>
        <path d="M0 8.8C0 7.8.8 7 1.8 7h36.4c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8H1.8c-1 0-1.8-.8-1.8-1.8zm1.8 13h36.4c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8H1.8C.8 18.2 0 19 0 20s.8 1.8 1.8 1.8zm0 11.2h36.4c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8H1.8c-1 0-1.8.8-1.8 1.8S.8 33 1.8 33z"></path>
    </symbol>
</svg>

/* 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. */
}

<svg class="svg-icon">
  <use xlink:href="icon-sprite.svg#mein-icon"></use>
</svg>