Der Hauptgrund, warum SVG-Dateien bei Entwicklern und Designern besonders beliebt sind, ist, dass es sich um ein skalierbares Bildformat handelt, das in der Regel eine kleinere Dateigröße hat (manchmal um einiges) und auf Retina-Bildschirmen nicht verpixelt. WordPress erlaubt es dir jedoch standardmäßig nicht, das SVG-Dateiformat hochzuladen, hauptsächlich wegen Sicherheitsbedenken.
Heute werden wir loslegen, was SVGs sind, wie sie nützlich sein können und wie du die SVG-Unterstützung in WordPress sicher aktivieren kannst. Wir werden auch auf die Browserunterstützung eingehen, sowie auf einige Vorbehalte, wenn du dich entscheidest, auf das Vektorbildformat umzusteigen.
Hoffentlich werden wir eines Tages SVG als Teil des WordPress-Cores haben, aber derzeit sind wir noch nicht so weit.
Was ist eine SVG-Datei?
SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafikformat, das häufig von Webseiten und Marken verwendet wird, um Logos und Icons auf ihren Webseiten darzustellen. Wikipedia definiert SVG als:
Ein SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafikformat für zweidimensionale Grafiken mit Unterstützung für Interaktivität und Animation. Die SVG-Spezifikation ist ein offener Standard, der seit 1999 vom World Wide Web Consortium (W3C) entwickelt wird.
Du kannst SVG-Dateien sogar mit Code oder deinem Texteditor manipulieren. SVGs werden derzeit von 33% aller Webseiten genutzt und wie du unten sehen kannst, steigt die Akzeptanzrate rapide an. Beliebte Webseiten wie Google, Reddit, Dropbox, ESPN, und sogar unsere eigene Webseite hier bei Kinsta nutzen SVGs.
SVG Browser Unterstützung
SVG-Dateien 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 SVG-Bilder definieren, aber wir werden heute nicht darauf eingehen. Nachfolgend findest du eine Liste der unterstützten Browser:
- Internet Explorer 9, 10, 11+ and Edge
- Firefox 2+
- Chrome 4+
- Safari 3.1+
- Opera 10+
- iOS Safari 3.2+
- Android Browser 3+
- Firefox for Android 86+
- Opera Mini (all)
- Opera Mobile 12+
- Chrome for Android 89+
- UC Browser for Android 12.12+
- Samsung Internet 4+
- QQ Browser 10.4
- Baidu Browser 7.12
- KaiOS Browser 2.5
Vorteile der Verwendung von SVG Dateien
SVG-Dateien 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)
PNG (optimierte Größe: 85.1 KB)
SVG (optimierte Größe: 6.1 KB)
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 zum Teilen unterstützen. Wenn du also SVGs für deine Featured Images verwendest, musst du die Yoast SEO Funktion nutzen und ein PNG oder JPG für das OG und die Meta-Tags hochladen, da du sonst riskierst, dass dein Featured Image gar nicht angezeigt wird.
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.
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 entwickelt, WP SVG (auch bekannt als Safe SVG), das die SVG-Sanitizer Bibliothek beim Hochladen von SVG-Bildern in deine WordPress-Mediathek nutzt. Das Plugin ermöglicht es dir auch, SVGs wie normale Bilder in der Mediathek zu betrachten.
Du kannst Safe SVG kostenlos aus dem WordPress Repository herunterladen oder indem du in deinem WordPress Dashboard unter „Add New“ Plugins danach suchst. Mit ein paar einfachen Klicks kannst du loslegen.
Es gibt auch eine Premium-Version, erhältlich auf wpsvg.com, die es dir erlaubt, bestimmte Nutzer vom Hochladen von SVGs auszuschließen und zusätzliche SVG-Optimierungen vorzunehmen. In unserem Beispiel unten werden wir einfach die kostenlose Version verwenden.
Als alternatives Plugin könntest du dir SVG Support anschauen.
Bevor du deine SVG-Datei 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.
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.
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.
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.
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?
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar