So erstellen und verwalten Sie SVG Sprites

SVG gewinnt das Rennen, wenn es um Grafiken im Web geht. Designer und Entwickler wählen SVG anstelle von Symbolschriften, Rasterbildern und Raster-Sprites.

Die Vorteile von SVG sind zahlreich, aber für mich kommt es auf Skalierbarkeit an.

Die Verwendung von SVG kann so einfach sein wie das Kopieren und Einfügen des exportierten Codes aus einem vektorbasierten Programm. Von da an liegt das Problem darin, diese Grafiken auf die effizienteste Art zu liefern.

Gib SVG-Sprites ein. Diese funktionieren in einem ähnlichen Muster wie Bild-Sprites, aber wie sie erstellt und auf einer Webseite eingefügt werden, ist sehr unterschiedlich.

Warum Sprites überhaupt benutzen?

Sprites erhöhen die Geschwindigkeit, sorgen für einen konsistenten Entwicklungsworkflow und beschleunigen die Erstellung von Symbolen erheblich. SVG-Sprites werden normalerweise mit Symbolen ähnlicher Form oder Form erstellt, während Grafiken mit größerem Maßstab einmalige Anwendungen sind.

In vielen Fällen wird eine Symbolbibliothek skaliert. Das Hinzufügen neuer Symbole muss effizient und letztendlich einfach sein. SVG-Sprites helfen dabei, dies zu verwirklichen.

Exportieren von SVG-Code

SVGs können aus Ihrem Lieblings-Vektor-Grafikprogramm exportiert werden. Ich neige dazu, eine Mischung aus Werkzeugen zu verwenden und habe festgestellt, dass alle von ihnen eine großartige Unterstützung für den Export von SVGs haben. Skizzieren sticht besonders hervor, weil Sie ein Symbol oder eine Grafik auswählen und den Befehl + c drücken können und den SVG-Code in Ihre Zwischenablage kopieren lassen. Dann können Sie zu Ihrem Code-Editor gehen, den Code einfügen und die Grafik im Browser vor Ihren Augen erscheinen lassen.

SVG für Web optimieren

Leider könnten Sie beim Kopieren und Einfügen von Sketch feststellen, dass der Code suboptimal ist und besser optimiert werden könnte. Dafür gibt es einige Tools.

Wenn Sie insbesondere Sketch verwenden, überprüfen Sie die SVGO Compressor Plugin . Wenn Sie SVGs exportieren, optimiert das Plugin diese automatisch, bevor die Datei gespeichert wird.

Wenn Sie Sketch nicht verwenden, überprüfen Sie die gleiche Funktionalität in App-Formular oder wenn Sie Web-Apps bevorzugen, Jake Archibald stelle einen für dich zusammen .

SVG Sprites manuell erstellen

Das Erstellen eines SVG-Sprites kann manuell erfolgen. Sie benötigen ein Vektor-Design-Programm, das SVG-Code generieren kann. Dazu benutze ich Sketch und exportiere ein paar Icons als SVG.

Nachdem ich die Icons exportiert und durch das SVGO Compressor Plugin laufen habe, bleibt für jedes Icon folgendes übrig. Beachten Sie, dass zu diesem Zeitpunkt jedes Symbol eine separate Datei ist:

Jetzt, da alle SVGs optimiert sind, können wir mit dem obigen Code beginnen, das Sprite zu erstellen. Um ein Sprite zu erstellen, beginne mit der Umgebung

Beachten Sie, dass das SVG einen Inline- Anzeigestil aufweist: Keine . Dies ist erforderlich, um SVG-Sprites ordnungsgemäß zu verwenden. Auch wenn die Symbole auf der Seite nicht viel Platz bieten werden. Um diesen zusätzlichen Platz zu vermeiden, den das SVG erzeugt, verstecken wir das SVG mit CSS.

Einfach den Code aus den Icons einzufügen reicht an dieser Stelle nicht aus. Wir müssen Gebrauch machen von Element, mit dem Sie den SVG-Code einbetten und ein eigenes spezifisches viewBox- Attribut bereitstellen können , das für Symbole mit unterschiedlichen Breiten und Höhen wichtig ist.

Elemente innerhalb der Das Element kann nur an den Browser gerendert werden, wenn es von der Referenznummer referenziert wird Element.

Der letzte Sprite ähnelt dem folgenden Codeausschnitt:

Beachten Sie, wie ich jedem Symbolelement ID- Attribute hinzugefügt habe. Dies ist wichtig, denn wenn Sie auf ein bestimmtes Symbol im Sprite verweisen, benötigen Sie eine einzigartige Möglichkeit, es zu targetieren. Beachten Sie auch, wie jedes Symbol eigene eindeutige viewBox- Parameter hat. Die ersten beiden Parameter sind fast immer "0 0"; Die zweiten beiden Werte entsprechen der Größe des Symbols, das Sie exportiert haben.

Ein Symbol auf der Seite einfügen

Mit dem Sprite, das bereit ist zu gehen, brauchen wir eine Möglichkeit, bestimmte Icons auf einer Seite einzubinden. Um dies zu tun, werden Sie die Element wie folgt geschrieben:

Auf Ihrer Seite sollten Sie das Symbol sehen und das ist wirklich alles, was dazu gehört!

Automatisierung von SVG Sprites

Das Erstellen von Inline-SVG-Sprites ist gar nicht so schwer. Das Problem liegt in der Tatsache, dass viele Entwickler Sprites für Hunderte von Icons oder mehr für robuste Anwendungen erstellen müssen. So etwas per Hand zu erstellen, könnte zeitaufwändig und mühsam werden. Entwickler benötigen eine Möglichkeit, den Prozess zu automatisieren, sodass sie keine Zeit verschwenden, Sprites manuell zu erstellen.

Zum Glück gibt es Werkzeuge für so etwas. Task-Manager wie Grunzen oder Schluck Plugins verfügbar zu verwenden. Diese rationalisieren die Erstellung der SVG-Sprites. Durch die Bereitstellung jeder SVG-Datei in einem bestimmten Verzeichnis optimiert und generiert das Plugin alle SVGs in Ihrem referenzierten Verzeichnis, die in einem neuen Sprite enthalten sein sollen.

Wenn Sie dem Sprite weitere Symbole hinzufügen müssen, exportieren Sie das Symbol einfach als SVG und fügen Sie es zum selben Ordner hinzu. Von dort übernimmt das Plugin den zeitaufwendigen Teil.

Einige verfügbare Plugins in verschiedenen Varianten: Grunt-Svgstore , Schluck-Svg-Sprites , Svg-Sprite .

Fazit

Wie bei allen Dingen in der Webentwicklung gibt es mehr als eine Möglichkeit, SVG-Sprites zu erstellen. Sie können sie extern referenzieren, schließe sie über CSS ein und sie sogar machen ansprechend .