从Font Awesome中提取SVG

我想从Font Awesome glyphs中获取SVGpath数据,这样我就可以直接在我的HTML中使用它们作为SVG。 我认为这会像从fontawesome-webfont.svg复制粘贴path数据一样简单 ,但是当我在我的HTML中使用它时,符号都是上下颠倒的。 任何人知道为什么

(见小提琴

字体真棒SVG:

<glyph unicode="" 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" /> 

…移植到HTML SVG(并缩小):

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

所有的SVG规范 …

与SVG中的标准graphics不同,初始坐标系统的y轴指向下方,SVG字体的devise网格和字形的初始坐标系统的y轴向上,与公认的行业惯例保持一致许多stream行的字体格式。

根据这个注释 ,将包装改为<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>似乎有窍门,其中1792是每单位的单位, 1536是font-face元素的上升

只需从这个github回购从现成的svg图标
他们已经翻转和中心根据需要

在这里输入图像说明

按任何文件,然后“原始” 在这里输入图像说明

IcoMoon应用程序使这个死亡简单。

使用fontforge脚本。 有一个我在网上find的脚本:

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

请参阅: http : //fontforge.sourceforge.net/scripting.html

你可以在这里从flaticon.com下载它们:

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

还有一个node.js工具可以自动执行此操作,并在verify.html之前和之后verify.htmlhttps://github.com/eugene1g/font-blast

我在其他字体上使用它,到目前为止只有1个不好的图标转换,但在字体SVGrest很好。