WordPress SVG Upload erlauben: SVG-Dateien hochladen und in die Mediathek einbinden

Du willst dein Logo als SVG in WordPress hochladen. Du ziehst die Datei in die Mediathek. Und dann: Fehlermeldung. „Dieser Dateityp ist aus Sicherheitsgründen leider nicht erlaubt.“ Willkommen im Club.

WordPress verbietet den Upload von SVG-Dateien. Standardmässig. Nicht aus Bosheit, sondern aus Sicherheitsbedenken. Aber die gute Nachricht: Du kannst den SVG Upload erlauben – und zwar ziemlich einfach. In diesem Artikel zeigen wir dir 2 einfache Wege, wie du SVGs in WordPress freischaltest. Per Plugin oder per Code in der functions.php. Beide funktionieren. Beide dauern keine fünf Minuten. Los geht’s.

 

Was ist eine SVG-Datei überhaupt?

SVG steht für Scalable Vector Graphics. Ein Vektorgrafikformat für zweidimensionale Grafiken. Klingt technisch, ist aber schnell erklärt: Während PNG oder JPG aus Pixeln bestehen, basiert eine SVG-Datei auf mathematischen Pfaden. Das heißt: Du kannst sie beliebig skalieren, ohne dass sie unscharf wird. Egal ob Briefmarke oder Billboard.

Deshalb sind SVGs perfekt für Logos, Icons, Illustrationen – alles, was sauber und scharf aussehen soll, auf jedem Bildschirm, in jeder Größe. Zweidimensional, skalierbare Grafiken. Dazu kommt: SVG-Dateien sind meistens deutlich kleiner als ihre PNG-Gegenstücke. Weniger Dateigröße, schnellere Ladezeit. Win-win.

Noch ein Detail, das man wissen sollte: SVG auf XML basiert. Das heißt, eine SVG-Datei ist im Grunde ein Textdokument mit Anweisungen. Kein Pixelhaufen. Du kannst eine SVG-Datei mit einem Texteditor öffnen und den Code lesen. Das ist gleichzeitig die größte Stärke und – wie wir gleich sehen – der Grund, warum WordPress skeptisch ist.

 

Warum verbietet WordPress den Upload von SVG-Dateien?

Gute Frage. WordPress verbietet den Upload von SVGs nicht ohne Grund. Das Problem: Weil SVG auf XML basiert, kann eine SVG-Datei theoretisch Schadcode enthalten. JavaScript, zum Beispiel. Wenn jemand eine manipulierte SVG-Datei hochlädt, könnte das ein Sicherheitsrisiko sein.

Seit WordPress 5.0 ist die Liste erlaubter Dateitypen strikt. SVG steht nicht drauf. WordPress kennt das Format, lässt es aber bewusst nicht zu. Der WordPress Core blockiert den Upload. Nicht weil SVGs schlecht sind. Sondern weil WordPress auf Nummer sicher geht.

Für eine WordPress Website mit nur einem Administrator ist das Risiko gering. Du lädst ja deine eigenen Dateien hoch. Aber auf einer Seite, wo mehrere Benutzer Dateien hochladen können? Da wird’s relevant. Ein einzelner manipulierter Upload kann die ganze Seite kompromittieren. Deshalb die Sperre. Nachvollziehbar. Aber umgehbar.

 

Wie kannst du den SVG Upload in WordPress erlauben – per Plugin?

Der einfachste Weg. Plugin installieren, aktivieren, fertig. Kein Code, kein Risiko, dass du was kaputt machst.

Das bekannteste Plugin dafür: Safe SVG. Installiert und aktiviert dauert das 30 Sekunden. Danach kannst du SVG-Dateien in die Mediathek hochladen, als wäre es ein ganz normales Bild. Das Plugin ermöglicht nicht nur den Upload – es sanitized die SVG-Dateien auch. Das heißt: Es entfernt potenziell gefährlichen Code aus der Datei, bevor sie auf dem Server landet. SVG Support mit eingebauter Sicherheit.

Eine Alternative: SVG Support. Macht im Kern das Gleiche. Erlaubt den Upload, zeigt SVGs als Vorschau in der Mediathek an und bietet ein paar Einstellungen, z.B. wer SVGs hochladen darf. Beide Plugins sind kostenlos, beide stabil. Nimm das, was dir besser gefällt. Sobald das Plugin installiert ist, funktioniert der Upload von SVG Dateien wie bei jedem anderen Format auch. Drag & Drop in die Mediathek. Done.

 

