SVG ist ein XML-basiertes Vektorbild, das häufig von Websites und Marken verwendet wird, um Logos und Symbole auf ihren Websites anzuzeigen. Der Hauptgrund, warum sie bei Entwicklern und Designern besonders beliebt sind, ist, dass sie ein skalierbares Bildformat sind, im Allgemeinen kleiner in der Dateigröße (manchmal um einiges) und nicht auf Retina-Bildschirmen pixeln. WordPress erlaubt es dir jedoch standardmäßig nicht, das SVG-Dateiformat hochzuladen, hauptsächlich aus Sicherheitsgründen. Heute werden wir dir einen Weg zeigen, um die WordPress SVG-Unterstützung sicher zu aktivieren, die Browserunterstützung zu diskutieren, sowie einige Vorbehalte, wenn du dich entscheidest, zum Vektorbildformat zu wechseln.

Hoffentlich werden wir eines Tages SVG als Teil des WordPress-Cores haben, aber derzeit sind wir noch nicht so weit.

Was ist ein SVG?

Laut Wikipedia ist ein SVG (scalable vector graphics) ein XML-basiertes Vektorbildformat für zweidimensionale Grafiken mit Unterstützung für Interaktivität und Animation. Du kannst sie sogar mit Code oder deinem Texteditor manipulieren. Die SVG-Spezifikation ist ein offener Standard, der seit 1999 vom World Wide Web Consortium entwickelt wurde. SVGs werden derzeit nur von 3,4% aller Websites genutzt, aber wie Sie unten sehen können, steigt die Akzeptanzrate schnell an. Beliebte Websites wie Google, Reddit, Dropbox, ESPN und sogar unsere eigene Website hier bei Kinsta verwenden SVGs.

SVG-Nutzungsstatistik

SVG-Nutzungsstatistik April 2016 – April 2017

SVG Browser Unterstützung

SVGs werden derzeit von allen gängigen Browsern und mobilen Browsern unterstützt. Das einzige Problem, auf das du stoßen könntest, ist, wenn du noch Unterstützung für den IE8 brauchst, wobei wir hoffen, dass du es nicht brauchst. IE8 hat nur noch einen Marktanteil von rund 0,36% und wird nicht mehr unterstützt. Hier ist ein großartiger Artikel von Lubos darüber, warum Entwickler die Unterstützung von IE8, IE9 und IE10 einstellen sollten. Aus betriebswirtschaftlicher Sicht ist dies vielleicht nicht immer möglich, aber er bringt einige gute Punkte zur Sprache. Wenn du aus irgendeinem verzweifelten Grund immer noch IE8-Unterstützung brauchst, kannst du ein Fallback-Image (PNG oder JPG) für deine SVGs definieren, aber wir werden heute nicht darauf eingehen. Nachfolgend findest du eine Liste der unterstützten Browser:

svg Browserunterstützung

SVG Browserunterstützung

Vorteile von SVGs

SVGs sind ein Vektorformat, d.h. sie sind sowohl in Browsern als auch in Bildbearbeitungswerkzeugen automatisch skalierbar. Das macht sie sowohl für Grafik- als auch für Webdesigner interessant. Normalerweise, wenn du versuchst, ein PNG oder JPG in einem Tool wie Photoshop, Sketch oder Paint zu bearbeiten, kannst du sie nicht ohne Pixelung hochskalieren. Mit SVGs kannst du sie auf unendlich viele hochskalieren und sie sehen jedes Mal pixelgenau aus (oder sollten wir sagen vektorgenau). Aus diesem Grund sind sie ein hervorragendes Bildformat für Retina-Bildschirme.

Google indiziert SVGs, was eine gute Nachricht für SEO-Zwecke ist. SVG-Inhalte, die mit einer Datei selbst verlinkt sind, werden indiziert und in der Google-Bildsuche angezeigt. Bei den SVG-Illustrationen, die wir auf der Kinsta verwenden, kannst du dies durch eine erweiterte Bildsuche aus erster Hand sehen. Hinweis: Inline-SVGs, oder besser gesagt solche, die nur aus Code bestehen, werden in der Regel nicht indiziert.

SVGs sind traditionell (nicht immer) kleiner in der Dateigröße als PNGs oder JPGs. Durch die Verwendung von SVGs kannst du deine WordPress-Seite tatsächlich beschleunigen, da du deine gesamte Seitengröße verringern wirst. Genki hat einen großartigen Artikel geschrieben, in dem er die Größe von SVG vs. PNG vs. JPEG vergleicht und hier ist unser JPG vs. JPEG Vergleich. Nachfolgend findest du ein paar Beispiele aus seinem Test, in denen er die drei verschiedenen Bildtypen verglichen hat.

