Die vollständige Anleitung zu SVG

Seite 6 von 6: Die Kraft der Sprites

Die Kraft der Sprites

Mit SVG können wir Symbole in einem Dateiformat erstellen, das von der Auflösung unabhängig ist. Das ist großartig. Aufgrund der Einschränkungen des HTTP-Protokolls möchten wir jedoch nicht für jedes Symbol auf unserer Website eine weitere Dateianforderung stellen. Dies wird sich bald mit dem HTTP / 2-Protokoll ändern.

Die besten Leute, denen man auf Tumblr folgen kann

Um zu vermeiden, dass für jedes Symbol eine separate Anfrage gestellt werden muss, können wir zu unserem alten Freund, dem Sprite, zurückkehren, außer diesmal in SVG. Um ein Sprite in SVG zu erstellen, verwenden wir das Tag und wenden Sie eine ID für die spätere Referenzierung und die viewBox Attribut zum Definieren der Canvas-Größe. Innerhalb des Symbolsymbols erstellen wir unsere Formen, den Text und alle anderen Elemente, aus denen unser Symbol besteht.



Innerhalb des Symbol-Tags können wir auch zusätzliche Elemente für die Barrierefreiheit hinzufügen, z und Stichworte. Wir erstellen unsere Symbole in einem Tag, um sie für die spätere Verwendung zu definieren und sicherzustellen, dass sie nicht auf der Seite ausgegeben werden.



Es gibt verschiedene Möglichkeiten, wie Sie Sprites in SVG erstellen können. Sie können mit Vektorsoftware wie Adobe erstellt werden Illustrator CC oder Skizze - indem Sie einfach die Symbole auf eine Zeichenfläche legen und die Datei als SVG exportieren. Der von ihnen erzeugte Code muss jedoch bearbeitet werden, um als Symbolsystem verwendet zu werden. Eine andere Möglichkeit besteht darin, ein Symbolsystem manuell zu erstellen. Dies ist nicht allzu schwierig und Sie haben die vollständige Kontrolle über das Markup. SVG-Sprites können auch in Build-Systeme wie gulp oder grunt integriert werden. Dabei wählen Sie einen Ordner mit SVG-Dateien aus und konfigurieren den Build für die Ausgabe eines einzelnen SVG-Sprites.

Sobald wir unser SVG-Sprite erstellt oder generiert haben, gibt es verschiedene Möglichkeiten, es zu verwenden. Wir könnten den Inhalt der Datei kopieren und oben auf unserer Seite platzieren - dies wird als Inlining bezeichnet. Alternativ, wenn wir PHP verwenden, könnten wir die verwenden file_get_contents () Funktion zum globalen Einschließen der Datei. Der einzige Nachteil ist, dass die Datei nicht zwischengespeichert wird, da sie vom Browser als Code und nicht als Bild behandelt wird.



So erstellen Sie ein SVG-Sprite

01. Erstellen Sie das Framework

In diesem Tutorial platzieren wir das SVG im Hauptteil der Website, aber wir werden sehen, wie es funktioniert, wenn die Datei extern verwendet wird. Der Basiscode erfordert ein SVG-Tag und das leere Etikett.

wie man im Kino modelliert 4d

02. Erstellen Sie unser Symbol

In der Tag Wir erstellen unser erstes Symbol mit dem Symbol-Tag. Wir müssen dem Symbol die ID und geben viewBox Attribute. Im Inneren werden wir einen Titel und Formen für unser Symbol bereitstellen.

Facebook

03. Wiederholen

Jetzt haben wir unser erstes Symbol erstellt. Das Gleiche tun wir für den Rest. Stellen Sie sicher, dass Sie eine eindeutige ID angeben und die angeben viewBox Attribut.



... ...

04. Verwenden Sie das Symbol

Jetzt haben wir alle unsere Symbole definiert. Wir können sie herausziehen und auf der Seite verwenden, wo immer wir sie benötigen.

Um das Sprite als externe Datei zu verwenden, müssen wir das use-Element aktualisieren, um auf die Datei und dann auf die ID zu verweisen.

05. Klassennamen

Wir können den vorherigen Schritt wiederholen, um alle unsere Symbole auszugeben. Wenn wir eine einwickeln Markieren Sie das Symbol und fügen Sie Klassen zu beiden hinzu und Wir können unsere Symbole mit CSS gestalten.

06. Das CSS

Jetzt haben wir unsere Symbole und sie haben individuelle Klassennamen. Wir können jedem unserer Symbole unterschiedliche Füllfarben zuweisen.

.icon--facebook { fill: #3b5998; } .icon--twitter { fill: #1da1f2; } .icon--linkedin { fill: #0077b5; }

Dieser Artikel wurde ursprünglich in Ausgabe 267 des Web Designer Magazins veröffentlicht. Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel:

Aktuelle Seite: Die Kraft der Sprites

Importieren Sie Illustrator-Ebenen in After Effects
Vorherige Seite Fügen Sie der SVG eine Animation hinzu