A practical guide on svg text vs paths — when, why, and how.
SVG can contain text in two ways: as actual <text> elements (live text) or as <path> elements (outlines). Each has trade-offs that matter for different use cases.
Live Text (<text>)
Pros: Searchable, selectable, accessible to screen readers, small file size, editable, can be styled with CSS fonts.
Cons: Requires the font to be available on the viewer's system or embedded. If the font is missing, text renders in a fallback font and may look wrong.
Text as Paths (Outlined)
Pros: Looks identical everywhere — no font dependency. The text is converted to vector curves that render perfectly regardless of installed fonts.
Cons: Not searchable, not selectable, not accessible (screen readers can't read it), larger file size, not editable (can't change the text without redrawing).
When to Use Each
Use live text for web SVGs where you control the font (via CSS web fonts) and need accessibility. Use outlined text for logos, print-ready files, and any SVG that needs to look identical everywhere without font dependencies.
When you convert a PNG containing text to SVG, the text is always converted to paths (since the converter sees pixels, not font data). If you need editable text, manually recreate it in a vector editor.