SVG in WordPress einbinden

Diese Anleitung gilt auch für andere Web-CMS.

Warum sind SVG-Dateien, also skalierbare Grafiken so interessant?
Weil diese schneller im Internet transportiert werden und sich somit die Webseite schneller öffnend. Außerdem entlastet es die Datenbank.

Vorsicht, nur selbst erstellte SVG-Dateien hochladen, den SVG-Dateien werden bewusst gesperrt um ausführbaren Code, der in SVG-Dateien versteckt werden kann, keinen Zugang zur Webseite und somit auch zu den Webseiten-Besuchern zu gewähren.

Hier am Beispiel des Farbrades mit 256 Farben.
Colorwheel-small

150 kB die Original-SVG-Datei
 65 kB als komprimierte PNG-Datei
 17 kB als optimierte JPEG-Datei
 20 kB als SVGZ-Datei, verlustfrei komprimierte SVG-Datei

Nun sieht es so aus, das JPEG die kleinste Datei ist und nicht die verlustfreie komprimierte SVGZ-Datei, aber JPEG hat die schlechteste Qualität und SVG ist das Original. Gerade für Zeichnungen und Logos sind Artefakte wie in JPEG-Dateien keine Option!
Bei JPEG-Dateien besteht noch das Problem die Original-Datei aufzuheben, zusätzlich zur eingesetzten Datei mit den speziellen Abmessungen für die jeweilige Webseite.


Um SVG-Dateien und auch komprimierte SVGZ-Dateien in WordPress zu nutzen, werden zwei Arbeitschritte benötigt.

1. muss dem Apache-Server mitgeteilt werden das diese Dateiformate, die zu Recht als gefährlich eingestuft werden, zulässig sind.
.htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

2. wird WordPress dieselbe Mittelung gemacht über das aktivierte Theme.

/wordpress-webseite/wp-content/benutztes-theme/
functions.php

/* MIME-Type svg und svgz zulassen */
    function custom_mtypes( $uwd ){
        $uwd['svg'] = 'image/svg+xml';
        $uwd['svgz'] = 'image/svg+xml';
        return $uwd;
    }
    add_filter( 'upload_mimes', 'custom_mtypes' );

Kommentare sind geschlossen.