How to Export SVG From Figma the Right Way

Figma’s SVG export is free and genuinely good – but it makes quiet structural decisions about your file that surface later as bugs: icons that vanish when inlined, text that changes font on other machines, sizes that aren’t what you expected. Exporting right takes one extra minute and prevents all of it.

The basic export

1. Select what to export – and select the frame, not the bare vector (more below).
2. Right panel → Export section → +.
3. Format dropdown → SVG.
4. Export [name].

Multiple assets export in one go if each has an export setting – select a parent and Figma exports every configured child.

Why “export the frame” matters

Exporting a bare shape crops the SVG to that shape’s exact bounds – no padding, and a viewBox of arbitrary dimensions. Exporting the frame gives the SVG the frame’s size as its coordinate system: your 24×24 icon frame becomes a viewBox="0 0 24 24" SVG with the icon positioned as designed.

For icon work this is the difference between a consistent set and a pile of randomly-sized files. Convention: design icons in standard frames (16/20/24/32), export frames, never bare paths.

The three hidden options (⋯ menu on the SVG export row)

“Include id attribute” – writes every layer name as an id into the markup. Leave off unless your code targets those ids: they bloat the file, and Figma’s auto-names (clip0, vector-1) collide when you inline several exports on one page, breaking clip-paths in ways that look like random invisible icons. (The fix for existing collisions: optimizer de-duplication.)

“Outline text” – converts text to paths. On for logos and deliverables (renders identically without fonts); off only when the destination controls fonts and needs editable/accessible text. The full trade-off: text to SVG.

“Simplify stroke” – flattens strokes into filled outline shapes where needed. Generally leave on; turn off if downstream tools need editable stroke properties.

What Figma silently changes anyway

Export-time surprises worth expecting:

• Raster effects rasterize. Drop shadows, layer blurs, background blurs – these aren’t vector operations, so Figma embeds them as raster patches inside your SVG. The export looks right but carries pixels; at scale they blur. For pure vectors, remove effects before export or rebuild them as SVG-native (e.g., real vector shadows). This is the root of most “why is my SVG export pixelated” reports.
• Masks become <clipPath> wrappers – correct but verbose, and the source of the id-collision issue above.
• Images stay images. Photo fills export as embedded rasters; that’s unavoidable and fine when intended.
• Exotic blend modes may flatten – check anything using multiply/overlay against the export.

The 60-second post-export pass

For every Figma SVG headed to production:

1. Render it standalone – paste into the code editor. Outside Figma’s canvas is where font and reference problems show.
2. Optimize – Figma exports are verbose; expect 30–60% size reduction plus id de-duplication and metadata stripping.
3. Spot-check the structure if it’s going into code: viewBox sensible? No surprise <image> tags? Fills where you expect them (for currentColor conversion)?

For raster destinations

When the target wants pixels instead (email, marketplaces, app stores): export PNG at 2×–4× scale directly from Figma, or render any existing SVG export at exact scale via SVG to PNG. Never resize the raster afterward – re-render from vector instead (why).

The deeper reference – settings, failure modes, dev-handoff workflow: Figma SVG export hub.