Use SVG glyph tag in HTML

Question

I have an icons.svg file with this source:

Answer 1

There is no browser that implements SVG or . The best you can do is convert the glyphs to s containing a , like in a SVG sprite sheet. (This conversion could be even automated with XSLT.) If you set a viewBox for the symbol with the width matching horiz-adv-x and the height the font's ascent, you can position the icon use reliably inline:

.icon, symbol {
    overflow: visible
}
.icon {
    height: 1em
}

text  text

The downside is that you don't get the automatic advance that glyphs would give you. The best you can do is to set a constant height and a viewBox for each referencing that matches that of the symbol you are using.

If you don't use the icons in a inline context where the advance is important, you could maybe set all symbol viewBox widths to a unified value (i. e. viewBox="0 0 1024 960") and then leave off the viewBox from the icon svg, seting instead a constant width/height ratio (i.e. width:1.067em; height:1em). Some icons will then overflow that box in the horizontal direction.