Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Wie kann man browserübergreifende SVG-Sprites implementieren?

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

In diesem Tutorial werde ich eine grundlegende Implementierung einiger SVG-Symbole demonstrieren, wie man einen Fallback bereitstellt und wie man sie in ein SVG-Sprite verwandelt.

Grundlegende SVG-Implementierung

Für dieses Tutorial verwende ich eine einzelne Seite, die als eine Art Online-Visitenkarte fungiert. Es wird mich kurz vorstellen und drei für meine Arbeit relevante Netzwerkprofile anzeigen.

Nachteile von flaticon

Auf dem Screenshot oben können Sie sehen, dass ich Symbole (für Twitter, Dribbble und GitHub) verwende, um symbolisch auf meine Netzwerkprofile zu verweisen. Ich habe diese Symbole von flaticon heruntergeladen, das eine Vielzahl von Symbolen und Symbolen sowohl im Vektor- als auch im Rasterformat enthält.

PNG und SVG

Wir werden zunächst die PNG-Versionen dieser Symbole verwenden, um die Abwärtskompatibilität zu gewährleisten. Anschließend bereiten wir die SVG-Versionen für die Verwendung in unterstützenden Browsern vor.

Ich habe Sketch verwendet, um meine PNG-Symbole auszugeben. Daher werde ich es erneut verwenden, um meine Symbole für die SVG-Verwendung vorzubereiten.

My chosen icons in Sketch with named layers groups

Wenn Sie sich den Screenshot oben ansehen, werden Sie feststellen, dass ich alle meine Gruppen und Formen im linken Bereich entsprechend benannt habe (Adobe Illustrator hat eine ähnliche Ansicht im Ebenenbedienfeld). Es ist wichtig, alle Ihre Assets korrekt zu benennen, damit Sie nicht nur organisiert bleiben, sondern auch, wofür wir sie später in diesem Tutorial verwenden werden.

SVGs exportieren

Jetzt exportiere ich die Symbole als SVGs, was mit dem Slicing-Werkzeug in Sketch unkompliziert ist. Weitere Informationen dazu finden Sie unter Verständnis zu den Exportoptionen von Sketch. Ich exportiere sie als separate Dateien und lege sie in das Bilderverzeichnis meines Projekts.

Um ein Bild auf Ihrer Website anzuzeigen, verweisen Sie normalerweise auf das Asset mit einem src-Attribut oder einem ähnlichen Element:

Bei SVGs gibt es jedoch verschiedene Möglichkeiten, sie in einem HTML-Dokument zu verwenden. Zum Beispiel können wir den tatsächlichen SVG-Code inline verwenden - so könnte dieser Code aussehen:

Bei SVGs gibt es jedoch verschiedene Möglichkeiten, sie in einem HTML-Dokument zu verwenden. Zum Beispiel können wir den tatsächlichen SVG-Code inline verwenden - so könnte dieser Code aussehen:

Hinzufügen von SVG Inline zum HTML

Beginnen wir mit der Basis-HTML-Seite, die die PNG-Symbole mit ihren Ankern und einem Container enthält:

Jetzt kopiere ich den SVG-Code und füge ihn ein. Ich ignoriere jedoch die oberste Zeile, die sich auf die Zeichencodierung der Datei und andere Dateiattributdetails bezieht. Das HTML-Dokument enthält diese Informationen bereits, sodass wir sie nicht duplizieren müssen.

Ich habe das SVG direkt über dem entsprechenden PNG-Symbol auf der HTML-Seite platziert. Vorerst werde ich die reguläre PNG-Bildzeile in ein Kommentar-Tag einschließen, damit sie nicht neben der SVG-Version angezeigt wird.

Reiniger SVG

Ich werde auch den Code in meiner SVG bereinigen. Das Entfernen der Elementattribute ist optional, da die meisten Teile, die ich entferne, nichts an der Funktionsweise der SVG ändern. Hier ist ein Vorher und Nachher, wenn Sie dasselbe mit Ihrem tun möchten:

