| <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> |
