SVG Creating fonts a simple font


Example

A simple example of an svg font. A few things to note here:

  • the coordinate system of the glyphs is in opposition to the usual coordinate system in svg. the y axis points upwards. The point 0,0 is in the lower right corner.
  • All paths in a font must be drawn counter clockwise.
  • In most tools only the d attribute of the glyph element is supported. Child elements won't work, though they are technically allowed.
<svg xmlns="http://www.w3.org/2000/svg">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode="a" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
    <glyph unicode="b" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
  </font>
</svg>

If you have wider or narrower glyphs, just change the horiz-adv-x on the glyph element itself.

<glyph unicode="a" horiz-adv-x="512" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />

font picking

the unicode property is used for later glyph selection. You can use simple letters or unicode codepoints as well as ligatures (combination of letters or unicode codepoints)

  • unicode="abc"
  • unicode="&#97;&#98;"
  • unicode="ab&#97;&#98;"
  • unicode="a"
  • unicode="&#98;"

glyphs are always selected by first match, so do have all ligatures before any single character.

unicode codepoints can be written in decimal &#123; or in hexadecimal &#x1f notation.