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