SVG-Upload in WordPress 5

SVG Upload in WordPress

Immer wieder auf dem Programm: der SVG-Upload in WordPress. Das WordPress-Team hatte den SVG-Upload schon in WordPress 4.7.1 aus Sicherheitsgründen unterbunden. Erst Wordpress 5 erlaubt den Upload von SVG-Dateien (mit XML-Direktive).

18-12-15 SITEMAP

Von Haus aus und Out of the Box hat WordPress den Medien-Upload von SVG viele Jahre verweigert. Dagegen gab es vielerlei Rezepte, die immer mal wieder für einige Zeit gewirkt haben. Bei allen Tricks und Tipps habe ich WordPress aber nie überreden können, mir die Thumbnails von SVG anzuzeigen, sondern habe es nur bis zum anonymen Icon gebracht. WordPress 5 lädt zwar die SVG-Datei ohne Plugin, aber das Icon in der Mediathek bleibt anonym.

WordPress SVG-Upload

Wie viele SVG-Upload-Plugins habe ich jetzt eigentlich schon verbraucht? Die WordPress-Updates haben immer wieder die alten SVG-Plugins außer Kraft gesetzt. Ohne ein Plugin für den SVG-Upload wird die SVG-Datei im Media-Uploader zwar geladen, aber nur als anonymes Icon angezeigt.

SVG im WP Media Upload – keine Bildvorschau

Jetzt regelt SVG Support von Benbodhi den SVG-Upload. Plugin ersetzen alleine reicht aber nicht immer. Das SVG muss auch noch richtig gespeichert werden.

svg-bomb.svg Dieser Dateityp ist aus Sicherheitsgründen leider nicht erlaubt.

Die XML-Deklaration

Damit WordPress 5 SVG (mit und ohne Plugin) hochlädt, braucht die SVG-Datei auf jeden Fall eine XML-Direktive in der ersten Zeile. Direktiven beginnen mit einem <? und enden mit ?>.

<?xml version="1.0" encoding="utf-8"?>

Das ist korrekt, denn die XML-Deklaration war in SVG 1 noch nicht erforderlich, wohl aber in SVG 1.1. Bei Inkscape also in Zukunft darauf achten, dass Inkscape die XML-Deklaration automatisch einsetzt.XML-Deklaration entfernen ist vielleicht in Inkscape aktiviert – weg mit dem Häkchen. ViewBox ist wichtig, denn Viewbox versorgt den Browser mit den Informationen zum Seitenverhältnis der Grafik.

WordPress SVg-Anzeige in der Mediathek

SVG Inline in Gutenberg

Der direkte Einsatz von SVG inline ist ohne Plugin möglich, der HTML-Block des Gutenberg-Editors nimmt das SVG anstandslos an, will aber keine XML-Direktive. Umschalten von HTML auf Vorschau, und das SVG wird ordentlich angezeigt.

Zwischenzeitlich hat der Gutenberg-Editor das SVG-Markup gründlich aufgemischt, auch wenn es in einen HTML-Block eingesetzt wurde.

<div class="svghide">
 <br><br><br><br>Name<br>
 Änderungsdatum<br>Größe<br>Art<br>svg-bomb.svg<br>Heute, 17:18<br>
 2 KB<br>Scalable Vector Graphics Image<br><br>Schreibtisch <br>
 <br><br><br><br><br><br><br><br><br>
 </div>

Das ist inzwischen korrigiert, Inline-SVG bleibt (fast) unangetastet. Nur die schließenden Endstriche wie bei <path /> oder <rect /> werden durch ein schließendes Tag ersetzt.

WP 5 und der SVG Post-Thumbnail

Jetzt gibt es ohne Plugin zwar noch keine SVG-Vorschau im Medien-Upload, aber immerhin wird das SVG-Beitragsbild angezeigt.

Aber weil Breite und Höhe durch das viewBox-Attribut angegeben werden, passt sich die Anzeige zwar an die Breite der rechten Seitenleiste an, aber mit der Höhe legt sich die Grafik über die folgenden Einstellungen. Das ist einfach zu korrigieren:

.edit-post-sidebar .components-panel__body.is-opened .editor-post-featured-image{
   padding: 16px;
   height: 200px;
}

SVG und Sicherheit

Die Sicherheits-Diskussion um SVG in WordPress hält seit Jahren an. Ein mögliches Einschleusen von Schadcode betrifft viele Dateiformate (nicht nur SVG) und natürlich auch Plugins. HTML, CSS und Javascript sind ebenso potentielle Kandidaten für Hacks. Die Installation von Plugins und Themes ist dem Administrator vorbehalten, während der Upload von Medien i.d.R. allen Autoren erlaubt ist.

Wenn also mehrere Autoren Beiträge schreiben, sollte ein SVG-Plugin installiert werden, dass auch die Rechte der Autoren beim SVG-Upload regeln kann.

Name Änderungsdatum Größe Art svg-bomb.svg Heute, 17:18 2 KB Scalable Vector Graphics Image Schreibtisch
2019-11-16 SITEMAP BLOG