Wie aktivierst du den SVG Upload per Code in der functions.php?

Kein Plugin-Fan? Versteh ich. Dann geht’s auch mit ein paar Zeilen Code direkt in der functions.php Datei deines Themes (oder besser: im Child-Theme).

Folgenden Code in die functions.php einfügen:

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

Das war’s im Kern. Dieser Code fügt SVG zur Liste der erlaubten MIME-Types hinzu. $mimes['svg'] sagt WordPress: „Ja, SVG ist okay.“ Das return $mimes gibt die aktualisierte Liste zurück. Nach dem Speichern kannst du SVG Dateien in WordPress hochladen.

Aber – kleiner Haken. Seit WordPress 5.0 gibt’s einen zusätzlichen Check. WordPress prüft den Dateityp nochmal beim Upload. Dafür brauchst du noch diesen Snippet:

function svg_check_filetype($data, $file, $filename, $mimes) {
    $filetype = wp_check_filetype($filename, $mimes);
    return [
        'ext' => $filetype['ext'],
        'type' => $filetype['type'],
        'proper_filename' => $data['proper_filename']
    ];
}
add_filter('wp_check_filetype_and_ext', 'svg_check_filetype', 10, 4);

Damit übersteht deine SVG-Datei auch den zweiten Check. Beide Snippets zusammen in die functions.php – und der WordPress SVG Upload ist aktiviert. Ohne Plugin, direkt im Code. Funktioniert zuverlässig.

 

Welcher Weg ist besser – Plugin oder functions.php?

Kommt drauf an. Wie so oft.

Das Plugin ist sicherer. Safe SVG zum Beispiel bereinigt SVG-Dateien automatisch. Potenzieller Schadcode wird vor dem Speichern entfernt. Du lädst die Datei hoch, das Plugin kümmert sich um den Rest. Gerade wenn mehrere Leute auf deiner Seite Dateien hochladen können, ist das die bessere Wahl. Weniger Risiko, weniger Nachdenken.

Die Code-Variante über die functions.php ist leichtgewichtiger. Kein zusätzliches Plugin, kein Overhead. Aber: Sie bereinigt die SVG nicht. Du erlaubst den Upload, WordPress akzeptiert die Datei – aber wenn drin Mist steht, steht drin Mist. Für Seiten, wo nur du selbst SVGs hochlädst und die Dateien aus vertrauenswürdigen Quellen stammen, ist das kein Problem. Für alles andere: lieber das Plugin.

 

Wie bindest du SVGs nach dem Upload in WordPress ein?

Hochgeladen ist hochgeladen. SVG-Dateien tauchen in der WordPress Mediathek auf wie jedes andere Bild. Du kannst sie per Gutenberg-Block einfügen, im Classic Editor nutzen oder als Logo im Customizer einbinden.

Für das Logo: Unter Design → Customizer → Website-Identität kannst du dein Logo austauschen. Wenn der SVG Upload aktiviert ist, akzeptiert WordPress auch dort SVG-Dateien. Gerade für Logos ist das SVG-Format ideal – scharf auf Retina-Displays, winzige Dateigröße, kein Qualitätsverlust beim Skalieren.

In Beiträgen und Seiten fügst du SVGs genauso ein wie PNG oder JPG. Bild-Block, aus Mediathek wählen, fertig. Je nach Theme kann es sein, dass hochgeladenen SVG-Dateien in der Mediathek keine Vorschau haben. Das liegt daran, dass WordPress SVG-Thumbnails nicht standardmässig generiert. Die meisten SVG-Plugins lösen das mit. Ohne Plugin siehst du statt einer Vorschau nur ein generisches Icon. Funktioniert trotzdem – sieht nur im Backend etwas karg aus.

 

Gibt es Sicherheitsrisiken beim Hochladen von SVGs?

Ja. Und die sollte man nicht ignorieren.

Wie gesagt: Dass SVG auf XML basiert, macht sie anfällig. Eine manipulierte SVG-Datei kann JavaScript enthalten. Wenn die Datei im Browser geöffnet wird, könnte der Code ausgeführt werden. Cross-Site-Scripting (XSS) nennt sich das. Kein theoretisches Szenario – es passiert.

