SVG FOR FIGMA ·
Figma SVG Export Settings, Decoded
Every option in Figma's SVG export – what it changes in the markup, the right default for each, and the settings matrix for icons, logos, and illustrations.
Figma’s SVG export panel looks like three innocuous checkboxes. Each one restructures your output file. Here’s what every setting writes into the markup, with the right answer per asset type – so your exports stop being a coin flip.
Setting 1: “Include id attribute”
What it does: writes each Figma layer name into the SVG as an id – <path id="Vector 2" …>, <clipPath id="clip0_104_7">.
When on helps: your CSS/JS targets specific elements (#flame { animation: … }), or downstream tooling reads layer names.
When on hurts: everywhere else. Ids bloat markup, leak layer-naming habits into production, and – the real bug – collide across files. Figma names clips clip0_x_y in every export; inline two icons on one page and the second one’s clip resolves to the first one’s definition. Symptom: icons mysteriously invisible or half-clipped. (De-duplication fix for files already in the wild.)
Default: off.
Setting 2: “Outline text”
What it does: on → text becomes <path> geometry (frozen, font-independent). Off → text stays <text> elements (editable, accessible, renders with viewer’s fonts).
The decision is about who renders the file: your own site with webfonts loaded → live text keeps accessibility and SEO value. Anyone else’s machine – logos, downloads, cut files, client deliverables – outline, or watch your typeface silently swap for a default. (The full text trade-off.)
Default: on for deliverables, off for own-site inline assets.
Setting 3: “Simplify stroke”
What it does: controls whether strokes export as stroke properties (stroke="#000" stroke-width="2") or get expanded into filled outline shapes where necessary (Figma decides per-path based on stroke features like custom caps/joins it can’t express).
On (default): maximum visual fidelity, but some paths arrive pre-expanded – fine for display, less editable downstream.
Off: preserves stroke properties where possible – better for assets you’ll restyle in code (changing stroke-width per context), riskier for exotic stroke styling.
Default: leave on; flip off for icon systems built on editable strokes.
The matrix
| Asset | ids | Outline text | Simplify stroke |
|---|---|---|---|
| UI icons (inlined in code) | off | n/a (no text) | off if you restyle strokes |
| Logo deliverable | off | on | on |
| Illustration for web | off | on (or webfonts) | on |
| Animated SVG (CSS targets) | on (curated names) | depends | off |
| Cut files (Cricut etc.) | off | on | on |
Beyond the checkboxes: export-shaping habits
The settings only control markup details. The bigger output factors are structural:
- Export frames, not shapes – the frame defines the viewBox; bare-shape exports crop to arbitrary bounds. Standard icon frames (24×24) → standard
viewBox="0 0 24 24"files. (Got a missized export anyway? Fix the attributes rather than re-exporting.) - Flatten icon vectors before export (⌘E/Ctrl+E) – collapses Figma’s boolean-group scaffolding into single paths; smaller, cleaner markup.
- No raster effects on vector exports – shadows and blurs embed as pixels (the pixelation issue).
- Name export-relevant layers, if exporting ids –
id="Vector 7"helps no one;id="flame"is an API.
The post-export constant
Whatever the settings, Figma’s markup ships verbose – nested groups, generous precision, occasional metadata. The production pass stays the same: render standalone to verify (code editor), then optimize. Expect meaningful shrinkage and collision-proofed ids on every file.
Related: the full Figma export guide · Figma SVG hub.