Grafikformate gibt es viele, doch SVG (Scalable Vector Graphics) erfreut sich einer zunehmenden Beliebtheit. Doch was macht das System überhaupt erst so interessant? Worin liegt der Vorteil, SVG-Dateien zu verwenden?
SVG – Die Vorteile eines Grafikformats
Das Grafikformat SVG existiert bereits seit 1999, gewinnt aber erst in den letzten Jahren an Bedeutung. Der Grund dafür ist, dass immer mehr Browser dieses Format unterstützen und auch immer mehr Devices mit hochauflösenden Displays angeboten werden, die jetzt erst die Stärken und das volle Potential des Formats ausspielen können.
Dabei ist die Vielfältigkeit eine der bedeutendsten Stärken des Grafikformats. Vor allem bei der Erstellung von…:
- Logos
- mehrfarbigen Icons
- großflächigen Grafiken
bietet SVG den Webdesignern abwechslungsreiche Einsatzmöglichkeiten. Egal ob bei der Aufwertung durch Animationen oder Transitions: SVG stellt im Webdesign ein nützliches Hilfsmittel dar. Besonders wichtig ist hierbei auch, dass diese Grafiken skalierbar sind. Somit verlieren sie auch bei Veränderung ihrer Größe nicht an Qualität.
Klassische SVG Anwendungsbereiche
Neben internen Möglichkeiten zum Hinzufügen von Animationen und Filteroptionen bieten vor allem die HTML-ähnlichen Elemente der SVGs Anwendungsmöglichkeiten mit bzw. auf CSS und JavaScript. So lassen sich SVGs nicht nur als Bild, Object oder iFrame einbinden, sondern eignen sich auch für die Einbettung als Hintergrundbild mit CSS, sowie für die Einbettung mit HTML5.
SVG und die WordPress-Mediathek
SVG wird zwar von vielen Browsern mittlerweile unterstützt, doch die WordPress-Mediathek blockiert weiterhin den Upload dieses vielfältigen Datei-/Grafikformats. Allerdings lässt sich dieses Problem mit einer kleinen Anpassung an der functions.php beheben.
Wenn Du also dieses Grafikformat nutzen möchtest und selbst in der WordPress-Mediathek nicht auf die Verwendung verzichten willst, dann lohnt es sich, weiterzulesen. Hier erhältst Du alle notwendigen Informationen, damit Du SVG zur Mediathek hinzufügen kannst.
Und so wird es gemacht - MIME-Type für SVG hinzufügen
Damit sich SVG und WordPress miteinander „vertragen“ muss nur ein Snippet in die functions.php Deines Themes eingefügt werden (siehe WordPress Child Theme erstellen). Dies hat zur Folge, dass der MIME-Type auch für SVG hinzugefügt wird und WordPress anschließend den Dateityp nicht mehr blockiert und fortan den Upload in die WordPress-Mediathek erlaubt.
function kb_svg ( $svg_mime ){
$svg_mime['svg'] = 'image/svg+xml';
return $svg_mime;
}
add_filter( 'upload_mimes', 'kb_svg' );
functions.php besser als seitenspezifisches Plugin erstellt werden.Der hier beschriebene Wordkaround lässt sich ab der WordPress Version 4.7.1 leider nicht mehr anwenden. Möglicherweise handelt es sich hierbei lediglich um einen Bug im Upload. Der folgende Code, der zusätzlich zum oben beschriebenen Code in die functions.php eingetragen werden muss, sollte diesen Bug beheben können:
function kb_ignore_upload_ext($checked, $file, $filename, $mimes){
if(!$checked['type']){
$wp_filetype = wp_check_filetype( $filename, $mimes );
$ext = $wp_filetype['ext'];
$type = $wp_filetype['type'];
$proper_filename = $filename;
if($type && 0 === strpos($type, 'image/') && $ext !== 'svg'){
$ext = $type = false;
}
$checked = compact('ext','type','proper_filename');
}
return $checked;
}
add_filter('wp_check_filetype_and_ext', 'kb_ignore_upload_ext', 10, 4);
Fazit
Du brauchst auf die Vorteile des SVG-Formates trotz fehlender Unterstützung in WordPress nicht zu verzichten. Mit der genannten Lösung lässt sich SVG problemlos in der WordPress Mediathek verwenden.
