Adventskalender Tag 3: Den Upload von SVG-Dateien erlauben

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.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugins, schreibt in seinem Blog ĂŒber WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und lĂ€uft nach Feierabend den ein oder anderen Halbmarathon.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert