tl;dr: Icons sind wesentliche und stilbildende Gestaltungselemente in einer Website. SVG-Icons bieten die größte Flexibilität, gerade auch im Zusammenhang mit der Verwendung von Elementor.
Das Grafikformat SVG (Scalable Vector Graphics) gibt es seit 2001 und ist eine vom W3C empfohlene Spezifikation für 2dimensionale Vektorgrafiken. SVG wird von allen gängigen Browsern unterstützt und wird auch von Google und Bing erkannt (Bildanalyse), kann also ohne Einschränkungen empfohlen werden.
SVG basiert auf XML. Eine SVG-Grafik ist also eigentlich eine Text-Datei die beschreibende Informationen enthält. Im Unterschied zu Bildformaten wie jpg oder png werden SVG-Grafiken normalerweise nicht einfach in den Browser geladen und angezeigt, sondern es wird der Text der SVG-Datei gelesen und danach werden die grafischen Anweisungen direkt im Browser interpretiert. Die Grafiken werden also, jedesmal wenn eine SVG-Grafik angezeigt wird, neu berechnet.
Das schafft auf der einen Seite jede Menge Möglichkeiten, dieses Rendering des Browsers zB. durch CSS zu verändern. Auf der anderen Seite heisst das aber auch, dass man erst speziell zulassen muss, dass diese Art der Datei im Upload akzeptiert wird. Das hat natürlich wieder einmal mit Websicherheit zu tun.
Die beiden Bilder zeigen die selbe Datei: einmal als Grafik, einmal als lesbarer Textcode. Die selbe Zahngrafik kann also entweder als Bild oder als Text eingebettet werden. Links:
Als Textdatei zeigt sich, wie so eine SVG definiert wird: wie die Punkte, Pfade und Füllungen gesetzt sind, beschreibt das SVG-Markup exakt. Alle Informationen sind in dieser Datei enthalten.
Das geniale an dem Format ist jetzt aber, dass man die selbe Grafik auch direkt als Code in ein HTML-Dokument einbetten kann. Damit gewinnt man alle CSS-Gestaltungsmöglichkeiten, verliert aber den Vorteil des separaten, cachebaren Files.
Die selbe Grafik links wurde nun wie folgt eingebettet:
Wir sehen also, dass statt dem HTML-tag <img> der Tag <svg> direkt verwendet wird. Dh es stehen hier nicht mehr nur die bekannten Möglichkeiten zur Verfügung das Bild anzuzeigen sondern ich kann mit damit mehr tun, natürlich auch skalieren, wie ja das Akronym SVG für Scalable Vector Graphics schon vermuten lässt. Natürlich muss man sich darüber nicht wirklich Gedanken machen, das erledigen WordPress und Elementor für uns.
Icons selber erstellen
Wer jetzt selber seine Icons zeichnen will benötigt eine Software die Vektordateien herstellen kann und das SVG-Format auch im Export unterstützt. Es gibt hier natürlich eine ganze Reihe von (auch kostenfreien) Angeboten. Ich empfehle den Affinity. Dieser wurde auch zur Herstellung unseres Beispielbildes verwendet, ist kostenfrei, kann viel und liegt für Win und Mac vor.
Einem gefüllten Kreis wurde per Flächensubtraktion ein Zahnrad abgezogen.
Tips bei der Erstellung von Icons in SVG:
Die Grafik wurde in Schwarz auf transparentem Hintergrund erstellt. die Datei selber ist 400 x 400 px angelegt. Mit dem Ellipsenwerkzeug wurde ein Kreis erstellt, mit dem Zahnradwerkzeug ein ebensolches. Das darüberliegende Zahnrad wurde dann mittels geometrischer Funktion abgezogen, also quasi herausgeschnitten. Danach erfolgt der Export als SVG-Datei mit dem Ergebnis, das wir als erste Grafik (und als Text) oben schon kennengelernt haben.
Tips bei der Erstellung von Icons in SVG:
immer nur mit voller Farbe/Schwarz arbeiten
keine Texte verwenden (=in Pfade umwandeln)
keine sehr komplexen Pfade erstellen
Der manchmal schlechte Ruf des SVG-Formates kommt von den vielen Problemen, die man sich einhandeln kann, wenn man SVG einfach als Vektorformat für’s Web versteht. Im Unterschied zum Einsatz von Vektorgrafiken im Druck haben wir im Web viel weniger Ausgabemöglichkeiten. Wikipedia hat sogar eine deutsche Seite für SVG-Probleme. Hier wollen wir uns nur damit beschäftigen SVG-Grafiken als Icons zu verwenden, und das klappt normalerweise hervorragend.
Icons im Elementor einsetzen
Es gibt 4 Widgets im Elementor, bei denen eigene SVG-Icons eingesetzt werden können.
Es gibt 4 unterschiedliche Widgets, die zum Einbau von SVG-Icons geeignet sind:
Icon: Ein einzelnes Icon, mit Link-Möglichkeit, Größenangabe und Gestaltungsoptionen.
Icon Box: Icon kombiniert mit Titel und Beschreibungstext, mit Link-Möglichkeit.
Icon List: Eine Liste mit Icons als Aufzählungszeichen.
Social Icons: Vordefinierte Icons für Social Media Kanäle.
Bei allen 4 ist die Funktionalität im Wesentlichen gleich. Man wählt entweder ein Icon aus der Bibliothek oder lädt ein eigenes SVG hoch.
Die Icon-Bibliothek
Wer keine eigenen Icons gestalten will kann auf das reichhaltige Font Awesome Icon-Set zurückgreifen, das im Elementor integriert ist. Hier stehen hunderte Icons kostenlos zur Verfügung.
Wer eine Pro-Lizenz von Elementor einsetzt kann ausserdem eigene Bibliotheken von Fontello, IcoMoon oder Fontastic hochladen. Wir benutzen jedoch hier die Option SVG hochladen, um unser eigenes Icon in die Mediathek zu laden.
Vor dem ersten Upload muss man übrigens den Dateityp SVG explizit erlauben (Popup Warnung erscheint!). Grund hierfür ist, dass wir ja eine Datei uploaden die ev. auch Schadcode enthalten könnte. der Code der SVG-Datei wird ja vom Browser interpretiert, also könnte man damit ev. auch Unerwünschtes anstellen.
eine Option, um das generell zu regeln. Elementor versucht hier ev. korrupte SVG oder json-Dateien zu erkennen. Ist das mal geklärt werden .svg wie andere Dateien auch über die Mediathek verwaltet.
SVG mit CSS gestalten und animieren
Neben der normalerweise kleinen Dateigröße ist vor allem die Flexibilität von SVG-Icons ein Grund, diese einzusetzen. Die grundlegenden Optionen sind Farbe, Größe, Drehung die für die Normalansicht eingestellt werden können, Im Hover kann man dann auch die Farbe bei Mauskontakt ändern. In diesem kleinen Video wird das demonstriert:
Damit kommt man schon mal recht weit. Und da man mit CSS vieles was man gestalten kann auch irgendwie animieren kann hat uns Elementor einige Animationsarten spendiert, die hier demonstriert werden (mit dem Cursor über die Icons fahren):
Animation wählen
Animation: Grow
In den Beispielen oben wurde das Widget Icon-Box verwendet. Die CSS-Animation taucht im Stil-Reiter unter Hover auf. Diese Animationen sind auch beim Widget Icon möglich.
Bei Icon-Listen können keine Animationen für die Icons gesetzt werden, jedoch kann eine andere Farbe eingestellt werden. Bei den Social-Icons hingegen können Animationen bei Mauskontakt gesetzt werden (für die ganze Liste).
Fazit
Die Vorteile von SVG-Icons im Vergleich zu anderen Bildformaten für Icons sind deutlich: skalierbar ohne Qualitätsverlust, per CSS gestaltbar und animierbar, oft kleiner als vergleichbare Rastergrafiken.
Es ist sinnvoll Icons zur Unterstützung der visuellen Benutzeroberfläche einzusetzen. Gut gewählte Icons helfen dem User schneller zu verstehen worum es geht. SVG-Icons sind dabei das flexibelste Werkzeug.
Veröffentlicht am: 12. Juni 2020 Letztes Update am: 15. August 2026
Sie sehen gerade einen Platzhalterinhalt von Google Maps. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von OpenStreetMap. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von reCAPTCHA. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
