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.
Jetzt regelt SVG Support von Benbodhi den SVG-Upload. Plugin ersetzen alleine reicht aber nicht immer. Das SVG muss auch noch richtig gespeichert werden.
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.
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.
Mehr zu SVG
- SVG mit CSS – Animationen SVG-Attribute, die in einem style-Attribut in SVG verwendet werden können, sind mit CSS animierbar.
- SVG mit Javascript animieren Elemente einfügen, Attribute ändern, Stile ändern und SVG animieren
- SVG image-Tag – Bitmap-Bilder in SVG-Grafik laden oder als Base64 einbinden