Text elements in SVG logo files

The short answer

An SVG logo can store its wordmark in one of two ways. It can use live text, written with the SVG text element, or it can use outlined vector paths that trace the shape of each letter. Live text stays editable and can be read as characters. Its appearance, however, depends on the font being available wherever the file is opened. Outlined paths look the same in any renderer, but nobody can retype them. For a final logo master, outlined text is usually the safer choice. Live-text versions work better as editable working files.

What the SVG text element is

SVG is an XML-based format, so you can read its contents in any text editor. The text element places characters on the canvas at given coordinates. Attributes or CSS set the font family, size, weight, letter spacing and alignment. The file stores the characters themselves, not their shapes. The renderer draws the shapes at display time using whatever font it can find.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80">
  <text x="10" y="55"
        font-family="Brand Sans, Arial, sans-serif"
        font-size="48"
        font-weight="700"
        letter-spacing="2">ACME</text>
</svg>

Two related elements are worth knowing. The tspan element styles or positions part of a line differently, such as a second word in another weight. The textPath element flows text along a curve, which shows up in badge and seal logos. Both are still live text and depend on the font in the same way.

Live text versus outlined paths

Aspect | Live text (text element) | Outlined text (path elements)

What the file stores | Characters plus font instructions | Geometry of each letter shape

Visual consistency | Depends on the font available to the renderer | Same in any SVG-capable renderer

Changing the wording | Retype directly | Redraw or re-outline from a source file

Font required to display correctly | Yes | No

Selectable or searchable text | Possible, depending on how the SVG is displayed | No; needs a title or label for meaning

Suitability as a final logo master | Risky unless the font is reliably supplied | Generally preferred

Outlined text appears in the file as path data. The letters become a sequence of drawing commands rather than readable characters:

<path d="M12.4 55 L28.1 10 H36.7 L52.4 55 H43.9 L40.6 45 H24.2 L20.9 55 Z ..."/>

Why font availability matters

Suppose the font named in font-family is not installed or loaded. The renderer then falls back to the next font in the list, or to a generic default. A substituted font has different letter widths, spacing and proportions. The wordmark can shift, overlap a symbol or overflow its space. The result may no longer resemble the approved logo.

There are a few ways to supply the font. You can reference a font file through an @font-face rule inside the SVG, embed the font data directly in the file, or rely on a font that is already installed. Each has limits. Browsers do not fetch external resources when an SVG is displayed through an image tag or as a CSS background, so a font referenced by an outside address will not load in those contexts. Design and office applications vary in whether they honor @font-face rules. Many look only for installed fonts. The older SVG fonts feature, which defined glyphs inside the SVG itself, is deprecated and not reliably supported in current browsers.

How to check what a logo file actually contains

A .svg extension does not tell you whether the file contains editable vector paths, live text or a bitmap. Inspect the contents before relying on it:

• Open the file in a plain text editor and search for "<text". Any match means the file depends on a font for at least part of the artwork.
• Search for "<path" and other shape elements. Letters drawn as paths mean the text has been outlined.
• Search for "<image". This element embeds or links a raster image such as a PNG or JPEG. A logo built this way does not gain true vector scalability just because it sits in an SVG wrapper.
• Open the file in a vector editor and switch to outline or wireframe view. Live text, paths and placed images each look different there.
• Treat preview thumbnails with caution. A file browser or download page may show a raster preview that looks correct even when the underlying file depends on a missing font or contains only an embedded bitmap.

<image href="data:image/png;base64,iVBORw0KGgo..." width="300" height="80"/>

Converting text to outlines

Vector editors can turn live text into paths. In Adobe Illustrator the command is Type > Create Outlines. In Inkscape it is Path > Object to Path. Other tools offer similar commands or export options. The conversion is effectively one-way, so keep a separate copy with live text. After converting, check that kerning and letter spacing match the approved design, that overlapping letters have merged or layered as intended, and that letters with counters, such as O and A, show their holes correctly.

When keeping live text makes sense

• Source or working files that a designer will edit later.
• Templates where part of the lockup changes, such as department or location names.
• Inline SVG on a website that already loads the brand font, where selectable, searchable or translatable text is useful.
• Drafts and proofs where the wording is not yet final.

Keeping outlined wordmarks accessible

Once text becomes paths, screen readers and search tools can no longer read it as words. You can restore that meaning by adding a title element, and when the SVG is placed inline, an image role with an accessible label. When the logo is used through an image tag, the alt attribute on that tag does the same job.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80" role="img" aria-labelledby="logo-title">
  <title id="logo-title">Acme</title>
  <path d="..."/>
</svg>

Fonts, licenses and permissions

Font licenses differ in what they allow. Some restrict embedding font data in files that others receive, because embedding can count as distributing the font. Outlining text for a logo is commonly allowed, but the specific license is what decides, so check its terms. Separately, being able to download a logo file does not grant permission to modify the artwork, extract or reuse its fonts, or use the trademark. Each of those depends on the brand owner's terms and the relevant font licenses.

What to include in a logo delivery

• An outlined SVG master that renders consistently without any fonts installed.
• Optionally, a clearly labeled live-text SVG or native source file for future edits.
• The font names and weights used, plus notes on licensing for anyone who needs to edit the text.
• Raster exports such as PNG for contexts that cannot use SVG, labeled as raster versions rather than masters.
• An accessible title in the SVG, or guidance on alt text for web use.

Limits of this overview

This article describes general SVG behavior. It is not based on testing particular files, applications or browser versions, and the supplied material contained no specific measurements. Font handling in design tools and browsers varies by product and version. Before approving a delivery, open the actual file in each place it will be used.