Extract SVG from Awesome Font

Question

I want to get SVG path data from Awesome font fonts so that I can use them directly in SVG in my HTML. I thought it would be as simple as copying the path data from fontawesome-webfont.svg , but when I use it in my HTML, the characters all flip in the reverse order. Does anyone know why?

(see Fiddle )

Awesome SVG Font:

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" /> 

... Ported to HTML SVG (and downsized):

 <svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg> 

Answer 1

All in SVG Specification ...

Unlike standard graphics in SVG, where the original coordinate system has a y axis down, the project grid for SVG fonts, along with the initial coordinate system for glyphs, has a y axis up for consistency with industry practice for many popular font formats.

Like this commentary , changing the wrapper to <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> it’s like a trick, where 1792 are units of measure on-em and 1536 are climbing on the font-face element

Answer 2

Just get ready svg badges from this github repo
They are already upside down and centered as needed.

Click any file and then "Raw"

Answer 3

The IcoMoon app makes this recording easy.

Answer 4

Use fontforge script. There is a script I found here:

 fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf 

See: http://fontforge.sourceforge.net/scripting.html

Answer 5

There is also a node.js tool that automates this for you and creates verify.html before and after. https://github.com/eugene1g/font-blast

I used it on other fonts, only 1 failed icon conversion, but the rest in the SVG font was perfect.

Answer 6

You can download them from flaticon.com here:

http://www.flaticon.com/packs/font-awesome