Wenn du ein SVG Icon in Elementor hochlädst, möchtest du die Farbe oft direkt im Editor anpassen. Genau hier taucht aber ein häufiges Problem auf: Manche SVG Icons lassen sich problemlos einfärben, andere bleiben immer schwarz oder behalten ihre ursprüngliche Farbe. In diesem Tutorial zeige ich dir, wie du SVG Dateien in Elementor hochladen kannst und warum sich manche SVG Icons in Elementor nicht einfärben lassen.
SVG Upload in Elementor aktivieren
Standardmäßig blockiert WordPress den Upload von SVG-Dateien. Wenn du eine SVG hochladen möchtest, erscheint meist eine Meldung wie „Dieser Dateityp ist aus Sicherheitsgründen nicht erlaubt“.
Der Grund ist, dass SVG-Dateien theoretisch auch Code enthalten können. Deshalb blockiert WordPress diesen Dateityp zunächst.
Damit du SVG Icons in Elementor hochladen kannst, musst du den Upload zuerst aktivieren.
SVG Upload in den Elementor Einstellungen aktivieren
Elementor bietet dafür eine eigene Einstellung.
Gehe in WordPress zu:
Elementor → Editor → Einstellungen → Erweitert
Aktiviere dort die Option:
Ungefilterte Dateiupload aktivieren
Danach kannst du SVG-Dateien direkt über die WordPress Mediathek oder über Elementor hochladen.
SVG Upload über die wp-config.php erlauben
Alternativ kannst du den Upload auch direkt über WordPress erlauben.
Öffne dazu im Dateinvereichnis deines Webspace die Datei wp-config.php und füge folgende Zeile hinzu:
define('ALLOW_UNFILTERED_UPLOADS', true);
Damit erlaubt WordPress ebenfalls den Upload von SVG-Dateien.
💡 Expertentipp: Wenn Besucher auf deiner Website Dateien über Formulare hochladen dürfen, zum Beispiel über ein Elementor Formular, kann ein zusätzliches Plugin sinnvoll sein. Einige Plugins prüfen SVG-Dateien automatisch und helfen dabei, Uploads sicherer zu machen.
SVG in Elementor hochladen
Nachdem du den SVG Upload aktiviert hast, kannst du die Datei ganz normal in Elementor verwenden. Am einfachsten funktioniert das über das Bild-Widget.
SVG über das Bild-Widget einfügen
Öffne die gewünschte Seite im Elementor Editor und ziehe das Bild-Widget auf deine Seite.
Klicke anschließend auf Bild auswählen. Dadurch öffnet sich die WordPress Mediathek.
SVG Datei in die Mediathek hochladen
Falls deine SVG-Datei noch nicht hochgeladen ist, kannst du sie direkt in der Mediathek hinzufügen.
Klicke auf Dateien hochladen und lade deine SVG-Datei hoch. Danach kannst du sie auswählen und in die Seite einfügen.
Nach dem Einfügen erscheint das SVG auf der Seite wie ein normales Bild. Du kannst es jetzt positionieren, skalieren oder mit anderen Elementor Widgets kombinieren.
SVG Icon auf der Seite verwenden
Nachdem du die SVG-Datei in die Mediathek hochgeladen hast, kannst du sie in Elementor als Icon auf der Seite einsetzen. Dafür gibt es zwei typische Möglichkeiten.
SVG im Icon-Widget verwenden
Ziehe im Elementor Editor das Icon-Widget auf deine Seite.
Wenn du mit der Maus im Icon-Fenster bist kannst du oben auf SVG hochladen klicken und deine SVG-Datei auswählen.
Du kannst dann aus allen aus der Mediathek hochgeladenen SVG Dateien auswählen oder ein weiteres Icon hochladen. Nach dem Einfügen wird das SVG als Icon dargestellt und kann wie jedes andere Elementor Icon verwendet werden.
Widgets mit Icons nutzen
Viele Elementor Widgets enthalten ebenfalls Icons, zum Beispiel:
- Icon Box
- Icon Liste
- Call to Action
- Button mit Icon
Auch dort kannst du eine eigene SVG-Datei hochladen.
Klicke dazu beim jeweiligen Widget auf Icon auswählen und lade deine SVG-Datei hoch.
Der Vorteil: Diese Widgets sind bereits für Icons optimiert und ermöglichen später auch einfacher, die Farbe des SVG Icons in Elementor zu ändern.
Icon SVG Farbe in Elementor ändern
Wenn du ein SVG Icon in Elementor verwendest, kannst du die Farbe meist direkt im Editor anpassen.
Klicke dafür auf das Widget, in dem sich dein Icon befindet, zum Beispiel:
- Icon Widget
- Icon Box
- Button mit Icon
Wechsle anschließend zum Tab:
Stil
Dort findest du die Einstellung Primäre Farbe. Über diese Option kannst du die Farbe des SVG Icons ändern.
💡 Hinweis: Die Farbänderung funktioniert nur, wenn das SVG Icon korrekt aufgebaut ist. Manche SVG-Dateien enthalten feste Farbwerte und lassen sich deshalb in Elementor nicht einfärben. Im nächsten Abschnitt zeige ich dir, warum das passiert und wie du solche SVG-Dateien anpassen kannst.
Warum sich bei manchen SVG Icons die Farbe nicht ändern lässt
Manchmal lädst du ein SVG Icon in Elementor hoch und kannst die Farbe im Stil-Tab nicht ändern. Egal welche Farbe du auswählst, das Icon bleibt schwarz oder behält seine ursprüngliche Farbe.
Der Grund liegt meist direkt im SVG Code.
Viele SVG Dateien enthalten eine fest definierte Farbe, zum Beispiel:
<path fill="#000000" d="..."/>
Hier im Beispiel ist die Farbe fest gesetzt. Elementor kann diese Farbe nicht überschreiben, weil sie direkt im SVG definiert ist.
Damit Elementor die Farbe steuern kann, muss stattdessen folgende Variante verwendet werden:
<path fill="currentColor" d="..."/>
Mit currentColor übernimmt das SVG automatisch die Farbe, die du im Elementor Editor einstellst.
SVG Datei anpassen (damit Farbe in Elementor funktioniert)
Wenn sich dein SVG Icon nicht einfärben lässt, kannst du die Datei meist schnell anpassen.
Öffne die SVG Datei in einem Editor, zum Beispiel:
- VS Code
- Notepad++
- oder einem normalen Texteditor
Suche im Code nach Einträgen wie:
fill="#000000"
oder
fill="#333333"
Diese festen Farben ersetzt du durch:
fill="currentColor"
Speichere anschließend die Datei und lade das SVG erneut in WordPress hoch.
Typische Probleme
Beim Arbeiten mit SVG-Dateien in Elementor treten immer wieder ein paar typische Probleme auf. Die folgenden Punkte helfen dir, die häufigsten Ursachen schnell zu finden.
SVG Upload blockiert
Wenn sich die SVG-Datei gar nicht erst hochladen lässt, ist der Upload in WordPress oder Elementor noch nicht freigeschaltet.
Prüfe zuerst unter:
Elementor → Einstellungen → Erweitert
ob die Option Nicht gefilterte Dateiuploads aktiviert ist.
Alternativ kannst du den Upload auch über die wp-config.php erlauben.
Icon bleibt schwarz
Wenn dein SVG Icon schwarz bleibt, obwohl du in Elementor eine andere Farbe auswählst, liegt das meistens an einer fest definierten Farbe im SVG-Code.
Typisch ist zum Beispiel:
fill="#000000"
In diesem Fall kann Elementor die Farbe nicht überschreiben.
Die Lösung ist, den SVG-Code anzupassen und feste Farbwerte durch currentColor zu ersetzen.
SVG wird als Bild behandelt
Wenn du eine SVG-Datei über das Bild-Widget einfügst, wird sie in Elementor zunächst wie ein normales Bild behandelt. Dann kannst du die Farbe meist nicht direkt im Editor ändern.
Wenn du die SVG-Farbe in Elementor anpassen möchtest, solltest du das SVG möglichst über ein Icon Widget oder ein Widget mit Icon-Funktion verwenden, zum Beispiel eine Icon Box.
Elementor SVG hochladen und Icon Farbe ändern: Kurz zusammengefasst
Wenn du SVG Icons in Elementor verwenden möchtest, musst du zuerst den SVG Upload in WordPress oder Elementor aktivieren. Danach kannst du deine SVG-Datei ganz normal in die Mediathek hochladen und über Widgets wie das Icon Widget oder eine Icon Box auf der Seite einsetzen.
Ob sich die Icon Farbe in Elementor ändern lässt, hängt vom Aufbau der SVG-Datei ab. Icons mit currentColor lassen sich direkt im Stil-Tab einfärben. Enthält das SVG dagegen feste Farbwerte wie fill="#000000", musst du die Datei zuerst anpassen, damit Elementor die Farbe steuern kann.
