SVG-Dateien: Wahrscheinlich bist du über dieses Dateiformat schon einmal gestolpert und hast festgestellt, dass der WordPress SVG Upload nicht standardmäßig unterstützt wird.

Aber wie kann es sein, dass das Format von WordPress nicht unterstützt wird, deine Website aber trotzdem besser macht? Wir erklären es dir.

Und geben dir alle Infos, die du über SVG-Dateien wissen musst und wie du trotz fehlendem Support, den WordPress SVG Upload erlauben kannst. Und los!

Warum SVG-Dateien?

SVG ist genau genommen kein Datei, sondern ein Grafikformat. Ein Grafikformat, das sich immer steigender Beliebtheit erfreut. SVG ist ein XML-basiertes Vektorbild und steht für „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?

SVG-Dateien 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.

Während JPG und PNG-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-Dateien kannst du mit SVG-Grafiken entscheidenden Speicherplatz sparen und so die Performance deiner WordPress Website optimieren. 

Warum erlaubt WordPress keinen SVG Upload?

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

WordPress trägt die Verantwortung für alles, was standardmäßig innerhalb des CMS möglich ist. Bei SVG-Dateien 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. Dieses Risiko will WordPress unterbinden und stellt daher keinen offiziellen Support zur Verfügung. 

Warum sollte ich in WordPress SVG Dateien nutzen?

Kannst du für dich die Sicherheit der SVGs garantieren, solltest du auf jeden Fall die Vorteile dieses Formates für deine WordPress 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-Dateien du bei WordPress 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-Grafiken in deine WordPress-Seite einbinden.

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

Wie klappt der WordPress SVG Upload?

Kommen wir nun zum praktischen Teil: Wie klappt der WordPress SVG Upload? Wieder führen bei WordPress viele Wege nach Rom.

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.

1. WordPress SVG Upload mithilfe eines Plugins

Wie so oft kann ein WordPress 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. WordPress SVG Upload selbst codieren

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.

Mit den richtigen Zeilen Code kannst du den WordPress SVG Upload aktivieren. Du wirst im Netz wahrscheinlich schnelle, einfache Lösungen finden, den WordPress SVG Upload zu ermöglichen.

Diese garantieren dir aber keinen sicheren Upload 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 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' );