WordPress SVG erlauben und verwenden

So nutzt du SVG-Bilder in WordPress! Direkt nach der Installation von WordPress ist es nicht möglich, SVG-Dateien in die Mediathek hochzuladen. Warum das so ist, wird deutlich, wenn du dir die Scalable Vector Graphics mal genauer ansiehst. Die basieren nämlich auf XML und erlauben es somit, fremde Ressourcen zu laden. Wäre das SVG-Format in WordPress also standardmäßig aktiviert, würden alleine dadurch unzählige neue Sicherheitslücken entstehen. Schließlich könnte jeder Nutzer im Blog korrumpierte Dateien hochladen. Das ist der Grund, warum SVG in WordPress erst händisch freigeschaltet werden muss.

SVG ist ein Vektorgrafikformat für zweidimensionale Grafiken und wird in XML-Textdateien gespeichert. SVG-Bilder können daher ohne Qualitätsverlust in der Größe skaliert werden. Leider bringt das XML-Format auch Sicherheitsrisiken mit sich, weshalb sie in WordPress per Default gesperrt sind.

Es gibt aber mehrere Wege den Upload von SVG in WordPress zu erlauben. Dazu mehr weiter unten.

Schlecht ist das natürlich immer dann, wenn du als Admin gewisse Pläne mit SVGs hast. Schließlich ist das Format nicht nur sehr modern, skaliert problemlos und verbraucht dazu noch besonders wenig Speicher. Es eignet sich eben auch ideal für Animationen. Also werden SVGs in WordPress mitunter händisch freigeschaltet, um sie innerhalb von Beiträgen nutzen zu können.

Rechts siehst du das animierte WordPress Logo als SVG.

Genau darum geht es in diesem Artikel. Ich möchte dir schnell und einfach zeigen, wie du SVG-Dateien in WordPress verwenden kannst. Außerdem verrate ich dir, welchen Nutzen das für dich hat und warum es eine Überlegung wert ist.

Wofür sind SVGs in WordPress eigentlich gut?

Eine SVG-Datei erkennst du am Dateityp bzw. der Extension .svg.

Zunächst einmal sollte ich dir erklären, warum es überhaupt Sinn macht oder interessant erscheint, SVG-Dateien in WordPress zu verwenden. Für das eigene Theme etc. wäre das längst möglich. Hier spreche ich deshalb vor allem davon, dass SVG-Dateien einfach per Upload im Backend hinzugefügt und dann zum Beispiel auch als Artikelbild eingesetzt werden können. Sie sollen somit wie jedes andere Bild in der Mediathek erscheinen.

Ob SVG nun besser als ein PNG, WEBP oder JPEG ist, kann man pauschal nicht sagen. Für mich liegt der Vorteil von SVGs in ihrer Skalierbarkeit. Füge ich eine Grafik ein, ist ein SVG oft besser geeignet als ein PNG. Letzteres würde je nach Anwendungsfall schnell unscharf werden, während ein SVG immer und jederzeit gut aussieht.

MERKE: SVGs eigenen sich am besten für sehr einfache Grafiken, wie Logos und Icons.

Da es sich bei einem SVG aber um ein Vektor-basiertes Bild handelt, ist das Format nicht automatisch die richtige Wahl, sondern nur im Einzelfall. Ein Foto als SVG wäre demnach Schwachsinn, eine sehr einfache Infografik hingegen könnte als SVG sehr sinnvoll erweitert werden. Am Ende kommt es auf dich und deinen Workflow an, ob SVG-Dateien für dich und deinen Blog von Vorteil sind oder nicht.

SVG in WordPress aktivieren

Um SVG im WordPress-Upload zu erlauben, gibt es verschiedene Plugins, die genau das erledigen können. Zwei davon, die besonders einfach und eingängig sind, möchte ich dir an dieser Stelle empfehlen. Das erste Plugins ist eine absolut rudimentäre Lösung und das zweite ist ein Plugin für die etwas höheren Ansprüche und mit weiteren Features.

Eigenes Code Snippet

Vorher möchte ich dir aber noch zeigen, wie du SVGs in WordPress ganz ohne Plugins aktivieren kannst. Dazu musst du folgenden Code in die functions.php deines Child-Themes einfügen.

// Allow SVG usage in WordPress
function bloggerpilot_cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'bloggerpilot_cc_mime_types');

Erhältlich auch als Gist.

Das geht einfach.

Navigiere in deinem FTP-Client (Filezilla) zu deinem Child-Theme-Verzeichnis und öffne die Datei names functions.php.

Im Editor fügst du nun den Code von oben ein, speicherst die Datei und lädst sie wieder hoch.

Nun kannst du auch dein SVG-Logo hochladen und im Customizer auswählen.

