Wie ein SVG auf einer Seite zu nativen Figma-Vektoren wird

Ein SVG auf einer Webseite wird zu einem nativen Figma-Vektor, wenn Figma seine Formen als Geometrie liest und nicht als Bild. Das Figma Help Center sagt, ein importiertes SVG werde "nicht mehr als Bild behandelt" und in eine bearbeitbare Vektorebene umgewandelt. Zwei SVG-Elemente werden laut Dokumentation nicht übernommen: Marker und Pattern. Im Folgenden steht, warum das so ist und wie du das Ergebnis prüfst.

Was in einem SVG-Pfad steckt

Die meisten Icons und Logos auf einer Seite bestehen aus ein paar <path>-Elementen. Wenn du einen Pfad lesen kannst, weißt du, was Figma nachbauen muss.

Das d-Attribut

MDN beschreibt das Element <path> als die mächtigste der einfachen SVG-Formen. Es kann Linien, Kurven, Bögen und mehr zeichnen. Seine Form wird durch einen einzigen Parameter definiert, d, der eine Reihe von Befehlen und deren Parameter enthält. Koordinaten in d sind einheitenlos und liegen im Benutzerkoordinatensystem, sodass derselbe Pfad auf jede dargestellte Größe skaliert.

Die Befehle

Jeder Befehl ist ein einzelner Buchstabe. M bewegt den Cursor, L zeichnet eine gerade Linie und Z schließt den Pfad. Es gibt drei Arten von Kurven: C ist eine kubische Bézierkurve mit zwei Kontrollpunkten, Q ist eine quadratische Bézierkurve mit einem Kontrollpunkt, und A ist ein Bogen, der durch x- und y-Radius, eine Drehung, ein Large-Arc-Flag, ein Sweep-Flag und einen Endpunkt definiert ist. Ein Großbuchstabe steht für absolute Koordinaten. Ein Kleinbuchstabe steht für Koordinaten relativ zum letzten Punkt.

• M / m: Bewegen zu, nimmt einen Endpunkt.
• L / l: Linie zu, nimmt einen Endpunkt.
• C / c: kubische Bézierkurve, nimmt zwei Kontrollpunkte und einen Endpunkt.
• Q / q: quadratische Bézierkurve, nimmt einen Kontrollpunkt und einen Endpunkt.
• A / a: Bogen, nimmt Radien, Drehung, zwei Flags und einen Endpunkt.
• Z / z: Pfad schließen, nimmt keine Parameter.

Quelle für die Liste: MDN, SVG-Pfade.

Einfache Formen und Pfade

<polyline>, <polygon>, <circle> und <ellipse> sind Kurzformen für häufige Fälle. MDN weist darauf hin, dass ein Pfad alles kann, was diese Formen können, und dass Bögen Mühe haben, vollständige Kreise und Ellipsen zu zeichnen, weshalb ein echter <circle>-Knoten oft einfacher ist. Designer interessiert das selten. Einen Konverter schon: Ein einziger Pfad kann eine ganze Illustration beschreiben, also müssen die Pfaddaten überleben.

Ein durchgerechnetes Beispiel

Hier ist eine kleine geschlossene Form, ein abgerundeter Reiter, als ein einziger Pfad geschrieben:

<path d="M 10 10 H 90 V 60 C 90 80, 70 90, 50 90 C 30 90, 10 80, 10 60 Z" />

Lies es von links nach rechts. M 10 10 setzt den Cursor. H 90 zeichnet eine horizontale Linie bis x = 90, und V 60 zeichnet eine vertikale Linie nach unten bis y = 60. Die beiden C-Befehle zeichnen jeweils eine kubische Bézierkurve mit zwei Kontrollpunkten, die erst in der unteren Mitte und dann am linken Rand endet. Z schließt den Pfad zurück zum Anfang. Das sind sechs Befehle und nirgends eine Einheit, weil die Koordinaten im Benutzerkoordinatensystem liegen. In Figma sind genau diese Daten das, was eine Vektorebene enthält: Ankerpunkte, verbunden durch gerade Segmente und Kurven, weshalb du danach einen Punkt ziehen kannst.

Was Figma mit einem SVG macht

Figma dokumentiert zwei Wege hinein, und für das Wesentliche verhalten sie sich gleich.

1. Eine Datei importieren. Das Figma Help Center gibt an, dass eine importierte SVG-Datei nicht mehr als Bild behandelt wird. Sie wird in eine bearbeitbare Vektorebene umgewandelt.
2. Aus der Zwischenablage einfügen. Laut Figmas Anleitung zum Kopieren von Assets zwischen Designwerkzeugen kopierst du das Asset als SVG, klickst mit der rechten Maustaste auf die Arbeitsfläche der Figma-Design-Datei und wählst Paste here. Jede Person mit Bearbeitungszugriff kann einfügen.