JPG (optimierte Größe: 81.4 KB)

JPG bild

JPG Bild

PNG (optimierte Größe: 85.1 KB)

PNG bild

PNG Bild

SVG (optimierte Größe: 6.1 KB)

SVG bild

SVG Bild

Wie du oben sehen kannst, ist die SVG eine Verringerung der Dateigröße um 92,51% im Vergleich zum JPG. Und im Vergleich zum PNG, 92,83%. Das sind ziemlich beeindruckende Unterschiede in der Dateigröße. Es gibt jedoch einen Vorbehalt, da er detailliertere Bilder getestet hat, wurden die SVGs schließlich tatsächlich größer als das JPG oder PNG.

Deshalb verwenden viele Websites SVGs für weniger detaillierte Bilder wie Logos, Symbole usw., da sie eine deutliche Verringerung der Dateigröße feststellen werden. Aber für weitere Bilder mit vielen Details, wie z.B. Ihren Blogbeitrag „Featured Images“, empfiehlt es sich, bei einem PNG oder JPG zu bleiben, aber du kannst sie trotzdem optimieren. Viele Websites verwenden einen hybriden Ansatz und verwenden beide Dateitypen zusammen, wo es sinnvoll ist.

Außerdem ist es wichtig zu beachten, dass Social Media-Netzwerke wie Facebook und Twitter keine SVGs für die Freigabe unterstützen. Wenn du also SVGs für deine Featured Images benutzt hast, musst du die Yoast SEO Funktion nutzen und ein PNG oder JPG für die OG und Meta Tags hochladen.

Warum SVG-Sicherheit wichtig ist

