SVG Font

The original vector font format — human-readable XML that maps SVG paths to font glyphs.

.svg SVG Font Format
TypeXML-based vector
CompressionNone (plain text)
File SizeLargest of all formats
SupportSafari only (deprecated elsewhere)
Best ForDebugging, source format
BobcornPipeline source

What is SVG Font?

SVG fonts were defined as part of the SVG 1.1 specification, published by the W3C. Unlike traditional binary font formats, SVG fonts embed glyph outlines as SVG path data inside a <font> element. Each glyph is represented by a <glyph> element whose d attribute contains the vector path describing the shape.

In essence, SVG fonts are SVG drawings packaged as a font. The same path syntax you use to draw shapes in an SVG file is reused to define letterforms and icon outlines. This makes them uniquely inspectable — you can open an SVG font in any text editor and read the actual geometry of every glyph.

How It Works

An SVG font file wraps glyph paths inside a standard XML structure. Here is a simplified example:

SVG Font structure 
<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

The <font-face> element declares the font family name and the coordinate system (units-per-em). Each <glyph> maps a Unicode code point to a vector path. The d attribute uses the exact same path syntax as a regular SVG <path> element.

This is the intermediate format in Bobcorn's pipeline. Individual SVG icons are first assembled into this SVG font structure, which is then converted into binary formats: SVG Font → TTF → WOFF / WOFF2 / EOT.

Pros & Cons

    Pros
  • Human-readable — open in any text editor
  • Easy to debug glyph paths and metadata
  • Fully vector-based, infinite scalability
  • No compilation needed to view the source
    Cons
  • Largest file size of all font formats
  • Deprecated in Chrome, Firefox, and Edge
  • No compression whatsoever
  • No hinting support
  • Poor rendering quality on Windows

Browser Support

SVG font support has been removed from most major browsers. Chrome dropped SVG font support in version 38 (2014). Firefox never implemented it. Edge (Chromium-based) does not support it either. The only remaining holdout is Safari and iOS Safari, which still render SVG fonts.

For practical web use, SVG font is essentially a legacy format. You should never rely on it as a delivery format for end users. Use WOFF2 instead.

When to Use SVG Font

  • Debugging font generation issues — since it's plain XML, you can read the path data directly and compare it against the original SVG icons to diagnose problems.
  • As a source format in build pipelines — many font generation tools (including Bobcorn) use SVG font as an intermediate representation before converting to binary formats.
  • Legacy iOS < 5 support — extremely rare today, but older iOS devices that predate WOFF support could only use SVG fonts for web fonts.
Bobcorn
In Bobcorn, SVG font is the first step of the generation pipeline. Your SVG icons are assembled into an SVG font, which is then converted to TTF, and from TTF to WOFF, WOFF2, and EOT. You can export the SVG font file for debugging purposes — it's especially useful when a glyph looks wrong and you need to inspect the raw path data.