Das Icon-Element in Elementor bietet die Möglichkeit, beliebige SVGs einzubinden. Außerdem lassen sich Farbe und Größe anpassen. Lädt man eigene SVG-Dateien hoch, funktionieren oftmals die Farb- und Größenanpassungen nicht. Nachfolgend finden Sie einen Lösungsansatz, um die SVG möglichst flexibel in Elementor verwenden zu können.
Wenn Sie eine SVG aus Adobe Illustrator exportieren, dann lauten sinnvolle Einstellungen wie folgt:
Styling > Presentation AttributesFont > Convert To OutlinesImages > EmbedObject IDs > Layer NamesDecimal > 2Minify > AktivResponsive > InaktivFalls Sie die Größe des Icons nicht über Elementor verändern können, ist im Code der SVG vermutlich eine feste Höhe und Breite hinterlegt. Laden Sie Ihre SVG unter SVGOMG hoch. Aktivieren Sie rechts in den Einstellungen die Option Prefer viewBox to width/height. Dadurch wird die feste Größenangabe aus dem Quellcode der SVG entfernt, was Elementor die Kontrolle darüber erlaubt. Laden Sie die SVG abschließend von SVGOMG herunter.
Öffnen Sie die SVG in einem Code-Editor. Suchen Sie nun im Dokument nach dem Attribut fill, beispielsweise fill="#c7c4c4". Entfernen Sie alle Vorkommnisse des Attributs. Ähnlich wie bei der Größe entfernen Sie dadurch die feste Angabe einer Farbe, was Elementor wiederum die Kontrolle über den Wert erlaubt.