WordPress SVG Upload erlauben

Wahrscheinlich bist du schon einmal über das Dateiformat SVG gestolpert und hast festgestellt, dass der WordPress SVG Upload nicht standardmäßig unterstützt wird. Aber wie kann es sein, dass das Format nicht unterstützt wird, deine Website aber trotzdem besser macht? Wir erklären es dir.

Und geben dir alle Infos, die du darüber wissen musst und wie du trotz fehlendem Support, eine SVG-Dateien in WordPress integrieren kannst. Und los!

Warum SVG-Dateien?

SVG ist genau genommen kein Dateityp, sondern ein Grafikformat. Ein Grafikformat, das sich immer steigender Beliebtheit erfreut. SVG ist ein XML-basiertes Vektorbild und steht für „Scalable Vector Graphics“ (dt. „Skalierbare Vektorgrafik“).

Für diejenigen unter euch, die professionell mit verschiedenen Designtools arbeiten, ist das Format sicher ein Begriff. Es wird sehr häufig verwendet, um Logos und Symbole auf Websites anzuzeigen. Doch was genau macht dieses Format aus?

Sie sind höchst flexibel. Das ist ihre größte Stärke. Dank des Koordinatensystems lassen sie sich nahezu unendlich skalieren, ohne dass dabei die Qualität des Bildes, also die Auflösung, darunter leidet.

Das macht es vor allem für die Erstellung und Einbindung von Logos und großflächigen Grafiken interessant, was für ausgefallenere Webdesign interessant ist.

Während PNG oder JPG Formate mit Pixeln arbeiten, nutzen SVG-Grafiken zweidimensionale Karten/Koordinatensysteme, die die Grafiken definieren.

So verpixeln die Bilder nicht, wenn du auf sie zoomst, sondern bleiben klar. Ein weiterer entscheidender Vorteil ist auch die Dateigröße. Diese ist durch die XML-Basis sehr gering.

Gerade im Vergleich zu den gängigen JPG und PNG-Files kannst du mit SVG-Grafiken entscheidenden Speicherplatz sparen und so die Performance deiner Website optimieren. 

Warum erlaubt WordPress keinen SVG Upload?

Bei all dieses Vorteilen, fragst du dich jetzt bestimmt: Warum lässt WordPress die Einbettung von SVG nicht zu? Das hat vor allem mit der Sicherheit zu tun.

WordPress trägt die Verantwortung für alles, was standardmäßig innerhalb des CMS möglich ist. Bei SVGs sieht der Hersteller jedoch Sicherheitsbedenken und ermöglicht daher die Einbettung nicht.

Da SVG auf XML basiert, ist auch eine Integration von Schadcode durch beispielsweise Javascript oder ähnlichem möglich. Um dieses Risiko zu minimieren, wird kein offizieller Support zur Verfügung gestellt. 

Warum sollte ich in WordPress SVG erlauben?

Kannst du für dich die Sicherheit der SVG Datei garantieren, solltest du auf jeden Fall die Vorteile dieses Formates für deine Website nutzen. SVGs werden von nahezu allen gängigen Browsern unterstützt.

Viele dieser Browser versuchen die Sicherheitslücke der SVGs selbst zu stopfen. So hält sich das Risiko für dich persönlich in Grenzen. Du solltest jedoch darauf achten, welche SVG-Files du einbettest und woher sie kommen.

Stelle dir die Fragen, ob du der Quelle der Grafik vertraust. Ist dir die Quelle der Datei bekannt und sicher, kannst du ohne schlechtes Gewissen SVG-Dateien einbinden.

Zudem kannst du deine Benutzerrollen so gestalten, dass nicht jeder, der an deiner Webseite arbeitet, die Berechtigung hat SVG-Grafiken einzubinden.

Wie klappt der SVG-Upload?

Kommen wir nun zum praktischen Teil: Wie klappt der SVG-Upload? Wieder führen viele Wege nach Rom. Wir zeigen dir 2 einfache Wege, um das hochladen einer SVG zu ermöglichen.

