Figma SVG Outline Text: When to Convert Text to Paths

The painful version of Figma SVG export is familiar: the design looks perfect in Figma, but the browser swaps the font, the logo text shifts, the stroke looks wrong, or the SVG becomes a giant block of path data that nobody wants to edit.

The fast rule is:

Outline text in a Figma SVG only when the words are final and visual consistency matters more than editability. Keep text live when the words need to be read, translated, searched, selected, personalized, or changed later.

That one decision prevents most Figma SVG text problems. It also tells you which cleanup path to use before sending the file to a developer, CMS, email platform, icon system, or print vendor.

If your whole export is broken, start with the broader Figma SVG export troubleshooting guide. If the export works but the markup is too noisy for production, use the Figma SVG clean code guide after you decide what to do with text.

What does Outline text do in a Figma SVG export?

Outline text converts letters from editable text into vector shapes. In the exported SVG, the browser no longer sees a word like "Atlas"; it sees paths that happen to look like those letters. This locks the visual appearance but removes normal text behavior.

Outlined SVG text is text converted into path geometry. It keeps the font shape without requiring the font file, but it is no longer editable as text, selectable as text, or naturally understood as words by assistive technology.

Figma's SVG export settings include an Outline text option. Figma's help docs explain that text is exported as glyphs by default and that unchecking Outline text preserves text editing. Figma also notes that SVG strokes are exported as fills, which matters when your text has outlines, effects, or thick strokes.

Useful references:

Here is the difference in the SVG code:

<!-- Live text: editable, font-dependent -->
<text x="24" y="48" font-family="Inter" font-size="32">
  Atlas
</text>

<!-- Outlined text: visually locked, no longer real text -->
<path d="M12.4 44L24.1 12h6.2L42 44h-6.1..." />
<path d="M48.8 44V12h5.7..." />

Neither version is universally better. The right answer depends on what the SVG is for.

Should you outline text or keep it live?

Outline text for final brand marks, small decorative labels, icons, badges, stickers, and assets where the font must never change. Keep text live for diagrams, UI mockups, data labels, multilingual graphics, editable templates, and any content that users or screen readers should understand as words.

Use this decision table before exporting:

Use Case	Best Export Choice	Why
Final logo lockup	Outline text	Prevents font substitution in websites, decks, and downloads
Startup logo draft	Keep live text	Names, taglines, and spacing may still change
App icon with letters	Outline text	Tiny assets need predictable shape and no font dependency
Infographic labels	Keep live text or use HTML labels	Better accessibility, translation, and file size
Decorative hero word art	Outline text	Exact display matters more than selecting the word
Product diagram	Keep live text	Labels may need updates and localization
Email signature logo	Usually outline text	Many email clients handle fonts inconsistently
Favicon or tiny badge	Outline text or remove text	Small text usually becomes unreadable anyway

The practical rule:

If changing the word later would be normal, keep text live.
If the word is part of the final shape, outline it.
If the word carries meaning, provide accessible text somewhere.
If the text is more than a short label, do not turn it into paths unless you have a strong reason.

For logos generated from a prompt or raster image, you may need a different workflow: create the mark first, then refine the wordmark separately. SVG Genie's logo maker and AI SVG generator are useful when the starting point is a description rather than an existing Figma file.

Why does Figma SVG text change in the browser?

Figma SVG text changes in the browser when the exported SVG depends on a font that the browser cannot load. Live SVG text uses font-family rules. If that font is missing, the browser falls back to another font, which changes width, spacing, line height, and sometimes the entire feel of the design.

This is the core tradeoff:

Text Strategy	Looks Identical Everywhere?	Editable Later?	File Size	Accessibility Risk
Live `<text>` with system font	Usually	Yes	Small	Low
Live `<text>` with custom font loaded on site	Usually	Yes	Small to medium	Low
Outlined text paths	Yes	No	Medium to large	Medium
Rasterized text image	Usually, but can blur	No	Medium	High

If your SVG looks wrong because the font changed, you have four options:

