WordPress SVG erlauben und hochladen: So geht’s

Für Entwickler und Websitebetreiber, die schnelle und nachhaltige Websites erstellen möchten, ist das SVG-Dateiformat ein unverzichtbares Werkzeug. Leider erlaubt WordPress standardmäßig keine SVG-Uploads, sodass Anwender eigene Lösungen finden müssen, um das Format zu implementieren.

Als WordPress-Agentur mit Fokus auf User Experience und nachhaltigem Webdesign betrachtet svaerm SVG-Bilder als eine effiziente Möglichkeit, die Ladegeschwindigkeit von Websites zu verbessern und ihren CO₂-Ausstoß zu senken. Da SVGs in WordPress nicht nativ unterstützt werden, haben wir uns mit verschiedenen technischen Lösungen befasst, um das weltweit beliebteste CMS mit einem der effizientesten Bildformate kompatibel zu machen.

In diesem Artikel teilen wir unser Wissen über die wichtigsten Aspekte zum Einsatz von SVGs und zeigen Ihnen Schritt für Schritt, wie Sie SVGs in WordPress erlauben können.

Warum SVG verwenden?

Als hocheffizientes, skalierbares Bildformat, ideal für Illustrationen und Grafiken mit einfachen Farbflächen, erfreut sich SVG immer größerer Beliebtheit. Während 2020 nur 21,2% der Websites SVGs nutzten, sind es 2025 bereits beeindruckende 61,3% (W3Techs.com, 2025).

Auch wir setzen in den Website-Relaunches für unsere Kunden immer häufiger SVGs ein.

Was macht SVG also so wertvoll für moderne Webentwickler?

Vorteile

Das Hauptmerkmal des SVG-Formats: Es ist vektorbasiert. Anstatt Bilder über Pixel wie bei Rastergrafiken zu speichern, definieren SVGs die Positionen ihrer Elemente durch Koordinaten. Das bedeutet: Sie lassen sich verlustfrei und unendlich weit in jede Richtung skalieren. Dank gleichbleibender Auflösung und geringer Dateigröße sind SVGs die ideale Wahl für Logos, Grafiken und Icons.

Ihre kompakte Dateigröße und ihr flexibles Vektorformat sind mit vielen Vorteilen verbunden:

• Unendliche Skalierbarkeit: SVGs bleiben gestochen scharf, selbst bei Zoom oder auf Retina-Displays.
• Dateigröße und Ladegeschwindigkeit: SVGs sind deutlich kleiner als PNGs und JPGs desselben Motivs und verbessern daher die Website-Performance und Benutzerfreundlichkeit.
• Nachhaltigkeit: Schnellere Ladezeiten und kleinere Dateigrößen führen zu einem geringeren Stromverbrauch der Rechenzentren, die die Websites bereitstellen. Dadurch sinkt der Website-CO₂-Ausstoß, ein Kriterium für eine nachhaltige Website.
• Einfache Erstellung und Konvertierung: SVGs können mit weit verbreiteten Bildbearbeitungsprogrammen wie Illustrator oder Canva erstellt oder konvertiert werden.
• Kompatibilität: Google indexiert SVGs und moderne Browser zeigen sie problemlos an.
• Flexibilität: SVGs können sogar animiert werden – eine effiziente Alternative zu GIFs.

Weitere Überlegungen

Weil SVGs Vektoren statt Pixel verwenden, um die Positionen von Bildelementen zu speichern, ist das Dateiformat für Fotografien oder komplexe 3D-Bilder ungeeignet. Wir halten dies aber nicht für einen Nachteil. Denn das wäre so wie die Behauptung, dass Celsius kein gutes Längenmaß für geografische Distanzen sei: Kein Format ist für jede erdenkliche Anwendung geeignet, aber SVGs sind großartig für ihren bestimmten Zweck.

Alternativtexte werden derzeit seitens SVGs nicht nativ unterstützt. Das schränkt zwar ihre Barrierefreiheit ein, aber es gibt bereits Workarounds. SVGs können bei unsachgemäßer Implementierung eine Sicherheitsgefahr darstellen – lesen Sie daher weiter, um zu erfahren, wie Sie SVGs auf sichere Art und Weise hochladen können.

Warum unterstützt WordPress keine SVGs?

