Pixelbart

Schnipsel: SVG im Block Editor bzw. Gutenberg erlauben

Vor ca. einer Stunde fragte jemand im WordPress Forum, ob jemand eine Lösung für das SVG-Problem in WordPress 5.0.1 hat. Ich habe mir den Code einiger Plugins im Repository angeschaut und folgende Lösung gefunden, die eigentlich für ältere Versionen von WordPress angedacht war.

23.03.2020: Ditmar von wegerl.at hat mich auf das Plugin SVG Support aufmerksam gemacht. Das Plugin erlaubt das Hochladen von SVG und sichert den Upload auch noch ab. So wird Schadcode innerhalb der SVG erkannt und blockiert. Außerdem funktioniert damit die Vorschau in der Mediathek.

Hier geht es weiter mit dem ursprünglichen Beitrag:

add_filter( 'wp_check_filetype_and_ext', 'my_svgs_disable_real_mime_check', 10, 4 );
function my_svgs_disable_real_mime_check( $data, $file, $filename, $mimes ) {
  $wp_filetype = wp_check_filetype( $filename, $mimes );	
  $ext = $wp_filetype['ext'];
  $type = $wp_filetype['type'];
  $proper_filename = $data['proper_filename'];
  return compact( 'ext', 'type', 'proper_filename' );
}Code-Sprache: PHP (php)

So funktioniert dann auch der folgende Code wie gewohnt:

add_filter( 'upload_mimes', 'my_custom_mime_types' );
function my_custom_mime_types( $mimes ) {
  $mimes['svg'] = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  return $mimes;
}Code-Sprache: PHP (php)

Je nach WordPress Theme, müsst ihr dann die Breitenangaben mit CSS anpassen. Dort sind für die Bildausrichtung häufig maximale Breite usw. angegeben. Wenn ihr die einfach auskommentiert, sollte alles wie gewohnt funktionieren.

.alignleft img,
.alignright img,
.alignleft figcaption,
.alignright figcaption {
  /* max-width: 50%; */
  /* width: 50%; */
}Code-Sprache: CSS (css)

Denkt nur bitte daran, dass wenn ihr ein kostenloses oder kostenpflichtiges Theme im Einsatz habt, ihr die Änderungen mit CSS jedes Mal erneut machen müsst.

18.12.2018: Wir haben jetzt von „offizieller“ Seite aus, eine Lösung mitgeteilt bekommen, die jedoch in jeder SVG eine Änderung verlangt (für mich persönlich, ist das keine Lösung). Ihr müsst dafür in jede eure SVG (sofern nicht vorhanden), folgenden Schnipsel an den Anfang setzen:

<?xml version="1.0" encoding="utf-8"?>Code-Sprache: HTML, XML (xml)

In

,
,