SVG-Logos in WordPress nutzen

WordPress akzeptiert keine SVG-Dateien

Hast du schon mal probiert ein Logo im SVG-Format? Geht nicht.

WordPress lässt das nicht zu und sagt uns, dass das Format SVG nicht unterstützt wird.

Warum lässt das WordPress nicht zu?

Aus Sicherheitsgründen. SVG ist nicht ein reines Bildformat, sondern es können zum Beispiel auch Skripte eingebettet werden. Das bringt dann erhebliche Gefahren mit sich.

WordPress hat eine Art eine Whitelist für Dateiformate. Gewisse Dateien werden zugelassen, andere standardmässig geblockt — was natürlich manuell geändert werden kann…

Warum das SVG-Format nutzen?

Mit SVG kann ich zum Beispiel ein Logo als Vektorgrafik nutzen und sogar Einfluss nehmen auf Teile des Logos mit CSS.

In der heutigen Zeit mit Responsive Design, Bildschirmen mit unterschiedlichsten Grössen und Auflösungen (Stichwort “Retina Display”) braucht man zum Beispiel mehrfach das Logo in unterschiedlichen Grössen, wenn man ein PNG nimmt. Im SVG-Format kann ich ein Logo für alle Grössen und Auflösungen nutzen. Vektorgrafik halt.

Plugin-Tipps

Mit diesen Plugins kann die SVG-Unterstützung von WordPress aktiviert werden und die Berechtigung angepasst werden, dass zum Beispiel nur Administratoren SVG-Dateien hochladen können — was die Sicherheit erhöht.

Vorgehen nachdem du das Plugin installiert hast

Einfach: Nach der Installation des Plugins kannst du wie gewohnt im Customizer von WordPress ein Logo hochladen. Nur diesmal als SVG statt als PNG.

Willst du mit WordPress und Technik fit werden?

Wir haben einen kleinen Lehrgang zu WordPress und Technik, der geeignet ist für alle, die mal tiefer in die Technik schauen möchten.

Arto Steiner

7 Kommentare

  1. Veröffentlich von Christine am Mittwoch, 25. Oktober 2017 um 07:05

    Hallo Arto

    Danke für den Plugin-Tipp!
    Wie sieht es tatsächlich mit der Sicherheit aus, wenn ich SVGs via Plugin hoch lade? Hast du ein Worst Case dazu?

    Liebe E-Grüsse
    Christine

    • Veröffentlich von Arto Steiner am Sonntag, 29. Oktober 2017 um 17:15

      Hallo Christine, die Hauptgefahr liegt in der Datei selbst. Wenn ich also einstelle, dass nur Admins SVG Files hochladen kann und die Admins den Inhalt dieser Dateien kennen, sollte das meines Erachtens nicht gefährlich sein…

  2. Veröffentlich von dirk am Dienstag, 20. März 2018 um 13:53

    wie krieg ich denn mein illdy theme dazu das svg auch zu laden? ich kann zwar svg (als admin) in die mediathek hochladen, aber der customizer vom illdy theme lasst kein beschneiden der svg datei zu… muss ich das händisch in der header.php einbauen, oder irgendwie verlinken?

    • Veröffentlich von Arto Steiner am Samstag, 22. Februar 2020 um 22:00

      Das Beschneiden vor dem Upload machen.

  3. Veröffentlich von Moritz K. am Montag, 26. März 2018 um 19:29

    Ich habe eine Frage dazu. Wenn ich so vorgehen und das Lpgo unter den Theme Einstellungen hochladen, habe ich das Problem, dass das Logo in einem Tag eingebunden wird. Dadurch lässt es sicher nicht per css anpassen. Wie löse ich das Problem?

    • Veröffentlich von Arto Steiner am Samstag, 22. Februar 2020 um 22:00

      Das sollte kein Grund sein, das Logo nicht per CSS anpassen zu können. Warum denn? Hast du ein Beispiel?

  4. Veröffentlich von Dirk am Montag, 20. April 2020 um 13:03

    Hallo Arto,

    danke für die Beschreibung. Der Upload meines SVG Logos klappt problemlos, doch leider wird es bei meiner WordPress-Installation immer auf voller Seitenbreite angezeigt und nicht skaliert, obwohl im SVG die Skalierung angegeben ist.
    Ich nutze das Genesis Framework mit dem Child-Theme Foodie-Pro und bekomme es mit CSS nicht angepasst (kenne mich mit CSS aber auch so gut wie gar nicht aus). Mein Theme ist offenbar so programmiert, dass es jedes Header-Bild erst einmal unskaliert anzeigt. (https://feastdesignco.com/rethinking-the-header/) Gibt es eine Möglichkeit, das SVG mit der zusätzlichen CSS im Customizer zu skalieren?

    Herzliche Grüße,
    Dirk
    (derzeit habe ich wieder das png als Logo online)

Hinterlassen Sie einen Kommentar