SVG zu Webflow — Icons als Elemente kopieren & einfügen

Warum SVG-Icons in Webflow als Embeds einfügen?

Ein Icon als Bild-Asset hochzuladen funktioniert, aber dann sind die Farben des SVGs festgelegt: Du kannst sie nicht beim Hover, im Dark Mode oder pro Komponente ändern. Fügst du den SVG-Code in ein Code Embed ein, wird er Teil der Seite und erbt CSS. Mit fill="currentColor" übernimmt das Icon einfach die Schriftfarbe des Elements, und Webflow-Interaktionen oder Hover-Zustände können die Farbe ändern.

Was der Cleaner macht

• Entfernt die XML-Deklaration, Kommentare, <metadata> und Editor-Attribute aus Figma, Illustrator, Inkscape und Sketch.
• Ersetzt fest codierte fill- und stroke-Farben durch currentColor (none und Verlaufsreferenzen bleiben erhalten).
• Ergänzt ein viewBox, falls es fehlt, und setzt Breite/Höhe auf 100 %, damit das umschließende div die Größe bestimmt.
• Markiert dekorative Icons mit aria-hidden="true" und ergänzt bei aussagekräftigen Icons role="img" sowie eine Beschriftung.
• Entfernt Skripte und Inline-Event-Handler aus Sicherheitsgründen und verkleinert das Ergebnis.

Custom Elements vs. Code Embed

Mit dem Custom Element in Webflow kannst du beliebige HTML-Tags anlegen – darunter svg, path, g, circle und linearGradient – und ihnen Attribute geben. So aufgebaut besteht ein Icon aus echten Designer-Elementen: Du siehst jeden Pfad im Navigator, kannst einzelnen Teilen Klassen zuweisen, sie mit Interaktionen animieren, Attribute an CMS-Felder binden und Werte ohne Code bearbeiten. Ein Code Embed ist dagegen ein einzelner HTML-Block: einfacher, aber im Designer eine Blackbox.

So funktioniert „Nach Webflow kopieren“

Wenn du im Webflow Designer Elemente kopierst, legt Webflow eine JSON-Beschreibung davon in die Zwischenablage. Dieses Tool erzeugt aus deinem SVG dieselbe Art von Daten – ein Custom Element pro Tag, mit allen Attributen und der gewählten Größe am Wurzel-svg (oder an einer optionalen Klasse). Beim Einfügen entstehen so native Elemente. Webflow dokumentiert dieses Zwischenablage-Format nicht offiziell. Ändert ein künftiges Webflow-Update es, bietet das Tool deshalb eine Kalibrierung als Fallback: Kopiere ein beliebiges Custom Element aus deinem Webflow Designer, füge es in das Kalibrierungsfeld ein, und das Tool lernt das aktuelle Format und nutzt es ab dann (nur lokal in deinem Browser gespeichert).

Tipps für Icons in Webflow

• Standardmäßig wird keine Klasse hinzugefügt. Wenn du einheitliche Größen möchtest, vergib einen Klassennamen und verwende ihn wieder; nutze flexible Einheiten, wenn sich Icons mit dem Text skalieren sollen.
• Sehr große oder komplexe SVGs (Illustrationen, Karten) eignen sich besser als Bild-Assets – Embeds haben ein Zeichenlimit (derzeit 50.000).
• Für SVG-Hintergründe oder Masken nutze das Tool SVG zu CSS; für React-Projekte SVG zu JSX.

Auch gesucht als: svg embed webflow, figma zu webflow, svg icon einfügen, currentcolor, webflow clipboard, svg code einbetten.

Passende Tools zu: SVG zu Webflow

• Figma CSS zu Webflow — Verwandle Figmas „Copy as CSS“-Ausgabe in saubere Werte, die du direkt ins Webflow-Style-Panel eintragen kannst.
• Markdown zu Webflow Rich Text — Markdown einfügen, die Vorschau prüfen und als formatierten Rich Text kopieren.
• Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
• WordPress zu Webflow Weiterleitungen — Beim Umzug einer Seite von WordPress zu Webflow ändert sich fast jede URL: datierte Blog-Pfade, /category/-Archive, Schrägstriche am Ende und Seiten-Slugs.