Beachten Sie die Elemente, die ich entfernt habe. Die <title>, <desc>, and <defs> Elemente werden jetzt nicht benötigt, aber wir werden sie möglicherweise später in diesem Tutorial benötigen. Es gibt auch einige <g>-Elemente, die sich auf Gruppen beziehen und den in meinem Skizzendokument erstellten Gruppen entsprechen. Standardmäßig platziert Sketch alles auf einer Seite, daher das Gruppenelement <g id=”Page-1”…. Sie können dies entfernen, da es für uns keine Verwendung hat (die Gruppe darin ist wichtiger). Sketch bietet zwar die Möglichkeit, beim Export sauberere SVGs zu erstellen. Es schadet jedoch nicht, den Code selbst zu bereinigen.

Der letzte Teil dieses Schritts besteht darin, die Attribute für Höhe und Breite im SVG-Element selbst zu entfernen. Diese müssen in meiner CSS-Datei wie unten gezeigt kompensiert werden:

Wenn Sie meine Schritte befolgt haben, sollten Sie im Browser eine scharfe und saubere Vektorversion Ihrer Grafiken sehen können.

Tipp: Überprüfen Sie, ob die Grafik tatsächlich eine SVG-Datei ist, indem Sie Command-+ zoomen, wenn Sie sie im Browser anzeigen. Die Grafik sollte scharf bleiben, egal wie weit Sie hineinzoomen.

Bereitstellung eines Fallbacks

Wenn Sie dies für die Client-Arbeit verwenden, fragen Sie sich möglicherweise, wie die Browserunterstützung aussieht. Inline-SVGs funktionieren in allen Browsern mit Ausnahme von Internet Explorer 8 (und früheren Versionen) und Opera Mini. Kann ich derzeit sagen, dass IE8 weltweit zu rund 4% und Opera Mini zu rund 3% verwendet wird. In Ihrem Fall müssen Sie möglicherweise keinen Fallback bereitstellen, ich werde jedoch eine Lösung demonstrieren.

Hier ist eines meiner SVG-Symbole auf der Seite. Sie werden feststellen, dass mein ursprüngliches PNG-Symbol noch vorhanden ist, aber in Kommentare eingeschlossen ist. Dieses PNG-Bild wird unser Fallback sein.

Kommentare entfernen

Zuerst entferne ich die Kommentare. Wir müssen jetzt das <img> nach oben und in das <svg>-Element selbst verschieben, direkt nach der Gruppe, die unser eigentliches Symbol enthält.

Als Nächstes werde ich das <img> in ein SVG-spezifisches Element mit dem Namen ForeignObject einschließen. Wenn der Browser die Vektorinformationen der SVG nicht verstehen kann, verweist er stattdessen auf das "foreign object" und verwendet das <img> darin enthaltene . Wir müssen dem Browser auch mitteilen, dass er sich für die Vektorversion entscheiden sollte, wenn er diese unterstützt. Dafür ist das <switch>-Element gedacht, in das ich sowohl die Gruppe als auch das ForeignObject eingewickelt habe.

Hier ist das aktualisierte Markup:

Wenn Sie diesen Prozess befolgt und Ihren HTML-Code wie meinen strukturiert haben, sollte Ihre Grafik auf Ihr ursprüngliches Rasterbild zurückgreifen, wenn der Browser SVG nicht unterstützt.

Erstellen eines SVG-Sprites

SVG-Sprites verhalten sich ziemlich genau wie Bild-Sprites. In ihrer einfachsten Form sind Sprites eine Sammlung grafischer Elemente, die zu einem Bild zusammengefasst sind. SVG-Sprites haben sich sicher gemacht wie Bild-Sprites. In ihrer einfachsten Form sind Sprites eine Sammlung grafischer Elemente, die zu einem Bild gehören sind.

Die beiden Hauptvorteile sind eine verbesserte Ladezeit der Seite, ein besserer Arbeitsablauf vund eine bessere Konsistenz zwischen den grafischen Elementen auf der Seite. Der zweite und dritte Punkt gelten sehr gut für SVG-Sprites. Anstelle mehrerer Blöcke mit SVG-Code auf unserer Seite hätten wir nur einen Ort, an dem wir unsere SVGs aktualisieren könnten.

