SVG in WordPress laden

Für den Einsatz von SVG in WordPress muss der Media Upload überredet werden, SVG als zulässigen Mime-Type anzuerkennen. Das passiert mit zwei oder drei Zeilen in der Datei functions.php und ist schon lange bekannt.

Ohne weitere Maßnahmen endet der Upload einer SVG-Datei in WordPress mit

Fehler grafik.svg Tut mir leid, aber aus Sicherheitsgründen ist dieser Dateityp nicht erlaubt.

Theoretisch würde ein Eintrag in der Datei wp-config.php schlichtweg den Upload für alle Arten von Dateien freischalten

('ALLOW_UNFILTERED_UPLOADS', true);

Eine gute Idee im Sinne der Sicherheit ist das nicht. Also lieber die wohlbekannte Funktion für die functions.php des WordPress-Themes:

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

SVG im WordPress Media Uploader erlauben

Allow SVG through WordPress Media Uploader

SVG im Upload zu erlauben bringt es allein nicht, denn WordPress will SVG scheinbar nicht anzeigen. In den Medien zeigt WordPress nur einen grauen Kasten als Symbol.

WordPress SVG Upload

Wird ein SVG als Beitragsbild in WordPress geladen, gibt es weder ein Vorschaubild im Editor noch zeigt sich das SVG auf der Webseite. WordPress kann SVG keine Größe zuordnen und setzt die Grafik auf eine Breite und Höhe von 1 Pixel.

beitragsbild-in-wordpress

Patch für wp-admin/css/edit.css

Es gibt einen Patch für wp-admin/css/edit-rtl.css und wp-admin/css/edit.css

#postimagediv .inside img {
   max-width:100%;
   height:auto;
   width:auto; /*this line has been added*/
}

Aber dann entschwindet der Patch schon mit dem nächsten Update von WordPress. Auch nicht brillant.

SVG in WordPress-Posts laden und anzeigen

In meinen Augen ist die Lösung von Lippe der eleganteste Weg: ein Hook in der functions.php

/**
 * 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 );
svg-in-wordpress

Damit sehe ich jetzt ein Vorschaubild bei SVG und sehe das SVG im Editor.

Für Drupal habe ich bislang keine komfortable Lösung für einen SVG-Upload gefunden. Der File-Upload in Drupal besteht auf jpg, png und gif und aus die Maus. Als Grund für die Ausgrenzung von SVG werden genauso wie bei WordPress Pur Sicherheitsbedenken angegeben. Aber im Grunde genommen ist jeder Datei-Upload ein Sicherheitsrisiko.

SVG in WordPress 4

Seit dem Update auf WordPress 4.0 zeigen einige WordPress-Installationen SVG-Beitragsbilder nach den zuvor beschriebenen Maßgaben nicht mehr an.

Als Übergangslösung – bis sich die WordPress-Entwickler eines Tages ernsthaft mit SVG auseinandersetzen – hilft ein Stück CSS.

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

Das hilft natürlich nur, wenn das Beitragsbild in fester Größe eingesetzt wird.

Sicherheitsbedenken beim SVG-Upload

SVG unterscheidet sich kaum von PDF, und dennoch werden PDFs ohne alle Bedenken von jedem Media-Upload unterstützt. Nur Safari warnte eine Weile beim Öffnen von PDFs im Browser (wobei die Warnung tatsächlich von Adobe kam und nicht von Safari).

Exploits or other security risks with SVG upload?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

7 Gedanken zu „SVG in WordPress laden“

  1. Dan – 28. Juni 2015

    Ich hab das in Meinem blog so gemacht:

    http://dan-site.bplaced.net/wordpress/?p=240

  2. Haessler – 16. Dezember 2014

    Hallo #Andy, da hast du recht und ich habe mir deswegen schon ein Bein ausgerissen.
    Ärgerlich finde ich das, weil der WordPress-Media Manager die SVG-Grafik in der List-Einstellung korrekt zeigt, nur nicht in der Grid-Einstellung.
    SVG ist in allen Content Management Systemen immer noch etwas Exotisches und im Augenblick habe alle CMS-Entwickler wohl am meisten an der Sicherheitsfront zu arbeiten.

  3. Andi – 15. Dezember 2014

    Leider wird die SVG Datei im Media Manager nicht mehr angezeigt. Da wäre eine Lösung wirklich was feines.

  4. Haessler – 10. November 2014

    #Mike Basil Da stehe ich auf dem Schlauch. Kannst du deine Anmerkung erklären?

  5. Mike Basil – 9. November 2014

    _ein Hook in der functions.php_…

    „PHP Fatal error: Call to undefined function add_filter() in [FunKyPaTh]/wp-includes/functions.php on line 4658“

    insert it into_wp-includes/media.php_ instead! – _add_filter()_ is not defined in functions.php.

  6. Emma – 7. Oktober 2014

    Ich schon wieder. Das Beitragsbild sitzt nicht in IE11. Nur eine Ecke unten rechts.

    • Haessler – 7. Oktober 2014

      #Emma – danke. Kein viewBox-Attribut in der SVG-Datei. Chrome, Safari und Firefox kommen damit klar, Internet Explorer scheinbar nicht.