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">
In der wp-config.php muss der ungefilterte Upload aktiviert werden - im Nachgang wieder deaktivieren!
define('ALLOW_UNFILTERED_UPLOADS', true);
Nun kann im Medienmanager auch ein SVG-Datei hochgeladen werden.
Auch die Einbindung in Inhalte funktioniert so.
Die Coolere 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*/
}
