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