Alternativ kannst du diesen WordPress-Hook natürlich auch mit einem Plugin wie Advanced Scripts oder Code Snippets in deinen Blog einbinden.

Ich bevorzuge die Variante in der functions.php Datei, weil ich mir dadurch ein zusätzliches Plugin erspare. Sonst hat die Nutzung eines Plugins aber kaum Nachteile.

Easy SVG

Manchmal kann es ganz einfach sein. Easy SVG aktiviert den SVG Upload in WordPress, ohne dabei allzu viele Optionen oder weitere Möglichkeiten zu bieten. Das Ganze unterstützt den Gutenberg Editor, bringt aber wie erwähnt keinerlei Extras mit.

Für alle, die nicht mehr brauchen, ist das ideal.

Easy SVG Support

WP SVG Images

Ein Plugin, welches ähnlich simpel und als Alternative funktioniert, wäre dann noch WP SVG Images. Nur für den Fall, dass bei dir etwas gegen den Einsatz von Easy SVG spricht.

WP SVG Images

SVG Support

Ein weiteres WordPress-Plugin, um SVG-Dateien in der Mediathek zu erlauben, ist SVG Support. Das bringt aber schon wieder weitaus mehr Features mit, als noch Easy SVG.

Unter anderem kann der Code deiner SVGs direkt vom Plugin minimiert werden und auch Inline SVGs sind mit SVG Support problemlos und schnell realisierbar. Animationen sind hier ebenso möglich, wie eine Einstellung, die es nur Admins erlaubt, SVG-Dateien hochzuladen.

SVG Support

Problembehebung

Es gibt noch zwei Möglichkeiten, waren der SVG-Upload nicht klappen könnte. Die Lösung findest du hier.

1. Fehlende XML Deklaration

Falls du noch immer eine der folgenden Fehlermeldungen erhältst, fehlt deiner SVG-Datei noch eine Zeile am Anfang.

„Dieser Dateityp ist aus Sicherheitsgründen leider nicht erlaubt.„

„Du bist leider nicht berechtigt, diesen Dateityp hochzuladen.„

Bemängelt wird dann die fehlende XML Deklaration in der XML-Grafik (Gist):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Diese Zeile fügst du mit einem beliebigen Text-Editor ganz am Anfang der Datei hinzu. In meinem Fall habe ich die Datei auf das Fenster von Visual Studio Code (VS Code) gezogen.

Danach kannst du auch dieses XML-Bild in WordPress hochladen.

2. Unfiltered Uploads

Bekommst du noch immer einen Error, kannst du alternativ, oder zusätzlich, noch folgendes Snippet am Ende der wp-config.php Datei eintragen (Gist):

define('ALLOW_UNFILTERED_UPLOADS', true);

Diese Datei findest du im Root-Verzeichnis deiner WordPress-Installation. Füge den Code vor der Zeile „/* That's all, stop editing! Happy blogging. */“ ein.

Nun gibt es gar keinen Grund mehr, warum du keine SVGs in WordPress nutzen kannst!

Sollte man SVG in WordPress SVG erlauben?

Das ist am Ende eben die große Frage. Potenziell kann das Format ein Sicherheitsrisiko darstellen und Schadcode in deinen Blog einschleusen. Realistisch betrachtet, bloggen die meisten aber alleine und wissen somit, was genau sie hochladen. Dass ein schadhaftes SVG in die WordPress Mediathek gelangt, erscheint mir daher mehr als unwahrscheinlich.

Auf der anderen Seite ist der Nutzen zum Teil durchaus sehr groß. Egal ob Logos, Infografiken, Icons oder allgemeine Grafiken – oft ist SVG die deutlich bessere Wahl und das effektivere Format. Vor allem aber skaliert es eben und wird, auch wenn sich später mal dein Theme oder die Breite der Beiträge verändert, nicht plötzlich unscharf.

Für mich kommt es darauf an, ob du bereits mit SVG arbeitest. Sind diese für dich noch Neuland, gibt es keinen Grund, selbige jetzt sofort in WordPress zu integrieren und sie als unerfahrener Anwender entsprechend hochzuladen. Sinn ergeben SVGs in WordPress nur dann, wenn du sowieso mit ihnen arbeitest und sie schon seit Längerem in WordPress vermisst. Einfach deshalb, weil sie für dich bei bestimmten Darstellungen die logische Formatwahl sind.

Wenn dem so ist, solltest du den Code von mir nutzen, oder eines der oben genannten Plugins installieren. Wenn SVGs für dich jedoch bis eben gerade noch unbekannt waren, gibt es für die Plugins keinen Grund. In diesem Fall mach weiter wie bisher.

Weitere Artikel zum Thema SVG:

• SVG zu CSS Background Converter
• Stylischer CSS oder SVG Hintergrund mit WordPress