Extracting SVG from Font Awesome

Question

I want to get the SVG path data from Font Awesome glyphs so that I can use them straight up as SVG in my HTML. I thought it would be as easy as copy-pasting the path data from fontawesome-webfont.svg, but when I use it in my HTML the symbols are all rendering upside-down. Anyone know why? (See Fiddle) Font Awesome SVG: ``` ``` ... Ported to HTML SVG (and scaled down): ```

Accepted Answer

All per the SVG specification... Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward, the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats. As per this comment, Changing the wrapper to `` seems to do the trick, where 1792 is the units-per-em and 1536 is the ascent on font-face element

Extracting SVG from Font Awesome

Solution

Problem