SVG in WordPress aktivieren und verwenden

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.

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

Load WordPress Sites in as fast as 37ms!

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-Grafik wird im Vektorgrafikprogramm Affinity Designer bearbeitet.
Eine SVG-Grafik wird im Vektorgrafikprogramm Affinity Designer bearbeitet.

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.

Die functions.php im Theme-Verzeichnis.
Die functions.php im Theme-Verzeichnis.

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

Das Code-Snippet im Editor VSCode.
Das Code-Snippet im Editor VSCode.

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

SVG-Upload in WordPress
SVG-Upload in WordPress

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.

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.

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.

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

WordPress SVG Upload Error.
WordPress SVG Upload Error.

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.

Die XML Deklaration am Anfang deiner SVG-Datei.
Die XML Deklaration am Anfang deiner SVG-Datei.

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?

Bestes WordPress Hosting

Hosting-Empfehlungen sind normalerweise MĂŒll.

Oft werden extrem billige Hosting-Pakete fĂŒr € 3 empfohlen, andere wiederum werben mit einem € 100 VPS, weil sie als Affiliate dabei am meisten verdienen. Im Endeffekt wollen wir doch alle nur den schnellstmöglichen Webspace fĂŒr möglichst wenig Geld.

Und zwar fĂŒr WordPress optimiert!

Was ist noch wichtig? Der Server sollte in Deutschland liegen und der Support sollte möglichst schnell antworten, und das am besten auf Deutsch.

Das alles bekommst du bei Raidboxes ab € 9,00 / Monat.

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:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert