如何使用SVG符号viewBox正确缩放SVG字体的字形

Question

I'm utilizing the Bravura music font.

Here's its font-face definition:

<font-face 
    font-family="Bravura"
    font-weight="400"
    font-stretch="normal"
    units-per-em="2048"
    panose-1="5 6 0 0 0 0 0 0 0 0"
    ascent="1638"
    descent="-410"
    bbox="-889 -4080 4749 4120"
    underline-thickness="102"
    underline-position="-102"
    unicode-range="U+0020-1D1DD"
  />

I'm trying to wrap my head around font metrics. I've studied the explanation on this site : But I'm still unclear.

My goal is to translate the glyphs into a properly scaled SVG path using an SVG symbol viewBox attribute.

So the EM square (which is an imaginary square enclosing each glyph) is 2048x2048 units (defined by units-per-em). A unit is 1/72 of an inch. My monitor DPI is 96x96

Converting this to pixels = 2048 * 96/72 = 2730 1/3 x 2730 1/3

(Let me know if I'm off here)

So each font should natively fit into a 2730 1/3 x 2730 1/3 square?

How does the bounding box #s fit into this process? Are the bbox units in glyph-units as well? ( 1/72 in )

Should the bbox value below be directly inputted into the viewBox attribute of a symbol?

Do I need to consider ascent and descent values?

Here is a jsfiddle somewhat demonstrating my issue: http://jsfiddle.net/1wqa384u/5/

Any resources or help appreciated.

Answer 1

The em box encompasses the ascent and decent. Notice that ascent-descent=2048 .

As for your main question, I think you are confusing yourself a bit. The viewBox tells the browser how to scale the symbol to fit the size specified by the <use> that references it.

So if I understand what you want correctly, your symbol viewBox should just be "0 0 2048 2048" .

You should then be able to draw it at, say 12pt, by referencing it like so:

<use xlink:href="#mysymbol" x="100" y="100" width="12pt" height="12pt"/>

You shouldn't have to worry about doing your own DPI conversion.