Der Grund dafür, dass SVG noch nicht Teil des WordPress-Cores ist, ist, dass es Sicherheitsbedenken gibt, die es zu lösen gilt. Du kannst die aktive Diskussion über SVGs im WordPress Core (#24251) verfolgen, die bereits 2013 begonnen wurde.  SVG ist eine XML-Datei, die sie selbst für verschiedene Schwachstellen öffnet, von denen normale Bildformate nicht betroffen sind. Dazu gehören XML-Angriffe auf externe Entitäten (XXE), verschachtelte Entitäten und XSS-Angriffe.

Mario Heiderich veröffentlichte einen aufschlussreichen Vortrag über die Sicherheitsrisiken durch aktive Inhaltsinjektion mit SVG-Dateien. Ein Beispiel dafür war, dass JavaScript in eine SVG eingebettet war und es tatsächlich gelang, Mario über Skype anzurufen. Das ist irgendwie beängstigend! SecuPress, die Autoren eines WordPress-Sicherheitsplugins, sprachen auch das Thema Vorsicht beim Hinzufügen von SVGs zu WordPress an und die Wichtigkeit, es richtig zu machen.

Viele SVG-Plugins im Repository verwenden den folgenden Code, der es dem MIME-Typ einfach ermöglicht, SVGs in die WordPress-Medienbibliothek hochzuladen. Dies ist nicht der sichere Weg, um dies zu tun! Also lade nicht einfach das erste kostenlose SVG-Plugin herunter oder kopiere nicht den Code und füge ihn ein und denke dass es schon gut geht.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Die Lösung besteht darin, dass SVGs „desinfiziert“ werden müssen. Desinfektion ist im Grunde genommen die Reinigung von Code oder Eingaben, um Sicherheitsprobleme (wie z.B. Codeinjektion), Codekonflikte und Fehler zu vermeiden. Dies könnte Dinge wie die Kodierung von Daten, das Filtern und Validieren von Zeichenketten usw. beinhalten. An dieser Stelle kommt die SVG-Sanitizer-Bibliothek von Daryll Doyle ins Spiel, die er als „seinen Versuch, einen anständigen SVG-Desinfektionsapparat in PHP zu bauen“ bezeichnet. Schau dir die Demo seines SVG „Desinfektionsmittels“ an, um es in Aktion zu sehen.

SVG Sanitizer Demo

SVG Sanitizer Demo

Es ist auch wichtig, dass du bedenkst, wer auf deiner Website Zugang zum Hochladen von SVGs hat. Wenn du dich zum Beispiel auf einer Multi-Autor-Website befindest, hast du keine Ahnung, welche Art von SVG jemand anderes hochladen könnte und somit deine Webseite gefährdet. Es ist ratsam, SVG-Uploads auf Administratoren und solche einzuschränken, die einige der Sicherheitsbedenken verstehen.

Wie man WordPress SVG-Unterstützung sicher aktiviert

Daryll hat ein Plugin, WP SVG (auch bekannt als Safe SVG), entwickelt, das die SVG-Sanitizer-Bibliothek verwendet, wenn du SVG-Bilder in deine WordPress-Medienbibliothek hochlädst. Das Plugin ermöglicht es dir auch, SVGs wie normale Bilder in der Medienbibliothek anzuzeigen. Du kannst Safe SVG kostenlos aus dem WordPress-Repository herunterladen oder indem du in deinem WordPress-Dashboard unter „Add New“ Plugins nach ihm suchst. Mit ein paar einfachen Klicks kannst du sofort anfangen.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an
wp-svg

WP SVG plugin

Er hat auch eine Premium-Version, die sich unter wpsvg.com befindet und es dir ermöglicht, bestimmte Benutzer vom Hochladen von SVGs und von zusätzlichen SVG-Optimierungen auszuschließen. In diesem Beispiel unten werden wir einfach die kostenlose Version verwenden.

Bevor du deine SVG hochlädst, ist es wichtig zu verstehen, dass sie sich etwas anders verhalten als Bilder. Wenn du eine SVG aus deinem Fotobearbeitungsprogramm exportierst, solltest du den Text als Kurven exportieren (oder eine Kontur erstellen), da er sonst in verschiedenen Browsern leicht unterschiedlich dargestellt werden kann.

Text als Kurven exportieren

Affinity Designer – Text als Kurven exportieren SVG

Nachdem du das Plugin installiert hast, gibt es keine Einstellungen, es wird deine SVGs beim Hochladen einfach desinfizieren. Auf unserer Testseite unten siehst du, dass wir unser Logo durch eine SVG-Datei ersetzt haben, es ist wie gewohnt in der Medienbibliothek sichtbar.

SVG in der WordPress-Medienbibliothek

SVG in der WordPress-Medienbibliothek

Dies ermöglichte es uns auch, über das Bedienfeld unseres Themes das Logo in unserem WordPress-Header in unsere SVG-Datei zu ändern. Du kannst unten sehen, dass es in der Tat die .svg-Datei bereitstellt. Und sieht jetzt auch auf Retina-Bildschirmenen schön aus.

SVG im WordPress-Header

SVG im WordPress-Header

Es gibt noch einen zusätzlichen Optimierungsschritt, den wir machen mussten. Im IE9-11 skalieren Desktop & Handy SVG-Dateien noch nicht richtig. Das Hinzufügen von Höhe und Breite behebt dieses Problem. Dies kann je nach Theme variieren, aber auf unserer Testseite haben wir einfach unsere header.php-Datei geändert und diese benutzerdefinierten Abmessungen hinzugefügt. Einige WordPress-Themes verwenden CSS, um die Skalierung zu ändern, was aus Performance-Gründen nicht gut ist, aber aus diesem Grund kann es erforderlich sein, dass du zusätzlichen Code hinzufügst, um das IE-Problem zu beheben.

geanderte header.php

Geänderte header.php-Datei für SVG IE Skalierungsproblem

Und das ist es! Du hast nun die WordPress SVG-Unterstützung sicher aktiviert. Dieses Plugin und/oder diese Methode wird nicht von WordPress Core empfohlen oder unterstützt, so dass die Nutzung natürlich auf eigene Gefahr erfolgt. Wenn du jedoch bereits SVGs mit nur dem MIME-Typ-Ausschnitt hochgeladen hast, dann mache es bitte auf jeden Fall so.

Wenn du noch nie SVGs verwendet hast, stelle sicher, dass GZIP auf deinem Server für den Dateityp „image/svg+xml“ aktiviert ist. Dadurch wird sichergestellt, dass sie komprimiert sind und so schnell wie möglich geladen werden. Manchmal aktivieren Sysadmins nur die standardmäßigeren Dateitypen. Hinweis: GZIP ist auf allen Kinsta-Servern aktiviert, die bereits für SVGs eingerichtet sind.

Zusammenfassung

SVGs sind eine großartige Möglichkeit, das Aussehen deiner Website zu verbessern! Wir empfehlen, SVGs, PNGs und JPGs zusammen zu verwenden, um die beste Leistung zu erzielen, da sehr detaillierte Bilder im SVG-Format nicht so gut funktionieren. SVGs sind ideal für dein Logo, um sicherzustellen, dass es auf jedem Bildschirm pixelgenau aussieht, zusammen mit Symbolen. Was sind deine Gedanken? Hast du schon SVGs auf deiner WordPress-Seite verwendet?


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an