Load the exact web font where the SVG renders.
Use a safer system font before export.
Outline the final text and accept that it is no longer editable.
Replace text inside the SVG with normal HTML text beside or over the graphic.

For a final logo, option 3 is usually the simplest. For a chart, diagram, or product screenshot, option 4 is often cleaner because HTML text is easier to style, wrap, translate, and make accessible.

If the source is not a Figma text layer but a PNG or JPG with letters inside it, convert the image with Image to SVG only when you need the whole graphic as vectors. For actual words, rebuilding the text with a real font is usually cleaner than tracing letter shapes.

How do you export outlined text from Figma safely?

To export outlined text safely, duplicate the source, make sure the words are final, export a tight frame as SVG, enable Outline text only for the production copy, and test the result at the final display size. Keep a separate editable source with live text for future changes.

Use this workflow:

Duplicate the Figma component or frame.
Rename one copy editable and one copy production.
In the editable copy, keep the text layer live.
In the production copy, confirm spelling, casing, spacing, and line breaks.
Select the smallest correct frame or group.
Export as SVG with Outline text enabled.
Open the SVG in a browser and inspect file size.
Run a conservative cleanup in SVG Optimizer.
Test on light and dark backgrounds.
Store both files if the asset matters.

Do not outline text and then try to "fix" words by editing path data. That is the slow path. If the word changes, go back to the editable source, update the text, then export again.

For developer handoff, use names like:

atlas-logo-editable-source.fig
atlas-logo-production-outlined.svg
atlas-logo-web-optimized.svg

That naming makes the file's job obvious. It also prevents someone from grabbing the editable draft and shipping a font-dependent SVG by accident.

How do you keep Figma SVG text editable?

Keep Figma SVG text editable by turning off Outline text during SVG export and making sure the font is available wherever the SVG will render. Then preserve the <text> elements during optimization instead of flattening or converting them to paths.

After export, inspect the code:

<text
  x="32"
  y="72"
  font-family="Inter"
  font-size="40"
  font-weight="700"
  letter-spacing="-0.02em"
>
  Atlas
</text>

That is editable. This is not:

<path d="M31.82 72L44.28 38.4H51.12..." />

If your file still has live text, you can use SVG Editor to inspect the graphic, change simple labels, and confirm the viewBox still contains the text after editing. For a deeper walkthrough, use the edit SVG text online guide.

Watch for these problems when preserving live text:

Problem	What It Means	Fix
Font changes in browser	The font is missing	Load the font or choose a system font
Text overflows viewBox	New phrase is wider	Adjust font size, anchor, or viewBox
Text disappears in an image tag	External font or CSS dependency failed	Inline the SVG or use paths for final brand text
Optimizer removed text metadata	Cleanup was too aggressive	Keep title, desc, text, and required attributes
Letter spacing shifts	Browser font metrics differ	Test in the real browser context

For interface icons, text inside SVG is usually a smell. A button should use an icon plus real HTML label, not a tiny SVG word that users cannot resize or translate easily.

Does outlining text hurt SVG accessibility?

Outlining text can hurt accessibility when the visible words carry meaning. Screen readers and search engines do not treat path geometry as normal text. If the outlined words matter, provide an accessible name or nearby visible text that communicates the same meaning.

For decorative outlined text:

<svg viewBox="0 0 120 40" aria-hidden="true">
  <path d="..." />
</svg>

For a meaningful standalone logo:

<svg
  viewBox="0 0 160 48"
  role="img"
  aria-labelledby="logo-title logo-desc"
>
  <title id="logo-title">Atlas Analytics logo</title>
  <desc id="logo-desc">Wordmark and mountain-shaped chart symbol.</desc>
  <path d="..." />
</svg>

For long meaningful copy, do not hide the words inside an outlined SVG. Use HTML text. The SVG can stay decorative while the actual content remains readable:

<div class="feature-callout">
  <img src="/decorative-heading-shape.svg" alt="" />
  <h2>Ship clean SVG assets without font surprises</h2>
</div>

MDN documents <title> as SVG's short accessible name element and <desc> as the longer description element. They are useful, but they are not a license to turn paragraphs into paths. For real content, HTML text is still the easier, safer format.

