SVG in WordPress / Drupal laden

SVG in Wordpress / Drupal

Viele Jahre musste WordPress mit Plugins überredet werden, um SVG in Beiträge und Seiten einzubinden und ein Thumbnail anzuzeigen. Heute lädt WordPress SVG ohne Widerspruch, zeigt ein ordentliches Vorschaubild. Ganz kleine Fallen bleiben allerdings.

18-12-15 SITEMAP

So drastische Maßnahmen wie ein Eingriff in die config.php sind nicht mehr nötig, sondern verbieten sich von selbst. In Version 5 lädt WordPress endlich SVG und zeigt ein Thumbnail der Grafik.

Trotzdem kann WordPress den SVG-Upload mit Dieser Dateityp ist aus Sicherheitsgründen nicht erlaubt verweigern.

Das passiert, wenn die SVG-Datei keine XML-Direktive vor dem SVG-Tag enthält. In die erste Zeile der SVG-Datei:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="760" height="331" viewBox="0 0 760 331" xmlns="http://www.w3.org/2000/svg"> 
...
</svg>

Kann auch sein, dass das SVG-Bild winzig klein eingesetzt wird. Dann hat das SVG-Tag der Datei entweder kein width / height-Attribut oder width und height sind nicht in absoluten Werten, sondern als Prozent-Werte notiert. Überhaupt sollte die SVG-Datei ein with und height-Attribut haben, denn nur so funktioniert das loading=“lazy“ in WordPress automatisch.

Dann läßt sich das winzige SVG-Bild problemlos auf die gewünschte Größe aufziehen.

Die verborgenen Sicherheitslücken von SVG

Was ist denn so gefährlich an SVG, dass die Content Management Systeme allesamt genauso wie Facebook, Pinterest und Twitter SVG nicht zulassen?

SVG ist eine XML-Datei und kann Javascript enthalten.

<script xmlns="http://www.w3.org/2000/svg">
 <![CDATA[
 const elements = document.querySelectorAll("circle");
 … 
 ]]>
 </script>
 </svg>

SVG mit Javascript in einem img-Tag geladen.

Hexenkessel: CSS organisieren, CSS Reset

SVG inline mit Javascript

Doch Scripte funktionieren nicht mehr in allen Browsern. Die modernen Browser führen schon seit geraumer Zeit Scripte in externen SVG-Dateien nicht mehr aus.

SVG in Drupal 8 / Drupal 9

Drupal lässt SVG nicht als Bildtyp zu – selbst wenn SVG als zugelassene Dateiendung eingetragen wird. Auch hier werden die Sicherheitsbedenken in den Vordergrund gesetzt.

Die angegebene Datei callme.svg konnte nicht hochgeladen werden. • Nur Dateien mit folgenden Erweiterungen sind zulässig: png gif jpg jpeg. • The image file is invalid or the image type is not allowed. Allowed types: png, jpeg, jpg, jpe, gif

Um SVG als Datei inline im Editor einzusetzen oder über ein Feld zu laden, braucht Drupal ein Modul. SVG Image Field erlaubt SVG sowohl in Feldern als auch inline – optional als Inline-SVG oder extern in einem img-Tag.

SVG Image Field liefert SVG auch über die Drupal Media Library.

IMCE Image Bridge und SVG

Das Modul für die einfache Bildverwaltung, IMCE, hingegen setzt * als zugelassene Dateitypen. Allerdings kommt IMCE schon von Haus aus mit der Option auf reduzierte Berechtigungen für unterschiedliche Benutzerrollen.

SVG in IMCE Image Bridge

CKEditor, der Standard-Editor in Drupal zeigt die Bilder allerdings nicht an, wenn die SVG-Datei keine absoluten Werte für Breite und Höhe setzt.

Also in den Quelltext und Breite und Höhe für das img-Tag per Hand eintragen:

<img alt="Wellenlängen Dichromate"
  data-entity-type="" data-entity-uuid=""
  height="100%" src="…dichromaten.svg" width="100%" />

Allem Anschein nach findet im IMCE bereits ein Sanitize, eine Bereinigung, statt, denn hier zeigt auch Chrome keinerlei Reaktion auf das Javascript in der SVG-Datei.

SVG Akzeptanz

Google akzeptiert SVG-Dateien als Bild und reiht sie in die Bildersuche. Neben Dropbox, die ebenfalls einen SVG-Upload und die Anzeige von SVG möglich gemacht haben, zieren sich alle Anwendungen – von Adobe Lightroom über Darktable bis hin zu Pinterest & Co.

DropBox gehört zu den wenigen Anwendungen, für die SVG bereits zur Normalität gehört. Und so wie es scheint, reinigt und neutralisiert Dropbox SVG-Dateien, denn bei der SVG-mit-Javascript-Datei zuckt Chrome nicht und zeigt keine Reaktion auf das Script.

Mehr zu SVG

2019-11-16 SITEMAP BLOG