Ich liebe SVG! Habe ich das schon mal gesagt? 🙂 Keine Website kommt mehr ohne ein Design aus, dass sich perfekt an die Größe von Mobilgeräten anpasst. Solche Geräte haben oft sehr hochauflösende Displays. Man spricht hier auch oft von “Retina-Displays”. Ein Problem hierbei: Bilder sehen oft sehr unschön aus, wenn sie in der Originalgröße dargestellt werden. Daher werden oft Bilder mit der vierfachen Größe verwendet. Diese sind aber natürlich viel größer und kosten im schlimmsten Fall kostbares Datenvolumen.

SVG als Rettung für Grafiken

Gerade bei Grafiken wie Logos oder Diagrammen können SVG-Bilder eine sehr gute Alternative sein, die oft auch sehr viel kleiner sind, als eine Pixelgrafik. Bei einem SVG handelt es sich nämlich um eine Vektorgrafik die beliebig vergrößert werden kann, ohne dass sie pixelig oder unscharf erscheint. Es gibt nur ein Problem. WordPress verhindert den Upload solcher Dateien über den Administrationsbereich. Der Grund liegt vermutlich darin, dass in einer SVG-Datei auch JavaScript enthalten sein kann und somit einen möglicher Angriffspunkt darstellt.

Den Upload ermöglichen

Ist man sich dieser Gefahr bewusst und möchte dennoch SVG-Dateien verwenden, dann ist im Moment nur ein direkter Upload per FTP möglich. Das Bild erscheint dann aber nicht in der Medienübersicht. Außerdem ist es natürlich nicht so einfach wie der Upload über den Administrationsbereich. Aber glücklicherweise gibt mit dem Filter “upload_mimes” eine einfache Möglichkeit, den Upload zusätzlicher Dateitypen zu erlauben:

function allow_svg_mime_types( $mimes ) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'allow_svg_mime_types' );

Jetzt kann man auch SVG-Dateien komfortabel direkt per Drag-and-Drop hochladen und in den Artikel einfügen. Hierbei gibt es aber aktuell noch ein kleines unschönes Problem: Da WordPress die Bildgröße nicht ermitteln kann (auch SVG haben eine “Standardgröße”), wird das Bild mit einer Höhe und Breite von 1px eingefügt. Man muss also in den Textmodus wechseln und diese beiden Werte manuell ändern, damit das Bild sichtbar wird (die Attribute “height” und “width”):

<img src="http://localhost/wordpress-zip/wp-content/uploads/2015/12/wapuu-der-ber.svg" alt="wapuu-der-ber" width="1" height="1" class="alignnone size-medium wp-image-31" />

Plugin zum Code

Für alle, die das jetzt schnell einsetzen wollen, habe ich natürlich wieder ein GIST mit einem kleinen Plugin erstellt, dass ihr auch wieder einfach als ZIP-Datei downloaden könnt.

Viel Spaß mit dem Plugin und bei der Gestaltung eurer Inhalte mit tollen SVG-Bildern.