Zunächst erstelle ich kurz vor dem schließenden Tag ein neues <svg>-Element im <head>-Element meiner Seite. Diese neue SVG enthält alle Symbole, die ich zuvor auf der Seite hatte.

Als nächstes muss ich meine Symbole hinein verschieben. Ich muss nicht die gesamte SVG verschieben, sondern nur das Gruppenelement und seinen Inhalt. Diese kann ich innerhalb des <svg>-Elements im Kopf stapeln.

Hinweis: Wenn Sie mit Grunt vertraut sind, gibt es ein Plugin, das das Kombinieren aller Ihrer separaten SVG-Dateien automatisiert.

Ausblenden!

Jetzt haben wir alle unsere Symbole im Kopf, die wir brauchen, um sie zu verstecken. Wenn Sie dem neuen <svg> ein Attribut von display=”none” hinzufügen, werden nicht alle Symbole oben auf der Seite angezeigt.

Jedes Symbol definieren

Unser nächster Schritt besteht darin, jedes Symbol zu definieren, damit wir es auf der Seite wiederverwenden können. Hier kommt das zuvor gelöschte defs-Element wieder ins Spiel. Indem ich es zum Umschließen aller Gruppen und damit zum Umschließen aller meiner Symbole verwende, kann ich angeben, dass ich diese an anderer Stelle auf der Seite wiederverwenden möchte.

Verwenden der Symbole

Die Symbole sind jetzt definiert, aber wir benötigen eine Methode, um sie zu verwenden, wofür das use-Element ist. Mit dem use-Element können wir jedes Element innerhalb des <defs>-Elements übernehmen und an eine beliebige Stelle auf unserer Seite ziehen. Wir wählen das Element anhand seiner ID aus. Daher war es wichtig, unsere Symbole im ursprünglichen Skizzendokument zu benennen.

Beachten Sie die IDs im obigen Beispiel und sehen Sie dann, wie ich sie mit dem use-Element wie folgt verweise:<use xlink:href="#twitter-icon"></use>.

Wenn Sie die Schritte korrekt ausgeführt haben, werden Sie keine Änderungen an der Darstellung Ihrer Grafiken feststellen. Sie können sie jedoch jetzt wiederverwenden (in der gewünschten Größe) und jeweils mehrmals auf der Seite anwenden.

Perfektionieren Sie Ihr SVG Sprite

Ein Pluspunkt bei der Verwendung von SVG-Sprites ist, dass Ihr sichtbarer Seitencode viel sauberer ist und von anderen Personen, die mit Ihrem Code arbeiten, leichter gelesen werden kann. Wir können das noch weiter verbessern.

Unten habe ich die <g>-Elemente in meinem SVG-Sprite in das symbol-Element geändert und das viewbox-Attribut von den SVG-Elementen auf der Seite in die neuen Symbolelemente verschoben.

Die Verwendung von <symbol> ist zumindest in meinem Beispiel nicht nur semantischer, sondern erspart uns auch das Wiederholen des viewbox-Attributs zusammen mit unseren Elementen <svg> und <use>. Wir können die zuvor entfernten title- und <desc>-Elemente zurückbringen und sie verwenden, um die Zugänglichkeit unserer Symbole zu verbessern.

Hinweis: Beachten Sie, dass der Inhalt der <desc>-Elemente in IE7 standardmäßig angezeigt wird.

Durch Ändern des Gruppenelements in ein Symbol konnten wir alle diese Verbesserungen vornehmen. Wir können das <defs>-Element auch aus dem SVG-Sprite entfernen, wodurch unser Code noch sauberer wird.

Schlussfolgerung

Und da haben Sie es, was als bloße rasterbasierte Symbole begann, ist jetzt zu äußerst leistungsstarken vektorbasierten Symbolen geworden, die problemlos wiederverwendet und in der Größe geändert werden können. Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie haben Spaß daran, in Ihrem nächsten Projekt mit SVGs zu spielen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.