Why does outlined Figma SVG text create huge files?

Outlined text creates large SVG files because every letter becomes geometry. A five-letter word may be fine. A paragraph can become hundreds of path commands, especially with bold fonts, decorative typefaces, strokes, shadows, masks, and boolean effects.

Before outlining, ask:

Is this text final?
Is it short enough to be practical as paths?
Does it need to be selected, copied, translated, or indexed?
Will a future teammate need to change it?
Could normal HTML text solve this better?

After outlining, check:

File size before and after optimization
Number of <path> elements
Whether strokes were converted to fills
Whether curves still look clean at the final size
Whether the SVG is still easy to preview and validate

For production, run the final export through SVG Minifier or SVG Optimizer. Use conservative settings first. Aggressive path simplification can distort letterforms, especially at corners, counters, curves, and thin strokes.

If the outlined SVG is still too heavy, you probably outlined too much text. Rebuild the layout with HTML text, or keep only the logo mark as SVG.

What about strokes and outlined text in Figma SVG?

Figma can export strokes as fills in SVG, and that matters for outlined text because a stroked word can become more complicated than expected. Thick text strokes, shadows, and effects may export as layered paths rather than simple text with a stroke attribute.

Use this decision rule:

Text Effect	Safer Export Strategy
Simple brand wordmark	Outline final text, then optimize carefully
Thick outside stroke	Test at final size; inspect path count
Editable headline with stroke	Keep text live and handle styling in CSS/HTML if possible
Shadow or blur around text	Consider raster PNG if it is purely decorative
Small icon label	Remove the text or outline it only if readable

If the stroke looks spiky, swollen, or misaligned after export, do not keep toggling random optimizer settings. Go back to Figma and simplify the source:

Reduce unnecessary effects.
Expand the frame so strokes are not clipped.
Avoid tiny outlined text.
Test Simplify stroke on a copy.
Compare the raw export and optimized export side by side.

For small icon clipping problems, the SVG icon cut off fix guide is more specific. For path cleanup after export, use the SVG path optimizer guide.

What is the best production checklist?

The best production checklist is to keep one editable source, export one visual-locked SVG only when needed, add accessible text when words matter, optimize conservatively, and test the SVG in the exact place where it will ship.

Use this final checklist:

The source Figma file still has an editable text version.
The production SVG uses outlined text only for final, short, visual text.
Meaningful outlined text has title, desc, aria-label, or nearby HTML text.
The exported SVG has a correct viewBox.
The file is not bloated by unnecessary paragraphs or labels converted to paths.
Strokes, shadows, and effects still look right after export.
Optimization did not distort letter shapes.
The SVG works in the real target: website, app, email, CMS, or design system.

If you need the quickest path: keep live text while editing, outline only the final logo or badge, then clean and validate the SVG before shipping. If you are starting from a raster logo or AI image instead of Figma text, use PNG to SVG or Image to SVG, then rebuild the lettering if the trace creates messy paths.

FAQ

Should I outline text when exporting SVG from Figma?

Outline text when the SVG must look identical everywhere, such as a final logo, badge, icon, or decorative wordmark. Keep text live when the words need to remain editable, selectable, accessible, translatable, or searchable.

Why does Figma export text as paths in SVG?

Figma exports text as glyphs by default so the SVG keeps the visual shape even when the font is missing outside Figma. You can preserve editable text by turning off Outline text in the SVG export settings, then making sure the font is available where the SVG renders.

Does outlining SVG text hurt accessibility?

It can. Outlined text becomes path geometry, so the visible words are no longer normal text. For meaningful text, add an accessible name with title, desc, aria-label, nearby HTML text, or another visible text alternative.

Why is my outlined Figma SVG file so large?

Outlined text turns each letter into vector paths. A short logo may stay small, but paragraphs, labels, and heavy type effects can create hundreds of path commands. Keep long copy as text or HTML instead.

Can I edit outlined SVG text later?

Not like normal text. Once text is converted to paths, each letter is geometry. Keep an editable source file with live text, then export a separate production SVG with outlined text only when the wording is final.