Figma empfiehlt SVG für den Austausch von Assets zwischen Werkzeugen, weil es ein verlustfreies Format ist. Dieselbe Seite nennt die einzige dokumentierte Lücke: SVG-Elemente vom Typ marker und pattern werden nicht in den Import aufgenommen.

Das ist die vollständige Liste auf Figmas eigenen Seiten Stand 2026. Weitere nicht unterstützte Elemente führen sie nicht auf. Behandle also alles Ungewöhnliche, etwa Filter oder Masken, als etwas, das du prüfst, statt es vorauszusetzen. Die benachbarte Frage der Füllungen behandelt CSS-Verläufe in Figma.

Import und Einfügen unterscheiden sich auch darin, woher das SVG kommt. Ein Dateiimport beginnt bei einer gespeicherten .svg. Ein Einfügen beginnt bei dem, was das Quellwerkzeug in die Zwischenablage legt, das Ergebnis hängt also davon ab, dass dieses Werkzeug SVG-Code schreibt und keine Bitmap. Figmas Hilfeseite zum Kopieren von Vektoren aus Adobe Illustrator beschreibt diesen Fehler für eine Designanwendung: Fehlt der SVG-Code in der Zwischenablage, werden Vektoren als statische Bilder eingefügt. Kommt eine eingefügte Form als flaches Bild an, ist der Inhalt der Zwischenablage der erste Verdächtige, nicht das SVG selbst.

Auf einer ganzen Seite ist das SVG nur ein Teil der Umwandlung. Die Produktseite von UnHTML gibt an, dass SVG zu nativen Figma-Vektoren wird und dass WebP- und AVIF-Bilder in PNG umcodiert werden. Sie sagt nicht, welche SVG-Funktionen unterstützt werden oder was mit nicht unterstützten geschieht, daher ist die oben zitierte Figma-Dokumentation der bessere Wegweiser für die Grenzen.

Warum Vektoren besser sind als ein Rasterersatz

Eine Vektorebene behält ihre Ankerpunkte. Du kannst einen Knoten auswählen, eine Kurve ändern, eine Füllung umfärben oder das Icon skalieren, ohne die Kanten weichzuzeichnen. Ein Rasterersatz liefert dir eine Bitmap, die du nur innerhalb der Grenzen ihrer Pixel skalieren kannst.

Der Unterschied zeigt sich, wenn du ein Icon wiederverwendest. Bei Vektorgeometrie bearbeitest du es einmal. Bei einer Bitmap zeichnest du es neu. Dieselbe Lücke trennt einen nativen Import von einem Screenshot plus Bildvektorisierung, bei der das Vektorisierungswerkzeug die Geometrie errät, die das SVG bereits exakt angibt.

Die Gegenrichtung: Was Figma zurück in SVG schreibt

Hin- und Rückwege zeigen, wie Figma Formen speichert. Laut Figmas Exportdokumentation verhält sich der SVG-Export so:

• Konturen werden in Füllungen umgewandelt.
• SVG unterstützt nur mittig ausgerichtete Konturen, daher ist Simplify stroke bei Vektornetzwerken mit innen oder außen liegenden Konturen standardmäßig aktiv. Schaltest du es aus, erhöht Figma die Konturstärke und wendet eine Maske an, was dem SVG-Code zusätzliche Linien hinzufügt.
• Text wird standardmäßig als Glyphen exportiert. Schalte Outline text aus, damit er bearbeitbar bleibt.
• SVG wird nur in 1x exportiert.

Ein SVG, das du exportierst und erneut importierst, kann also eine andere Struktur haben als das Original, selbst wenn es identisch aussieht. Eine Linie mit Kontur in der Quelle kann als gefüllte Form zurückkommen.

Das Ergebnis nach dem Import prüfen

Führe diese Prüfungen aus, sobald ein SVG in Figma gelandet ist:

1. Wähle die Ebene aus und bestätige, dass sie ein Vektor ist und keine Bildfüllung.
2. Suche nach fehlenden Linienenden (Marker) und wiederholten Füllungen (Pattern), den beiden dokumentierten Auslassungen.
3. Vergleiche die Konturstärke mit der Seite, da Konturen als gefüllte Formen ankommen können.
4. Prüfe die Ebenenanzahl, denn ein komplexer Pfad kann zu einer Ebene werden, während eine gruppierte Illustration zu vielen wird.

Rahmen und Konturen umgebender Elemente folgen anderen Regeln, die unter was einen Import übersteht behandelt werden. Wenn du eine ganze Seite mit UnHTML importierst, listet der Importbericht auf, welche Bilder übersprungen wurden, sodass sich SVG-Probleme leichter von Rasterproblemen trennen lassen.

Fazit

Ein SVG ist als Text geschriebene Geometrie, und Figma liest diese Geometrie in bearbeitbare Vektorebenen ein. Die dokumentierten Lücken sind Marker und Pattern. Alles andere verdient einen kurzen Blick, denn die Dokumentation verspricht keinen Klon der Quelle.