Deshalb: Lade nur SVGs aus vertrauenswürdigen Quellen hoch. Wenn du SVGs selbst erstellst – z.B. in Illustrator, Figma oder Inkscape – bist du safe. Wenn jemand anderes SVGs auf deine WordPress Website hochladen kann, nutze ein Plugin mit Sanitizing-Funktion. Safe SVG entfernt potenziell gefährliche Elemente automatisch. Damit minimierst du das Risiko, ohne auf das SVG-Format verzichten zu müssen.

Grundregel: Die Sicherheitsbedenken sind berechtigt. Aber mit der richtigen Vorsichtsmaßnahme – Plugin mit Sanitizing oder nur eigene Dateien hochladen – ist das Hochladen von SVGs absolut vertretbar.

 

Was tun, wenn SVGs nach dem Upload nicht korrekt angezeigt werden?

Passiert. Manchmal lädst du eine SVG hoch und sie wird nicht dargestellt. Oder nur als Code. Oder verzerrt. Keine Panik.

Erster Check: Hat die SVG-Datei die richtige Endung? .svg, nicht .svgz oder was anderes. Zweiter Check: Stimmt der MIME-Type? Manche Server blockieren image/svg+xml auf Ebene der Serverkonfiguration. In dem Fall musst du den Dateityp in der .htaccess oder in der Nginx-Config erlauben.

Dritter Check: Dein Theme. Manche Themes kommen mit SVGs nicht klar. Besonders ältere Themes. Wenn dein Theme die Breite und Höhe eines Bildes aus den Pixelmaßen liest, hat es bei SVGs ein Problem – weil SVGs keine festen Pixelmaße haben. CSS hilft: img[src$=".svg"] { width: 100%; height: auto; }. Das sagt dem Browser: Nimm die verfügbare Breite, behalte das Seitenverhältnis. Kleiner Fix, großer Effekt.

 

SVG-Dateien in WordPress: Lohnt sich das?

Kurze Antwort: Ja. Lange Antwort: Ja, definitiv.

SVGs sind das beste Format für alles, was nicht fotografisch ist. Logos, Icons, Infografiken, Illustrationen, UI-Elemente. Die Kombination aus unbegrenzter Skalierbarkeit, winziger Dateigröße und gestochen scharfer Darstellung macht sie unschlagbar. Jedes Mal, wenn du ein Logo als PNG mit 4x-Auflösung für Retina exportierst, könnte das auch einfach eine einzelne SVG-Datei sein.

Und mal ehrlich: Dass WordPress den SVG Upload nicht standardmässig erlaubt, ist ein Überbleibsel aus einer Zeit, wo Sicherheit über alles ging. Verständlich. Aber heute gibt’s Lösungen. Ob du SVG Dateien in WordPress per Plugin freischaltest oder per Code in der functions.php – der Aufwand ist minimal, der Nutzen groß. Eine saubere WordPress-Seite braucht SVGs. Punkt.

 

Das Wichtigste auf einen Blick

• SVG steht für Scalable Vector Graphics – skalierbare Vektorgrafiken, die auf XML basieren.
• WordPress verbietet den Upload von SVG-Dateien standardmässig aus Sicherheitsgründen.
• Per Plugin (Safe SVG, SVG Support) aktivierst du den Upload in 30 Sekunden – inklusive Sanitizing.
• Per Code in der functions.php geht’s auch – zwei Snippets, kein Plugin nötig.
• Plugins mit Sanitizing sind sicherer, weil sie potenziellen Schadcode aus der SVG entfernen.
• SVGs sind ideal für Logos, Icons und Illustrationen – scharf auf jedem Display, minimale Dateigröße.
• Nach dem Upload funktionieren SVGs in der Mediathek wie jedes andere Bildformat.
• Bei Darstellungsproblemen: MIME-Type prüfen, Theme-Kompatibilität checken, CSS-Fix anwenden.
• Nur SVGs aus vertrauenswürdigen Quellen hochladen – oder ein Plugin mit Sicherheitsfilter nutzen.
• Der Aufwand ist minimal, der Nutzen groß. SVG-Support gehört auf jede moderne WordPress-Seite.