© Liashko/Shutterstock.com
Entwickler Magazin
Ein Social-Icons-Menü mit SVGs in WordPress umsetzen

SVG FTW

Viele Websites zeigen - mal mehr und mal weniger prominent - ein Menü mit Icons zu verschiedenen Social-Media-Kanälen. Wenn Sie eine Website haben, gehören Sie vielleicht dazu. Häufig wird zur technischen Umsetzung für eine solche Liste noch zu einem Iconfont gegriffen, obwohl es mit SVGs eine bessere Lösung gibt. Wie Sie die in Ihre WordPress-Website implementieren können, zeige ich in diesem Artikel.

Florian Brinkmann


Zunächst beschäftigen wir uns kurz mit den Vor- und Nachteilen der jeweiligen Technik (Kasten: „Iconfonts“ und „SVGs“). Die Punkte sind aus dem Artikel „Inline SVG vs Icon Fonts [CAGEMATCH]“ von Chris Coyier [1].Mit dem Update auf iOS 9.1 scheinen Unicode-Änderungen vorgenommen worden zu sein, mit denen der Iconfont auf www.espn.go.com nicht zurechtgekommen ist (Abb. 1). Sie sehen also: SVGs sollten die erste Wahl sein, wenn es darum geht, Icons anzuzeigen.

Abb. 1: Unicode-Änderungen führen schnell zu Problemen (Screen­shot: Jason Grigsby [3])

SVGsVorteileImmer scharf.Viele Stylingmöglichkeiten, wenn als Inline SVG eingebunden (mehrfarbige Icons …).Weniger Probleme bei der Positionierung.Semantisch als Bild ausgezeichnet.Bringt theoretisch gleich Funktionen für Barrierefreiheit mit. Hier ist die Unterstützung durch Screenreader aber noch nicht sehr gut.NachteileBrowsersupport: Ab IE9 Inline SVGs; externe Referenzierung einer SVG mit dem use-Element im IE nur mit Polyfill.

IconfontsVorteile Guter Browsersupport (ab IE6)NachteileBrowser behandeln sie als Text. Das kann dazu führen, dass sie nicht ganz scharf dargestellt werden.Eingeschränkte Stylingmöglichkeiten.Viele Faktoren, die auf Positionierung einwirken (line-height, letter-spacing, et cetera), was die Positionierung nicht ganz einfach macht.Semantisch fragwürdig, eine Schrift zur Darstellung von Bildern zu verwenden.Anzeige kann aus verschiedenen Gründen fehlschlagen (beispielsweise, wenn der Nutzer einen eigenen Font eingestellt hat, der den Iconfont überschreibt). Ein paar Beispiele aus der Praxis gibt es im Artikel „Seriously, Don’t Use Icon Fonts“ von Tyler Sticka [2], in dem ich auch den unten gezeigten Fall gefunden habe.

Vorbereitung der Icons

Bevor wir uns ansehen, wie das Ganze in WordPress eingebunden wird, müssen wir uns zunächst überlegen, wie wir die SVGs einsetzen möchten. Da wir nicht auf das Caching verzichten wollen, bietet es sich an, eine externe SVG-Datei einzubinden, die alle Icons enthält – ein SVG Sprite. Dafür muss eine SVG-Datei nach dem in Listing 1 gezeigten Schema angelegt werden.

Listing 1  

Innerhalb des svg-Elements stehen symbol-Elemente, wobei jedes davon ein Icon repräsentiert. Über die ID kann ein Icon später einfach eingebunden...

Entwickler Magazin
Ein Social-Icons-Menü mit SVGs in WordPress umsetzen

SVG FTW

Viele Websites zeigen - mal mehr und mal weniger prominent - ein Menü mit Icons zu verschiedenen Social-Media-Kanälen. Wenn Sie eine Website haben, gehören Sie vielleicht dazu. Häufig wird zur technischen Umsetzung für eine solche Liste noch zu einem Iconfont gegriffen, obwohl es mit SVGs eine bessere Lösung gibt. Wie Sie die in Ihre WordPress-Website implementieren können, zeige ich in diesem Artikel.

Florian Brinkmann


Zunächst beschäftigen wir uns kurz mit den Vor- und Nachteilen der jeweiligen Technik (Kasten: „Iconfonts“ und „SVGs“). Die Punkte sind aus dem Artikel „Inline SVG vs Icon Fonts [CAGEMATCH]“ von Chris Coyier [1].Mit dem Update auf iOS 9.1 scheinen Unicode-Änderungen vorgenommen worden zu sein, mit denen der Iconfont auf www.espn.go.com nicht zurechtgekommen ist (Abb. 1). Sie sehen also: SVGs sollten die erste Wahl sein, wenn es darum geht, Icons anzuzeigen.

Abb. 1: Unicode-Änderungen führen schnell zu Problemen (Screen­shot: Jason Grigsby [3])

SVGsVorteileImmer scharf.Viele Stylingmöglichkeiten, wenn als Inline SVG eingebunden (mehrfarbige Icons …).Weniger Probleme bei der Positionierung.Semantisch als Bild ausgezeichnet.Bringt theoretisch gleich Funktionen für Barrierefreiheit mit. Hier ist die Unterstützung durch Screenreader aber noch nicht sehr gut.NachteileBrowsersupport: Ab IE9 Inline SVGs; externe Referenzierung einer SVG mit dem use-Element im IE nur mit Polyfill.

IconfontsVorteile Guter Browsersupport (ab IE6)NachteileBrowser behandeln sie als Text. Das kann dazu führen, dass sie nicht ganz scharf dargestellt werden.Eingeschränkte Stylingmöglichkeiten.Viele Faktoren, die auf Positionierung einwirken (line-height, letter-spacing, et cetera), was die Positionierung nicht ganz einfach macht.Semantisch fragwürdig, eine Schrift zur Darstellung von Bildern zu verwenden.Anzeige kann aus verschiedenen Gründen fehlschlagen (beispielsweise, wenn der Nutzer einen eigenen Font eingestellt hat, der den Iconfont überschreibt). Ein paar Beispiele aus der Praxis gibt es im Artikel „Seriously, Don’t Use Icon Fonts“ von Tyler Sticka [2], in dem ich auch den unten gezeigten Fall gefunden habe.

Vorbereitung der Icons

Bevor wir uns ansehen, wie das Ganze in WordPress eingebunden wird, müssen wir uns zunächst überlegen, wie wir die SVGs einsetzen möchten. Da wir nicht auf das Caching verzichten wollen, bietet es sich an, eine externe SVG-Datei einzubinden, die alle Icons enthält – ein SVG Sprite. Dafür muss eine SVG-Datei nach dem in Listing 1 gezeigten Schema angelegt werden.

Listing 1  

Innerhalb des svg-Elements stehen symbol-Elemente, wobei jedes davon ein Icon repräsentiert. Über die ID kann ein Icon später einfach eingebunden...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang