How to Prepare Logo Text in SVG
How to handle fonts in an SVG logo: convert live text to outlines, keep an editable master, check licensing, and verify the exported file has no font dependencies.
Contents
The short answer
For a logo SVG that you hand off or publish, convert the lettering to outlines (vector paths) before export. Keep a separate master file where the text is still editable. An outlined SVG draws the same on any device because it no longer needs the font installed, and the exported file does not carry a usable copy of the font.
Two terms explain why. Live text is text that is still typed characters: in an SVG it is stored in a <text> element and names a font through a font-family attribute. Outlines (also called paths or curves) are the shapes of the letters stored as geometry in <path> elements. They are no longer characters, so they cannot be retyped, but they do not depend on any font.
Why live text is risky in a logo SVG
An SVG with a <text> element only names the font. If the program or browser opening the file does not have that font, it substitutes another one. The wordmark then changes shape, spacing and width, and may no longer line up with the symbol next to it. Nothing in the file warns the recipient that this happened.
Embedding the font in the SVG, for example through an @font-face rule with the font data inside the file, is a different solution with its own problems. Support varies between programs. It also distributes the font file itself, which many font licenses restrict. Check the specific license before embedding. Outlining avoids both problems for logo artwork.
<!-- Live text: depends on the font being available -->
<text x="0" y="40" font-family="BrandSans">Brand</text>
<!-- Outlined: letter shapes stored as geometry -->
<path d="M0 40 L ... Z"/>Step by step: preparing the lettering
- Finalize the type first. Settle the wording, font, weight, size relationships, kerning (spacing between specific letter pairs) and tracking (overall letter spacing). After outlining, these can only be changed by moving shapes by hand.
- Save an editable master. Duplicate the file or the text layer and keep the live-text version. This is the file you return to for revisions, and it needs the font installed.
- Convert the text to outlines in the delivery copy. In Adobe Illustrator this is Type > Create Outlines. In Inkscape it is Path > Object to Path. In Affinity Designer it is Layer > Convert to Curves. Other editors have an equivalent outline, flatten or convert-to-curves command.
- Clean up the geometry. Check that counters (the enclosed spaces in letters such as o, e and a) still cut through and are not filled in. Merge overlapping shapes only where this does not change the look. Remove stray points and empty groups.
- Convert or check any type on a path, text effects and strokes applied to letters. A stroke on text may need its own expansion to a filled shape if the stroke should stay fixed when the logo is scaled.
- Remove hidden or leftover text layers before export. They can still be written into the SVG as live text.
- Export the SVG. If your exporter offers a choice between keeping text as text or converting it to outlines, choose outlines for the delivery file.
How to verify the exported file
The file extension does not tell you what the file contains. An .svg can still hold live text, embedded font data or even an embedded raster image. Check the file itself.
- Open the SVG in a plain text editor and search for "<text", "<tspan", "font-family" and "@font-face". In an outlined logo file, none of these should appear in the artwork.
- Search for "<image" to confirm that the lettering is not a bitmap embedded in the SVG.
- Open the file on a device or in a browser that does not have the brand font installed. The wordmark should look identical to your master.
- Zoom in a long way. Outlined letters stay sharp, and any blurring suggests raster content.
- Try to select the lettering with a text tool in a vector editor. Outlined text selects as shapes, not as editable characters.
Accessibility after outlining
Once the letters are paths, the logo has no readable text for screen readers or search tools. If the SVG will be placed inline on a web page, add a <title> element inside the SVG, or an accessible label on the element, that states the brand name. When the SVG is used through an image tag, give that tag meaningful alt text.
When live text in an SVG can make sense
Live text can be a deliberate choice for web graphics that are not the logo itself, where the text must be translatable, selectable or updated often, and where the page reliably loads a web font that is licensed for that use. A logo wordmark is fixed artwork, so this exception rarely applies to it.
A note on "SVG fonts"
Searches for "font svg" sometimes refer to SVG fonts, an older format that defines glyphs with a <font> element inside SVG. That format has limited and largely discontinued browser support and is not a route for delivering logo lettering. It is unrelated to converting a wordmark to outlines.
Licensing and reuse caveats
Outlining a font for a logo is a use governed by the font's license, as is embedding it. Terms differ between foundries and license types, and no specific license terms were available for this guide. Confirm that the license covers logo or trademark use before finalizing. An outlined SVG also says nothing about whether the logo itself may be reused. Permission comes from the brand owner, not from the file format.
Gaps in this guide
No subject-specific evidence was supplied, such as particular font licenses, software versions or recipient file specifications. Menu names above reflect common current layouts and may differ between versions. If a printer, platform or agency gives its own SVG requirements, those take precedence over these general recommendations.