Wir konzentrieren uns wieder auf die beiden Möglichkeiten, die wir für die sinnvollsten halten und geben dir die Anleitung mit auf den Weg, um das SVG-Format zuzulassen.

1. SVGs mithilfe von einem Plugin integrieren

Wie so oft kann ein Plugin die Lösung deines Problems sein. „SVG Support“ oder „Safe SVG“ sind dabei zwei Beispiele für passende Plugins. Beide funktionieren etwas anders, erfüllen aber den gleichen Zweck.

Du kannst sie dir ganz normal herunterladen. In den Plugin-Einstellungen kannst du noch die Berechtigungen bestimmen, wer alles SVG-Dateien hochladen darf. Dann kann es schon losgehen.

Hast du das Plugin installiert und aktiviert, kannst du deine SVG-Dateien wie alle anderen Bilder in deine Mediathek hochladen und in deine Beiträge einbinden.

Falls du dabei trotzdem eine Fehlermeldung bekommst, überprüfe deine SVG-Datei. Seit WordPress 5 ist es notwendig, dass die erste Zeile einen SVG-Tag enthält.

Ist das nicht der Fall, füge ihn hinzu und es sollte funktionieren.

2. SVG Uploads via Code zulassen

Während die Lösung durch ein Plugin für jedermann geeignet ist, benötigst du für diese entweder eigene Coding-Skills oder einen WordPress Experten an deiner Seite und Zugriff auf deine functions.php.

Mit den richtigen Zeilen Code in der functions.php kannst du SVGs in WordPress aktivieren. Du wirst im Netz wahrscheinlich schnelle, einfache Lösungen finden, mit denen du den Upload von SVG Dateien in deine Website zulassen kannst.

Diese garantieren dir aber kein sicheres Hochladen und sind daher mit Vorsicht zu genießen. Es ist jedoch möglich, eine sichere und saubere Lösung zu integrieren. 

Hier findest du beispielsweise 2 Snippets, die du auf eigene Verantwortung in der functions.php verwenden könntest:

/**
* add SVG to allowed file uploads
**/
function add_file_types_to_uploads($file_types){

$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );

return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads'); 

ODER

 /**
 * Add svg support
 **/
add_filter( 'wp_check_filetype_and_ext', function( $data, $file, $filename, $mimes) {
      global $wp_version;
      if( $wp_version == '4.7' || ( (float) $wp_version < 4.7 ) ) {
      return $data;
    }
    $filetype = wp_check_filetype( $filename, $mimes );
      return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
    ];
}, 10, 4 );

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

function dl_fix_svg() {
  echo '<style type="text/css">.attachment-266x266, .thumbnail img { width: 100% !important; height: auto !important;} </style>';
}
add_action( 'admin_head', 'dl_fix_svg' );

Unser Fazit zu WordPress SVG Upload erlauben

SVG-Grafiken werden von WordPress nicht standardmäßig unterstützt. Die Sicherheitsbedenken sind durchaus gerechtfertigt. WordPress trägt die Verantwortung und kann diese nicht für alle integrierten SVG-Dateien übernehmen.

Das bedeutet jedoch nicht, dass du auf die vielen Vorteile des Dateiformates verzichten musst. Hast du dir ein passenden Plugin heruntergeladen und du weißt, wo deine SVG-Dateien herkommen, kannst du sie guten Gewissens in deine Theme einbauen.

Durch die Qualität und die geringe Dateigröße kannst du damit das Nutzererlebnis und die Performance deiner Website verbessern.

Mit dem Zusammenspiel aus SVGs, PNGs und JPGs wird das Endergebnis deiner Website am besten sein.

Wie können wir dir helfen?

Du hast noch weitere Fragen zum Thema SVG Hochladen oder benötigst unsere Unterstützung im Bereich WordPress? Dann bist du bei Digital Leap genau richtig.

Als WordPress Agentursind wir Experten im Bereich der WordPress Programmierung und bieten unsere Dienstleistungen sowohl für Endkunden, als auch Kreativ-Agenturen und Designer an.

Schreibe uns einfach eine E-Mail oder ruf uns doch einfach an. Wir freuen uns auf dich.