SVG-Dateien in die WordPress-Mediathek hochladen

Von: Jonas

Mit Hilfe einer Anpassung an der functions.php wird der MIME-Type für SVG erlaubt, so dass die Vektorgrafiken in die WordPress-Mediathek hochgeladen werden können.

Aktualisiert von 2013 – 2023 22 Kommentare

Das Grafikformat SVG (Scalable Vector Graphics) erfreut sich dank hochauflösender Displays und einem zunehmend flexiblen, Performance optimiertem Webdesign größter Beliebtheit. SVG-Dateien lassen sich verlustfrei skalieren und haben eine verhältnismäßig geringe Dateigröße. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einer kleinen Anpassung an der functions.php behebt ihr dieses Problem.

MIME-Type für SVG hinzufügen

Fügt folgendes Snippet in die functions.php eures Themes ein. Damit wird der MIME-Type für SVG hinzugefügt. Anschließend kennt WordPress den Dateityp und verbietet den Upload nicht länger.

function kb_svg ( $svg_mime ){
	$svg_mime['svg'] = 'image/svg+xml';
	return $svg_mime;
}

add_filter( 'upload_mimes', 'kb_svg' );

Das Hinzufügen von bislang unbekannten Dateitypen ist keine Theme-Funktion. Das Snippet sollte daher eigtl. besser als seitenspezifisches Plugin verwendet werden.

Nicht jede SVG kann in WordPress importiert werden

Das oben gezeigte Code-Snippet prüft den Dateityp und gibt diesen für den Import frei. Wenn die SVG stark komprimiert wurde – z.B. durch einen automatischen Export von Adobe XD – dann kann es passieren, dass die Datei von WordPress nicht mehr erkannt wird. In diesem Fall muss geprüft werden, ob folgende Info in Zeile 1 der SVG vorhanden ist. Wenn das nicht der Fall ist, kann es helfen diese Zeile zu ergänzen.

<?xml version="1.0" encoding="iso-8859-1"?>

Bug im SVG-Upload ab WordPress 4.7.1

Ab der WordPress-Version 4.7.1 funktioniert der oben beschriebene Weg nicht mehr. Es ist davon auszugehen, dass es sich um einen Bug handelt. Aktuell ist uns folgendes Workaround aus dem WordPress-Forum bekannt. Fügt folgenden Code – zusätzlich zum oben beschriebenen Code – in die functions.php ein:

function kb_ignore_upload_ext($checked, $file, $filename, $mimes){

 if(!$checked['type']){
 $wp_filetype = wp_check_filetype( $filename, $mimes );
 $ext = $wp_filetype['ext'];
 $type = $wp_filetype['type'];
 $proper_filename = $filename;

 if($type && 0 === strpos($type, 'image/') && $ext !== 'svg'){
 $ext = $type = false;
 }

 $checked = compact('ext','type','proper_filename');
 }

 return $checked;
}

add_filter('wp_check_filetype_and_ext', 'kb_ignore_upload_ext', 10, 4);

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing