Kostenlose SVG-Grafiken von unDraw in WordPress nutzen

unDraw bietet hunderte kostenlose, farblich anpassbare SVG-Illustrationen – ideal für WordPress-Websites. Hier erfährst du, wie du diese Grafiken effizient einsetzt.

Farbe anpassen & SVG herunterladen

Auf undraw.co/illustrations kannst du oben rechts die Hauptfarbe auf deine Brandfarbe setzen, bevor du eine Illustration herunterlädst. So passen alle Grafiken automatisch zu deinem Corporate Design – ohne Nachbearbeitung.

SVG direkt in WordPress einbinden

WordPress blockiert standardmässig den SVG-Upload aus Sicherheitsgründen. Die einfachste Lösung ist das Plugin Safe SVG. Es erlaubt SVG-Uploads und bereinigt die Dateien gleichzeitig von potenziell schädlichem Code.

1. Plugin Safe SVG installieren & aktivieren
2. SVG von unDraw herunterladen (Farbe vorher anpassen)
3. SVG über Medien → Neu hinzufügen hochladen
4. Grafik wie ein normales Bild im Block-Editor einfügen

SVG im Block-Editor als HTML einbetten

Für mehr Kontrolle – z.B. Grösse oder Alt-Text – kannst du das SVG auch direkt als Code einbetten. Öffne die heruntergeladene .svg-Datei in einem Texteditor, kopiere den Inhalt und füge ihn über einen HTML-Block ein:

<!-- Gutenberg HTML-Block -->
<figure class="wp-block-image">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-label="Beschreibung der Grafik">
    <!-- SVG-Inhalt hier einfügen -->
  </svg>
  <figcaption>Bildunterschrift</figcaption>
</figure>

Tipp: Farbe per CSS dynamisch steuern

Wenn du das SVG inline einbettest, kannst du die Füllfarbe direkt per CSS steuern – praktisch wenn du mehrere Farbvarianten brauchst:

/* Farbe aller Pfade im SVG ändern */
.mein-svg path {
  fill: var(--wp--preset--color--primary);
}

So nutzt du automatisch die in deinem Theme definierten Farben und musst SVGs bei einem Rebranding nicht neu herunterladen.

Empfehlenswerte Plugins

• Safe SVG – SVG-Upload sicher aktivieren
• SVG Block – Dedizierter Gutenberg-Block für SVGs mit Grössensteuerung