In Wordpress den Upload und die Verwendung von SVG-Dateien zu ermöglichen ist umständlicher als gedacht. Auch taugen die meisten Plugins die dies ermöglichen sollen nichts. Also muss man sich selbst behelfen.
Hinzu kommt ab und an das Problem das die SVG-Dateien nicht richtig formatiert sind. So kann man eine Datei zwar einbinden, diese ist dann aber 0px * 0px groß, weil die Dimensionen nicht ausgelesen werden konnten. Also muss man von Hand die SVG's anpassen:
<svg width="600px" height="200px" viewBox="0 0 600 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="600" height="200" viewBox="0 0 600 200">
Mit dem SANITIZER in Form bringen.
In der functions.php muss der Upload für weitere Mimetypes aktiviert werden
/**
* add SVG to allowed file uploads
**/
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$new_filetypes['svgz'] = 'image/svg+xml';
$new_filetypes['webp'] = 'image/webp';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');
Nun kann im Medienmanager auch ein SVG-Datei hochgeladen werden - wenn es noch immer nicht klappt, ist vielleicht die SVG kauptt?!? Mit dem SANITIZER in Form bringen.
Auch die Einbindung in Inhalte funktioniert so.
Die alternative Variante
Schöner und sicherer ist es wenn man direkt den SVG Quellcode in einen Code-Block einbindet. Dazu einfach die PNG-Datei mit einem Online-Converter in eine schöne, saubere SVG umwandeln und den Code kopieren.
In den Codeblock im Wordpress einfügen und fertig. Nun kann man die Elemente auch per CSS einfärben und steuern:
svg {
width: 200px;
fill: #032c58; /*farbe*/
transition: transform .2s; /* Animation */
}
svg:hover{
fill: #e60064; /*einfärben*/
transform: scale(1.1); /*zoom*/
}
