从 Font Awesome 中提取 SVG

我想从 超赞字体字形中获得 SVG 路径数据，这样我就可以直接在 HTML 中将它们作为 SVG 使用。我原以为它会像复制粘贴来自 Fontawesome-webfont. svg的路径数据一样简单，但是当我在 HTML 中使用它时，所有的符号都呈现为倒置的。有人知道为什么吗？

(见 小提琴)

Font Awesome SVG: 

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

... 移植到 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>
98416 次浏览
小开
最佳答案

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 <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> seems to do the trick, where 1792 is the units-per-em and 1536 is the ascent on font-face element

小开

IcoMoon app makes this dead simple.

小开

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

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

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

小开

UPDATE 2022 thanks to Chris Aelbrecht comment below:
official repo has the SVGs of the latest version for download

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

original answer:

Just get the ready svg icons from this github repo
They are already flipped and centered as needed

enter image description here

小开

You can download them from flaticon.com here:

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

小开

There is also a node.js tool that will automate this for you, & create a before & after verify.html. https://github.com/eugene1g/font-blast

I've used it on other fonts, only 1 bad icon conversion so far, but rest in the font SVG was fine.

小开

You can simply download the latest version of fa here: https://fontawesome.com/

And then go to the advanced-options/raw-svg folder. There you will find three folders brands, regular and solid containing all the latest icons available.

小开

You can just download any Font-Awesome svg you need from their repo at Github

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs


提交答案