Wie du in WordPress SVG Dateien erlaubst & hochlädst

SVG Dateien sind in WordPress von Haus aus verboten. Wenn man ein SVG hochladen möchte, bekommt man eine Fehlermeldung, dass dieser Dateityp aus Sicherheitsgründen nicht erlaubt ist – nervig …

Im modernen Webdesign sind SVG Vektorgrafiken allerdings zum Standard für verschiedene Elemente geworden, zudem sind sie klein und sparen Ladezeit.

In dieser Anleitung zeige ich dir, wie du einfach und kostenlos SVG Dateien in WordPress erlauben kannst und erkläre zudem, was genau dieser Dateityp eigentlich ist:

Was ist eine SVG Datei?

SVG steht für „Scalable Vector Graphic“ und ist einfach gesagt ein Format für Vektorgrafiken.

SVG Dateien sind somit keine Grafikformate wie PNG oder JPG, sondern bestehen aus Vektorpfaden im XML Format:

Keine Sorge, du musst diesen Code nicht schreiben. Gängige Bildbearbeitungsprogramme können dir aus deinen PNGs und JPGs Vektorgrafiken im SVG Format erstellen.

Lasse deine Bilder automatisch optimieren & spare Ladezeit mit dieser Anleitung:
WebP Bilder in WordPress – unglaubliche Performance

Wann machen SVG Dateien Sinn?

In erster Linie werden SVGs für Logos und Icons genutzt.

Da es Vektorgrafiken sind, können komplexe Bilder (wie beispielsweise Fotos) damit nicht abgebildet werden. In erster Linie funktioniert das SVG Format für zweidimensionale Grafiken.

Beispielsweise werden für das Logo häufig mehrere verschiedene Versionen genutzt. Möglicherweise ist dir das in den Themeeinstellungen schon als „Retina-Logo“ oder ähnlichem begegnet.

Da Vektorgrafiken beliebig skaliert werden können, sind sie auf allen Bildschirmgrößen und Auflösungen nutzbar und scharf.

Verdoppelst du die Größe eines 100 x 100px großen JPGs auf 200px Breite, wird es unscharf. Bei einem SVG bleibt das Bild durchgehend scharf und verpixelt nicht.

Mittlerweile unterstützen sämtliche Browser SVG Dateien, wie üblich haben natürlich ältere und längst vergessene Browser wie der Internet Explorer Problem damit:

Quelle: caniuse.com

Es spricht kaum etwas gegen die Nutzung von SVG Dateien in WordPress. Hier sind ein paar generelle Vor- und Nachteile des Dateiformats:

SVG und die Sicherheit

Der Grund, wieso SVG Dateien aktuell in WordPress (noch) nicht erlaubt sind, ist eine mögliche Gefahr für die Sicherheit der Website.

Es wird bereits seit fast zehn Jahren im WordPress Core diskutiert, SVGs endlich als sogenannten „MIME“-Type in WordPress aufzunehmen. Das bedeutet also von Haus aus in WordPress SVG zu erlauben.

Die Sicherheitsbedenken basieren darauf, dass SVG Dateien aus XML Code bestehen. In diesem Code könnte Schadcode eingeschleust werden. Allerdings bezieht sich das nicht auf bereits hochgeladene Dateien. Der Schadcode müsste vor dem Upload der Datei bereits vorhanden sein.

Das mögliche Problem besteht hier also nur, wenn man eine SVG Datei aus irgendeiner Quelle herunterlädt, sie bereits bösartigen Code enthält und anschließend in WordPress hochgeladen wird.

Wenn du also dein eigenes Logo als SVG Datei hochlädst oder Grafiken aus seriösen Quellen nutzt, hast du nichts zu befürchten.

Zudem sorgt die „SVG-Sanitizer“ Bibliothek von Daryll Dolye für Abhilfe bei heruntergeladenen SVGs.

Mit ihr ist es möglich, Code aus dem SVG zu entfernen, der dort nichts zu suchen hat. Das funktioniert in seiner Demo hervorragend.

Es gibt einen Weg, dieses SVG-Sanitizer Funktion in WordPress zu integrieren, um so automatisch die hochgeladenen SVG Dateien zu bereinigen. Dazu gleich in der Anleitung mehr.

Du musst keine Angst vor SVG Dateien haben.
Bei eigenen SVG Dateien besteht keine Gefahr. SVGs könnten nur dann zum Problem werden, wenn du sie aus dubiosen Quellen herunterlädst und sie zu diesem Zeitpunkt bereits Schadcode enthalten. Und selbst dieses Risiko lässt sich minimieren.

Anleitung: In WordPress SVG erlauben & einbinden

Wie immer gibt es den Weg über ein Plugin und den händischen Weg per Code in der functions.php deines Themes, um in WordPress SVG erlauben zu können.

Ich empfehle dir dringend, das Plugin zu nutzen und nicht irgendwo einen Code zu kopieren. Dieser Code kann fehlerhaft sein und für mehr Ärger als Nutzen sorgen.

Das Plugin nutzt zudem die SVG-Sanitizer Bibliothek, um noch ein Stück mehr Sicherheit zu gewährleisten.

Installiere dir das kostenlose Safe SVG Plugin, das du wie üblich einfach über dein WordPress Backend im Plugin-Verzeichnis findest.

Du wirst keinerlei Einstellungsmöglichkeiten für dieses Plugin finden. Nach der Installation macht es nichts weiter, als WordPress SVG zu erlauben.

Es hat zwei weitere große Vorteile:

• Säuberung des XML-Codes für mehr Sicherheit
• SVG Dateien werden in der Mediathek mit Vorschau angezeigt

Teste nach der Installation, ob der SVG Upload jetzt funktioniert und du musst nichts weiter tun.

Fazit

WordPress SVG erlauben und sie für Logos, Icons und andere einfache Grafiken zu nutzen, ist eine super Idee!

Da SVG Dateien in der Regel kleiner sind als PNG & JPG wirkt sich die SVG Nutzung positiv auf die Ladezeit aus. Zudem sind SVGs in jeder dargestellten Größe scharf angezeigt.

Mit dem kostenlosen Plugin Safe SVG erlaubst du WordPress nicht nur, SVG Dateien hinzuzufügen, es reduziert das Risiko für in der SVG Datei enthaltenen Schadcode.

Dieses Risiko gibt es sowieso nur, wenn SVG Dateien aus dubiosen Quellen heruntergeladen werden.

Somit steht der Nutzung von SVG Dateien nichts mehr im Weg!