Weil das SVG-Dateiformat auf XML basiert, kann eine SVG-Datei aktiven Code enthalten. Und dieser kann potenziell missbraucht werden. Als Vorsichtsmaßnahme erlaubt WordPress daher standardmäßig keine SVGs, um unerfahrene Nutzer vor Risiken zu schützen.

Warum ist es dennoch sinnvoll, SVGs in WordPress zu erlauben?

In der Praxis haben die meisten Website-Betreiber volle Kontrolle über ihre Inhalte und verwenden SVGs nur aus vertrauenswürdigen Quellen. In solchen Fällen sind SVGs nicht nur genauso sicher, sondern auch deutlich effizienter und skalierbarer als JPGs und PNGs. Für die meisten Website-Betreiber ist es daher sinnvoll, SVGs in WordPress zu erlauben.

So erlauben Sie SVG-Uploads in WordPress

Es gibt zwei Hauptmethoden, um SVGs in WordPress zu erlauben: Per Code Snippet für die functions.php Datei der Website oder per Plugin. Beide Lösungen gelten pro Website, nicht pro Theme.

1. Functions.php Code Snippet

Die einfachste Lösung: Fügen Sie dieses Snippet in die Datei functions.php Ihres Themes ein – wir bei svaerm verwenden es regelmäßig:

Wenn Sie dieses Code Snippet hinzugefügt haben, können Sie SVGs in Ihre WordPress-Mediathek hochladen und sie genauso verwenden wie andere Bildformate in WordPress.

2. SVG-Plugins

Um SVG in WordPress zu erlauben, können Sie auch eine bestimmte Art von Plugin installieren, wie z.B. WP SVG oder Safe SVG. Diese Plugins erlauben es Ihnen, SVG-Dateien in Ihre WordPress-Mediathek hochzuladen, können aber auch andere Features enthalten wie die Bereinigung ihres XML-Codes per „Sanitizer“ oder die Verwaltung von Upload-Rechten.

Welche Lösung ist die beste?

Obwohl beide Methoden Ihre Vor- und Nachteile haben, raten wir dringend, SVGs per Code Snippet zu erlauben und eigene SVG-Dateien zu erstellen – oder mit einer erfahrenen WordPress-Agentur zusammenzuarbeiten, die dies für Sie übernimmt. Diese Methode ist schneller, sicherer und effizienter und vermeidet, Ihre Website mit Premium-Plugins zu verkomplizieren, die andere Agenturen oder Blogartikel Ihnen vermutlich verkaufen möchten.

Bestimmte Plugins, insbesondere WordPress Pagebuilder, fügen unnötige Funktionen und Code zu Ihrer Website hinzu und erhöhen das Risiko, auf unerwartete Inkompatibilitäten zu stoßen, wenn WordPress oder PHP aktualisiert werden. Ihre redundanten Features können mit derer bestehender oder zukünftiger Plugins kollidieren. Selbst bei der Erstinstallation können Fehlermeldungen auftreten, die einen langen Troubleshooting-Prozess mit sich bringen. Wir empfehlen grundsätzlich, die Anzahl der verwendeten WordPress-Plugins so gut wie möglich zu limitieren.

Wenn Sie jedoch mehreren Nutzern den Upload ermöglichen müssen oder keine eigenen SVGs erstellen können, ist ein Plugin mit Bereinigungsfunktion dennoch eine mögliche Lösung.

Fazit

SVGs sind ein wichtiger Bestandteil moderner Webentwicklung. Sie sind effizient, skalierbar, und lassen sich per Code Snippet oder Plugin sicher in WordPress integrieren.

Wir hoffen, dass dieser Beitrag Ihnen geholfen hat, den passenden Weg für Ihr Projekt zu finden. Bei svaerm setzen wir auf eine ganzheitliche Betrachtung und umfassende Situationsanalyse, um nachhaltige, effiziente und benutzerfreundliche Lösungen für unsere Kunden und ihre Zielgruppen zu entwickeln.

Klingt das nach der richtigen Herangehensweise in Webdesign und Projektmanagement für Sie? Dann schreiben Sie uns gerne über das untenstehende Kontaktformular. Nach Erhalt einer schriftlichen Erstinformation zu Ihrem Projekt beraten wir Sie auch gerne persönlich per Telefon, per Videokonferenz oder vor Ort.

Kontaktmöglichkeit für Unternehmen