How is an SVG font rendered?

Question

JavaScript

The task is to implement something like an SVG font renderer on canvas. There is an svg font itself with glyphs, something like this

<font id="font" horiz-adv-x="988"><font-face font-family="Action Man" units-per-em="2048" panose-1="0 0 4 0 0 0 0 0 0 0" ascent="1353" descent="-323" alphabetic="0"/>
<glyph unicode="q" glyph-name="q" horiz-adv-x="1067" d="M940 ... 707Z"/>

I have a method that, from an input string, searches the font for every unicode character and renders what is in d.
How can I get information about the width and height of the character from those attributes that the font provides, about how much it should protrude down or up in the case of the letters "b" and "d", what is the units-per-em parameter?
I would appreciate a detailed answer.

Answer 1

Can't you just display text in canvas using this font?