1 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 4 4">
2 <!-- if you don't have Ahem, see http://www.hixie.ch/resources/fonts/ -->
3 <rect x="0" y="0" width="100%" height="100%" fill="#EEEEEE"/> <!-- background -->
4 <rect x="1" y="1" width="2" height="2" fill="red"/> <!-- where the glyph _should_ go -->
5 <text x="1" y="2.6" font-size="2" font-family="Ahem" fill="green">X</text> <!-- The glyph. -->
7 The glyph is baseline-aligned according to SVG 1.1 section 10.7.1
8 paragraph 9. The Ahem font has its baseline 0.8em down. Thus if the
9 font-size is 2 units, the baseline is 1.6 units from the top of the
10 glyph. If the top of the glyph is at y="1", then the baseline will
11 be at y="2.6". The glyph in that font is an exact square with the
12 dimensions of the font size. Thus the rect and the glyph above
13 should overlap exactly.