Upload von SVG-Dateien in die WordPress-Mediathek erlauben

In den letzten Jahren hat die Verwendung des Grafikformates SVG (Scalable Vector Graphics) stark zugenommen. Standardmäßig lässt WordPress den Upload nicht zu, sodass man den Upload von SVG-Dateien in die WordPress-Mediathek erlauben muss. Dafür werden ein paar Zeilen Code in der functions.php benötigt.

Upload von SVG-Dateien in WordPress aktivieren

Da WordPress den MIME-Typ (Internet Media Type) von SVG-Dateien nicht kennt, muss man ihn bekannt machen. Das machst du mit folgenden Codeschnipsel in der functions.php:

/**
 * Upload von SVG-Dateien in die WordPress-Mediathek erlauben
 * https://wp-bibel.de/snippet/upload-von-svg-dateien-erlauben
*/

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

Nun ist der Upload von SVG-Dateien in die WordPress-Mediathek möglich.

Upload von SVG-Dateien
Quelle: WordPress Bibel

Wenn du die SVG-Datei als Beitragsbild in WordPress lädst, wird leider im Editor kein Vorschaubild angezeigt. Außerdem kann WordPress der SVG-Datei keine Größe zuordnen und setzt die Grafik somit auf eine Breite und Höhe von 1px. Wem der pure Upload von SVG-Dateien reicht, ist hier am Ziel.

SVG-Dateien in WordPress-Posts anzeigen lassen und Größe zuordnen

Ein Hook in der functions.php hilft dir, damit WordPress der SVG-Datei eine Größe zuordnen kann und es im Post anzeigen lässt.

/**
 * Upload von SVG-Dateien in die WordPress-Mediathek erlauben
 * https://wp-bibel.de/snippet/upload-von-svg-dateien-erlauben

 * Removes the width and height attributes of tags for SVG
 * 
 * Without this filter, the width and height are set to "1" since
 * WordPress core can't seem to figure out an SVG file's dimensions.
 * 
 * For SVG:s, returns an array with file url, width and height set 
 * to null, and false for 'is_intermediate'.
 * 
 * @wp-hook image_downsize
 * @param mixed $out Value to be filtered
 * @param int $id Attachment ID for image.
 * @return bool|array False if not in admin or not SVG. Array otherwise.
 */

function wg_fix_svg_size_attributes( $out, $id )
{
	$image_url  = wp_get_attachment_url( $id );
	$file_ext   = pathinfo( $image_url, PATHINFO_EXTENSION );

	if ( ! is_admin() || 'svg' !== $file_ext )
	{
		return false;
	}

	return array( $image_url, null, null, false );
}
add_filter( 'image_downsize', 'wg_fix_svg_size_attributes', 10, 2 );

Damit sehe ich das SVG-Bild im Editor, als Beitragsbild und es wird dir in deinem WordPress-Post angezeigt.

Upload von SVG-Dateien
Quelle: WordPress Bibel

SVG-Dateien ab WordPress 4.0

Seit dem Update ab WordPress 4.0 wird das Beitragsbild mit dem oben beschriebenen Hook nicht mehr angezeigt. Hier hilft eine Zeile in deiner CSS-Datei.

img.attachment-post-featured[src*="svg"] { width: 220px; height: auto}

Am besten ist es, wenn du den Code im Child-Theme anlegst, damit er nicht bei dem nächsten Update von WordPress überschrieben wird.

Warum sollte man SVG-Dateien verwenden

SVG-Dateien sind Vektoren und lassen sich verlustfrei skalieren und außerdem besitzen sie eine verhältnismäßig geringe Dateigröße. Hier findest du eine Grafik, die den Vorteil gegenüber von PNG-Dateien deutlich zeigt.

Upload von SVG-Dateien
Quelle: WordPress Bibel

 

Schreibe einen Kommentar

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