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

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.

Alternative für Entwickler, SVG per Code erlauben

Wenn du dich mit Code auskennst, kannst du SVG auch ohne Plugin freischalten. Der Kern ist ein kleiner Filter in der functions.php deines Child-Themes, der WordPress den SVG-MIME-Type beibringt.

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

Klingt einfach, hat aber drei Haken. Seit WordPress 4.7.1 prüft WordPress zusätzlich den echten Dateityp, und dieser Filter allein reicht oft nicht, der Upload wird trotzdem abgewiesen. Du brauchst dann noch mehr Code. Zweitens säubert dieser Weg deine SVG-Dateien nicht, der XML-Code wandert ungeprüft auf deinen Server. Und drittens siehst du in der Mediathek nur ein leeres Vorschaubild statt der Grafik.

Genau diese drei Dinge nimmt dir Safe SVG ab. Deshalb bleibe ich bei meiner Empfehlung, für die allermeisten ist das Plugin der schnellere und sicherere Weg. Den Code-Weg gehe ich nur, wenn ich auf einer Seite bewusst kein zusätzliches Plugin haben will.

SVG in WordPress einbinden und verwenden

Hochladen ist die halbe Miete. Jetzt willst du die SVG-Datei ja auch irgendwo auf deiner Website sehen. Gute Nachricht, sobald Safe SVG aktiv ist, behandelt WordPress deine SVG fast wie ein normales Bild.

So nutzt du deine SVG-Dateien an den typischen Stellen:

• Als Bild im Beitrag oder auf einer Seite, füge einfach den normalen Bild-Block ein und wähle deine SVG aus der Mediathek, wie bei jedem JPG auch.
• Als Logo, lade die SVG unter „Design“ → „Customizer“ → „Website-Informationen“ als Logo hoch. So bleibt es auf Retina-Displays gestochen scharf.
• Als Icon im Page-Builder, in GenerateBlocks, Elementor und Co. wählst du die SVG genauso aus wie jedes andere Bild.

Ein Punkt noch zur Größe. Eine SVG hat keine festen Pixelmaße wie ein JPG, sie skaliert frei. Lege die gewünschte Breite also im Bild-Block oder per CSS fest, sonst entscheidet der Browser selbst, und das sieht selten so aus wie gedacht.

SVG wird nicht angezeigt, was tun?

Du hast die SVG hochgeladen, aber auf der Seite bleibt alles leer oder das Bild ist winzig? Das ist ärgerlich, lässt sich aber fast immer schnell beheben. Hier sind die häufigsten Ursachen.

Die SVG wird nur als winziges Icon angezeigt

Das ist der häufigste Fall. Deiner SVG-Datei fehlt eine feste Größenangabe, und ohne die weiß der Browser nicht, wie groß er sie zeichnen soll. Gib im Bild-Block einfach eine Breite an, dann passt es. Alternativ öffnest du die SVG in einem Editor und ergänzt im svg-Tag ein width– und height-Attribut.

In der Mediathek erscheint nur ein leeres Vorschaubild

Wenn du SVG per Code statt per Plugin freigeschaltet hast, zeigt WordPress in der Mediathek keine Vorschau. Safe SVG behebt das automatisch. Hast du es installiert und siehst trotzdem nichts, leere einmal deinen Cache, sowohl im Caching-Plugin als auch im Browser.

Die Datei lässt sich gar nicht erst hochladen

Kommt weiterhin die Meldung „Dieser Dateityp ist aus Sicherheitsgründen leider nicht erlaubt“, ist Safe SVG entweder nicht aktiv oder ein Sicherheits-Plugin funkt dazwischen. Prüfe zuerst, ob das Plugin wirklich aktiviert ist. Mehr zu dieser Fehlermeldung und ihren Ursachen habe ich dir im Ratgeber zum WordPress Dateityp-Fehler aufgeschrieben.

Das SVG sieht kaputt oder unvollständig aus

Manchmal entfernt der SVG-Sanitizer beim Upload Teile der Datei, zum Beispiel eingebettete Schriften oder Effekte. Das ist gewollt, denn genau dort könnte Schadcode sitzen. Exportiere deine Grafik in dem Fall neu aus deinem Grafikprogramm, mit Schrift in Pfade umgewandelt, dann bleibt sie sauber und vollständig.

Häufige Fragen zu SVG in WordPress

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. Wie du auch deine übrigen Bilder für Ladezeit und Suchmaschinen optimierst, zeige ich dir im Ratgeber Bilder optimieren.

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!