SVG Dateien in WordPress hochladen und einbinden
Wenn wir in WordPress mit SVG-Dateien arbeiten wollen, stellt sich das zunächst als etwas schwieriger dar. Das Hochladen von SVG-Dateien in WordPress ist nämlich standardmäßig nicht zugelassen. Das hat einen ganz einfachen Grund. SVG-Dateien sind anfällig für Schadcode!
Der Dateiinhalt solch einer Vektorgrafik (SVG) ist vergleichbar mit einfachen HTML-Code. Denn eine SVG-Datei ist letztendlich nicht mehr als ein XML-Container-Format, welches den <SVG> HTML-Tag mit den dazugehörigen Vektorpfaden und -kurven beinhaltet. Dies begünstigt bspw. das Einschleusen von Schadcode mittels einfachen Javascript und ist deshalb in WordPress standardmäßig deaktiviert.
Dennoch macht es Sinn, mit SVG-Dateien zu arbeiten. Denn sie bieten viele Vorteile in der Darstellung von Grafiken. Eine SVG-Datei besteht aus einem Vektorpfad und kann Grafiken / Icons im Gegensatz zu JPG, PNG oder GIF-Dateien verlustfrei ohne verpixelte Konturen darstellen.
Wie können wir das Hochladen von SVG-Dateien in WordPress erlauben?
Die einfachste Methode um SVG-Dateien in WordPress hochladen zu können, ist den Upload mit Hilfe des WordPress-Filters upload_mimes zu erlauben. Den folgenden Code-Schnipsel kannst du so in deinem Plugin oder Theme verwenden und schon ist das Hochladen einer „Scalable-Vector-Graphic“ möglich.
Was ist zu beachten?
Mit den oberen WordPress-Filter ist das Hochladen von SVG-Dateien grundsätzlich möglich, insofern der Inhalt der SVG-Datei eine weitere Bedingung von WordPress erfüllt. WordPress setzt voraus, dass der Dateiinhalt wie folgt beginnt:
Wenn du bspw. eine Vektordatei in Adobe Illustrator erstellst und diese als SVG-Datei exportierst, wird jede Datei automatisch mit dem oberen Code ausgeliefert. Solltest du jedoch SVG-Optimierungs-Tools verwenden, um die Dateigröße der SVG-Datei zu verkleinern, könnte die Komprimierung ggf. die vorausgesetzte Code-Zeile löschen. In diesem Fall wäre es nicht möglich, trotz des zusätzlichen WordPress-Filters eine SVG-Datei hochzuladen.
SVG-Dateien komprimieren: Grundsätzlich löscht nicht jedes Komprimierungstool die erforderlichen Codezeilen aus einer SVG-Datei heraus. Das Komprimieren hat mehr Vorteile als Nachteile, denn oft befindet sich in exportierten SVG-Grafiken überflüssiger Code, welcher für die Anzeige auf einer Webseite unnötig ist.
Mein Tipp für die SVG-Komprimierung ist https://vecta.io/nano. Ein einfaches Online-Tool, welche SVG-Bilder verkleinert und Dateigröße einspart!
Aber Achtung!
Wie wir nun wissen stellt der SVG-Support von WordPress eine gewisse Gefahrenquelle dar um das Einschleusen von diversen Schadcode zu begünstigen. Aus diesem Grund sollte der obere Filter noch durch eine weitere Bedingung ergänzt werden.
Dieser kleine Zusatz schränkt die Gefahrenquelle insoweit ein, das der Upload von SVG-Dateien in WordPress nur für Nutzer mit Administratoren-Rechten möglich ist.
Es gibt noch eine bessere Lösung!
Die obere Methode ist eine Möglichkeit den SVG-Upload in WordPress zu erlauben. Dennoch bringt das ein gewisses Gefährdungspotential für unsere Webseite mit sich. Eine noch bessere Lösung ist der Einsatz des Safe SVG Plugins.
Dieses Plugin sorgt für das automatische Bereinigen von SVG-Dateien. D.h. dass der Dateiinhalt einer SVG-Datei zunächst vor jedem Upload auf Schadcode geprüft wird. Stellt das Plugin fest, dass die SVG-Datei bspw. Javascript-Code beinhaltet, so wird dieser Code automatisch gelöscht und eine offenbar gereinigte SVG-Datei in WordPress hochgeladen. Hier ist ein Beispiel wie so eine Bereinigung einer SVG-Datei funktioniert.
IMG-Tags automatisch in SVG-Tags umwandeln
In WordPress werden SVG-Dateien über das Einbetten von Medien ganz normal als HTML-Bild (IMG-Tag) eingefügt. Das sieht dann so aus:
Was grundsätzlich auch kein Problem darstellt. Wenn wir allerdings die Farbe und Größe von SVG-Grafiken mit Hilfe von CSS anpassen möchten, benötigen wir ein SVG-Bild (SVG-Tag) mit deren Pfaden. Diese Einbettungsvariante bietet wesentlich mehr Möglichkeiten als die Nutzung einer SVG-Datei innerhalb eines IMG-Tags. Das würde dann so aussehen:
Wie können wir das IMG-Tag on-the-fly in ein SVG-Tag abändern?
Die Verwendung von Javascript kann uns hierbei behilflich sein. Mit dem folgenden Javascript Code-Schnipsel werden alle SVG-Bilder, welche den Klassennamen .svg-icon enthalten, nutzerseitig automatisch von einem IMG-Tag in ein SVG-Tag umgewandelt.
So können wir innerhalb unseres Plugins oder Themes vorher bestimmen, welche SVG-Bilder entsprechend als SVG-Tag geladen werden sollen. Natürlich funktioniert diese Variante auch, für alle möglichen SVG-Grafiken auf einer Webseite. Dazu müsst ihr den Selektor einfach in object[type="image/svg+xml"] ändern, und der Javascript-Code wird auf alle auffindbaren SVG-Bilder angewendet.
SVG Filetype Check in WordPress funktioniert nicht?
Ein weiteres Phänomen in WordPress ist, dass wenn wir in PHP den Dateityp eines Bildes prüfen wollen – Die Prüfung nicht funktioniert, weil SVG-Dateien grundsätzlich nicht erlaubt sind. So wird bspw. die folgende Prüfung nicht funktionieren:
Damit dies funktioniert, müssen wir SVG als zulässigen Bildtyp in WordPress ergänzen. Dazu kannst du eine der beiden oberen Methoden verwenden und schon klappt es auch wieder mit dem Dateityp-Check in den WordPress-Template Dateien.
SVG-Bilder in WordPress werden mit 1 Pixel Breite und Höhe ausgegeben
Wenn wir SVG-Bilder über die WordPress Medien als Attachment einbinden, wird dem IMG-Tag immer eine Breite und Höhe von 1 Pixel vergeben. Diese Problematik hindert uns daran, SVG-Bilder richtig darzustellen. Das sieht dann so aus:
Ohne eine passende CSS-Regel, welche wir für jede SGV-Grafik erstellen müssten, würden alle Vektorgrafiken immer viel zu klein dargestellt werden. Mit dem WordPress-Filter image_downsize lässt sich das einfach lösen. Die Bild-Attribute „Width“ und „Height“ werden dann nicht mehr ausgegeben und die SVG-Bilder wieder richtig dargestellt.
