How SVG on a Page Becomes Native Figma Vectors

An SVG on a web page becomes a native Figma vector when Figma reads its shapes as geometry instead of as a picture. Figma's help center says an imported SVG "is no longer treated as an image" and is converted into an editable vector layer. Two SVG elements are documented as not coming along: markers and patterns. Everything below explains why, and how to check the result.

What is inside an SVG path

Most icons and logos on a page are a handful of <path> elements. Read one path and you know what Figma has to rebuild.

The d attribute

MDN describes the <path> element as the most powerful of the SVG basic shapes. It can draw lines, curves, arcs, and more. Its shape is defined by one parameter, d, which holds a series of commands and the parameters those commands use. Coordinates in d are unitless and live in the user coordinate system, so the same path scales to any rendered size.

The commands

Each command is a single letter. M moves the cursor, L draws a straight line, and Z closes the path. Curves come in three kinds: C is a cubic Bezier with two control points, Q is a quadratic Bezier with one control point, and A is an arc defined by x and y radii, a rotation, a large-arc flag, a sweep flag, and an end point. An uppercase letter means absolute coordinates. A lowercase letter means coordinates relative to the last point.

• M / m: move to, takes an end point.
• L / l: line to, takes an end point.
• C / c: cubic Bezier, takes two control points and an end point.
• Q / q: quadratic Bezier, takes one control point and an end point.
• A / a: arc, takes radii, rotation, two flags, and an end point.
• Z / z: close path, takes no parameters.

Source for the list: MDN, SVG paths.

Basic shapes versus paths

<polyline>, <polygon>, <circle>, and <ellipse> are shorthand for common cases. MDN notes that a path can do everything those shapes do, and that arcs have trouble drawing complete circles and ellipses, which is why a real <circle> node is often easier. Designers rarely care. A converter does: one path can describe a whole illustration, so the path data is what has to survive.

A worked example

Here is a small closed shape, a rounded tab, written as one path:

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

Read it left to right. M 10 10 places the cursor. H 90 draws a horizontal line to x = 90, and V 60 draws a vertical line down to y = 60. The two C commands each draw a cubic Bezier curve with two control points, ending at the bottom center and then at the left edge. Z closes the path back to the start. That is six commands and no unit anywhere, because the coordinates sit in the user coordinate system. In Figma the same data is what a vector layer holds: anchor points joined by straight segments and curves, which is why you can drag a point afterward.

What Figma does with an SVG

Figma documents two entry points, and they behave the same way for the content that matters.

1. Import a file. Figma's help center states that when an SVG file is imported, it is no longer treated as an image. It is converted into an editable vector layer.
2. Paste from the clipboard. Per Figma's guide to copying assets between design tools, you copy the asset as an SVG, right-click the canvas in the Figma Design file, and choose Paste here. Anyone with can edit access can paste.

Figma recommends SVG for moving assets between tools because it is a lossless format. The same page carries the one documented gap: SVG marker and pattern elements will not be included in the import.

That is the full list in Figma's own pages as of 2026. They do not catalogue other unsupported elements, so treat anything unusual, such as filters or masks, as something to inspect rather than assume. The neighboring question of fills is covered in CSS gradients in Figma.

The import and paste routes also differ in where the SVG comes from. A file import starts from a saved .svg. A paste starts from whatever the source tool places on the clipboard, so the result depends on that tool writing SVG code and not a bitmap. Figma's help page on copying vectors from Adobe Illustrator describes this failure for one design app: when SVG code is missing from the clipboard, vectors paste as static images. If a pasted shape arrives as a flat image, the clipboard content is the first thing to suspect, not the SVG itself.

On a full page, the SVG is only one part of the conversion. UnHTML's product page states that SVG becomes native Figma vectors, with WebP and AVIF images transcoded to PNG. It does not say which SVG features are supported or what happens to unsupported ones, so the Figma documentation above is the better guide to the limits.

Why vectors beat a raster fallback

A vector layer keeps its anchor points. You can select a node, change a curve, recolor a fill, or resize the icon without softening the edges. A raster fallback gives you a bitmap that you can only scale within the limits of its pixels.

The difference shows up when you reuse an icon. With vector geometry you edit it once. With a bitmap you redraw it. The same gap separates a native import from a screenshot plus image trace, where the tracing tool guesses the geometry that the SVG already states exactly.

The reverse direction: what Figma writes back to SVG

Round trips expose how Figma stores shapes. Per Figma's export documentation, SVG export behaves like this:

• Strokes are converted into fills.
• SVG supports only center strokes, so Simplify stroke is on by default for vector networks with inside or outside strokes. If you turn it off, Figma increases the stroke weight and applies a mask, which adds extra lines to the SVG code.
• Text is exported as glyphs by default. Turn off Outline text to keep it editable.
• SVG exports only at 1x.

So an SVG you export and re-import can have a different structure from the original, even when it looks identical. A stroked line in the source can come back as a filled shape.

Checking the result after import

Do these checks after any SVG lands in Figma:

1. Select the layer and confirm it is a vector, not an image fill.
2. Look for missing line endings (markers) and repeated fills (patterns), the two documented omissions.
3. Compare stroke thickness against the page, since strokes may arrive as filled shapes.
4. Check the layer count, because one complex path can become one layer while a grouped illustration becomes many.

Borders and outlines on surrounding elements follow different rules, covered in what survives an import. If you import a whole page with UnHTML, the import report lists which images were skipped, so SVG problems are easier to separate from raster ones.

Takeaway

An SVG is geometry written as text, and Figma reads that geometry into editable vector layers. The documented gaps are markers and patterns. Everything else is worth a quick visual check, because the documentation does not promise a clone of the source.