The Best Export Settings for SVG (From Any Tool)

Every design tool exports SVG – and every one makes different default choices about text, strokes, IDs, and precision. The wrong combination produces files that look fine and then break: fonts that don’t travel, icons that vanish when inlined, files five times their necessary size. Here’s what each setting actually does, tool by tool.

The four decisions every export makes

1. Text: live or outlined? Live <text> stays editable and accessible but renders with the viewer’s fonts – your carefully chosen typeface silently falls back on machines without it. Outlined text becomes paths: identical everywhere, frozen forever.

Rule: outline text in logos, downloads, and anything leaving your control. Keep live text only for SVGs on your own site where you control fonts. (SVG text editing covers the details.)

2. Strokes: kept or expanded? A stroke is a property (“this path, 2px wide”); expanding converts it to a filled shape of that width. Kept strokes stay editable and scale their width with the graphic; expanded strokes are safer for cutting machines and tools with weak stroke support.

Rule: keep strokes for web/UI assets; expand for cut files and maximum-compatibility delivery.

3. IDs: included or stripped? Tools like Figma can write every layer name as an id attribute. Sounds harmless – until you inline three exports on one page and their duplicate id="clip0" definitions collide, breaking clips and gradients in ways that are miserable to debug.

Rule: strip IDs unless your code references them. (An optimizer pass de-duplicates collisions.)

4. Precision: how many decimals? Coordinates like 12.000000238418579 are sub-pixel noise that doubles file size. 1–2 decimal places is visually identical for screen graphics.

Tool-by-tool quick reference

Figma – export the frame, not the bare shape (controls the bounding box). Behind the ⋯ menu: “Include id attribute” off, “Outline text” per the rule above. Watch for raster effects (shadows, blurs) silently rasterizing parts of the export. Full guide: Figma SVG export.

Illustrator – use File → Export → SVG (not the legacy Save As): Styling “Presentation attributes” (most portable), Font “Convert to outlines” for delivery, Decimal places 2, Minify on, Responsive on (drops fixed width/height in favor of viewBox).

Inkscape – save as Plain SVG, not Inkscape SVG, for delivery: the Inkscape flavor embeds sodipodi:/inkscape: editor attributes that other tools choke on and validators flag.

Canva (Pro) – tick “transparent background” or your design ships on a white rectangle; expect text as outlines and effects flattened. Post-process per the checklist below. (Canva SVG export.)

Auto-tracers – including ours: the export decisions are made for you (outlined everything, no IDs, sane precision), which is why traced files tend to pass validators that reject design-tool exports.

The universal post-export checklist

Whatever produced the file, sixty seconds of hygiene:

1. Render it standalone – open the file in a browser tab or paste into the code editor. Catching the missing-font or missing-xmlns problem now beats catching it in production.
2. Optimize – strip metadata, editor namespaces, and excess precision. Design-tool exports routinely shrink 30–60% with zero visual change. (Why and how.)
3. Check the viewBox – present? Sensible? It’s what makes the SVG responsive; some tools omit it in favor of fixed dimensions. (viewBox explained.)
4. Verify at destination size – an icon bound for 16px should be eyeballed at 16px.

And when the destination wants pixels

SVG masters, raster deliverables: render PNGs at exactly the scale each platform needs from the one vector source – 2× for screens, 4×+ for print – with the SVG to PNG converter. Never resize a raster export; re-render from the vector instead.