WordPress und SVG Icons

SVG steht für “Scalable Vector Graphics” – ein Grafikformat, das sich nahezu verlustfreit skalieren lässt und vor allem extrem “leichtgewichtig” ist. Im Wesentlichen werden damit Webdesignelemente umgesetzt, die man früher (wenn überhaupt) meist mittels kleiner GIF-Grafiken integriert hat.

Es gibt ganze SVG-Bibliotheken, die es sehr schnell und einfach ermöglichen, wirklich schicke Symbole auf Webseiten zu zaubern. Einige dieser Symbole haben inzwischen schon fast einen “Standard-Charakter” entwickelt, bspw. die kleinen “Map-Marker” für Standort-Hinweise.

SVGs gibt es wie alle Grafiken entweder als kostenpflichtige Sets (logisch, denn es hat ja jemand Arbeit investiert) oder als freie Open Source Pakete – und natürlich kann man sich auch eigene SVGs erstellen.

Hier eine kleine Sammlung zu SVGs (generell und in WordPress):

Was ist SVG?
designerinaction.de/gestaltung/svg-icons/

Guter Einsteig in das SVG Thema für WordPress
kinsta.com/de/blog/wordpress-svg/

Der lange, aber sicherere Weg:
themecoder.de/2017/06/16/svg-icons-im-wordpress-theme-einbinden-und-anzeigen/

SVG Beispiel: Box Icons
designerinaction.de/tipps-tricks/web-development/boxicons-webfreundlicher-icon-font/
boxicons.com/

Umsetzung

Um überhaupt zu gucken, wie und wo SVGs in unseren Themes gut aussehen, hatte ich zunächst das Plugin WP SVG Icons getestet, das aber ab einem bestimmten Nutzungsumfang kostenpflichtig ist.

Inzwischen gefällt mir das Plugin “SVG Support” inzwischen besser, das hier gut erklärt wird:

themeisle.com/blog/add-svg-to-wordpress/
wordpress.org/plugins/svg-support/

Damit WordPress die SVGs lesen kann, nach der Plugin-Installation noch dieses Snippet in der functions.php (oder per Code Snippet) zufügen:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

Happy Coding,
antiblabla admina