WordPress SVG Upload aktivieren

Unter den gängigen Bilddatei-Formaten ist SVG (Scalable Vector Graphic) vor allem bei Webentwicklern und Webdesigner beliebt. Das Besondere: Das SVG-Format ermöglicht eine Skalierung des Bildes ohne Qualitätsverlust, was insbesondere im Responsive Webdesign von Vorteil ist. Außerdem ist die Dateigröße von SVGs relativ klein im Gegensatz zu den anderen gängigen Bildformaten, wie z.B. PNG oder JPG.

Selbst im Jahr 2020 verbietet WordPress immer noch aber das Hochladen von SVG-Dateien in die WordPress Mediathek. Beim Versuch eine SVG-Datei hochzuladen erhält man folgende Fehlermeldung:

Dieser Dateityp ist aus Sicherheitsgründen leider nicht erlaubt.

Dieses Verbot hat aber auch einen Grund: die Sicherheit deiner Website.

SVG und die Sicherheitsbedenken

WordPress verbietet den Upload von SVG-Dateien, weil hierdurch die Sicherheit deiner Website beeinträchtig werden kann.
Auf wordpress.com gibt es eine Whitelist von Datentypen welche standardmäßig in WordPress hochgeladen werden können. Wie du siehst ist „.svg“ dort nicht aufgelistet.
Der Grund dafür ist, dass SVG auf XML basiert und damit auch die ganzen Angriffspotentiale von XML genutzt werden können. Es kann z.B. Schadcode ausgeführt werden der z.B. Nutzerdaten abgreift oder deine Website hackt.

Moderne Browser sind sich der Gefahr bewusst und verhindern deshalb die Ausführung von Skripten bzw. Schadcode in SVGs. Du hast zwar auf die Browser deiner Websitebesucher keinen Einfluss, aber du kannst trotzdem sicherstellen, dass dein SVG-Code frei von Schadcode ist.

Methode 1: WordPress SVG Upload erlauben per Plugin (sicher)

Normalerweise bin ich ja ein Freund davon, so wenig Plugins wie möglich zu benutzen, aber hier macht es tatsächlich Sinn ein Plugin zu verwenden, um den Upload von SVG Dateien in WordPress zu ermöglichen.
Das Plugin Safe SVG von Daryll Boyle ermöglicht das Hochladen von SVG-Dateien in die WordPress Mediathek. Das Besondere an Safe SVG ist, dass es das, ebenfalls von ihm programmierte, „SVG-Sanitizer“ Framework verwendet. Vereinfacht gesagt macht der Sanitizer den Schadcode im SVG-Code zu Nichte.

Methode 2: WordPress SVG Upload erlauben per functions.php Code

Mit einem einfachen Code-Snipsel kannst du ebenfalls den Upload von SVGs ermöglichen. Der Code muss dabei in deine functions.php eingetragen werden. Du solltest dafür ein Child-Theme anlegen, falls du noch keines benutzt, weil sonst beim nächsten Theme-Update dein Code wieder überschrieben wird.
Füge also folgenden Code-Schnipsel in deine functions.php Datei ein um das Hochladen von SVGs zu ermöglichen:

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

Methode 3: WordPress SVG einbinden per inline-Code

Es gibt auch die Möglichkeit auf das Hochladen von SVG-Dateien in die WordPress Mediathek zu verzichten. Man kann nämlich den XML-Code von deiner SVG auch einfach direkt im HTML Quellcode platzieren. Klingt zwar vielleicht etwas kompliziert aber ist ganz einfach.

1. 1. Öffne deine SVG-Datei mit einem beliebigen Texteditor
   2. Kopiere alles ab <svg> . Das <?xml version="1.0" encoding="utf-8"?> und <!DOCTYPE...> also NICHT!
   3. Gehe nun in WordPress beim Seite bearbeiten an die gewünschte Stelle. Füge nun ein ganz normales Text-Element ein und wechsle die Ansicht in dem Text-Editor zur HTML-Ansicht.
   4. In der HTML-Ansicht kannst du dort einfach deinen kopierten SVG-Code einfügen

Nicht vergessen GZIP für SVG zu aktivieren

Wenn du deine Website zwecks Performance/Ladegeschwindigkeit bereits optimiert hast, kennst du bestimmt schon gzip. Gzip ist eine Kompression, welche die Datenpakete von deinem Webserver verkleinert und somit bessere Performance ermöglicht. Stelle also sicher, dass die gzip-Komprimierung auch für SVGs aktiviert ist.

Das Thumbnail wird nicht in der Mediathek angezeigt

Eventuell wunderst du dich warum in deiner WordPress Mediathek das kleine Vorschaubild von deinem hochgeladenen SVG nicht angezeigt wird? Wenn im WordPress Core schon der Upload verboten ist, fehlt natürlich auch eine Implementierung welche die Thumbnails von SVGs anzeigt. Manche Themes haben die Anzeige von Thumbnails für SVGs implementiert. Wenn dies der Fall ist haben die Themes aber sowieso auch schon den Upload von SVGs ermöglicht.

Wenn du das von mir empfohlene Plugin aus Methode 1 „Safe SVG“ verwendest sollte die Anzeige der Thumbnails durch das Plugin ermöglicht werden.

Wenn du den Code-Schnipsel aus Methode 2 in deine functions.php eingetragen hast musst du dich selbst um die Anzeige des Thumbnails kümmern. Auf diese Implementierung werden ich aber hier nicht weiter eingehen.