从 Font Awesome 中提取 SVG答案

【问题标题】：Extracting SVG from Font Awesome从 Font Awesome 中提取 SVG
【发布时间】：2013-08-09 10:12:26
【问题描述】：

我想从Font Awesome glyphs 中获取 SVG 路径数据，这样我就可以在我的 HTML 中直接将它们用作 SVG。我认为这就像从fontawesome-webfont.svg 复制粘贴路径数据一样简单，但是当我在我的 HTML 中使用它时，所有符号都颠倒了。有人知道为什么吗？

（见Fiddle）

字体真棒 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>

【问题讨论】：

标签： html svg font-awesome

【解决方案1】：

只需从 this github repo 获取准备好的 svg 图标
它们已经根据需要翻转和居中

按任意文件，然后按“Raw”

【讨论】：

我发现其中很多图标的侧面都被裁剪了，例如汽车
版本 5 可以在这里找到github.com/FortAwesome/Font-Awesome/blob/master/svgs

【解决方案2】：

全部按照SVG specification...

与 SVG 中的标准图形不同，其中初始坐标系的 y 轴指向下方，SVG 字体的设计网格以及字形的初始坐标系的 y 轴指向上方与许多流行字体格式的公认行业惯例保持一致。

根据this comment，将包装器更改为<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> 似乎可以解决问题，其中 1792 是每 em 单位，1536 是 font-face 元素的上升

【讨论】：

为了这个答案的完整性，将包装器更改为<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> 似乎可以解决问题，其中1792 是units-per-em 和1536 是ascent 上的ascent 元素.
回复1792 is the units-per-em：错字？我认为匹配高度/宽度应该是179.2。

【解决方案3】：

IcoMoon app 让这一切变得非常简单。

【讨论】：

是的，IcoMoon 很棒
IcoMoon 非常易于使用，但我发现它导出的路径比 this GitHub repo 中的 SVG 更长。尝试比较 fa-gift 图标。 path 通过 IcoMoon 有 837 个字符，而 514 in the repo。
很高兴找到丹，不知道这个警告。尽管如此，我还是喜欢IcoMoon。

【解决方案4】：

使用 fontforge 脚本。我找到了一个脚本online here：

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

见： http://fontforge.sourceforge.net/scripting.html

【讨论】：

【解决方案5】：

你可以从他们在 Github 的 repo 下载你需要的任何 Font-Awesome svg

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

【讨论】：

【解决方案6】：

还有一个 node.js 工具可以为您自动执行此操作，并在 verify.html 之前和之后创建一个。 https://github.com/eugene1g/font-blast

我在其他字体上使用过，到目前为止只有 1 次错误的图标转换，但字体 SVG 的其余部分很好。

【讨论】：

我得试试这个
font-blast 超级快捷方便

【解决方案7】：

您可以在这里下载最新版本的fa：https://fontawesome.com/

然后转到advanced-options/raw-svg 文件夹。在那里，您将找到三个文件夹 brands、regular 和 solid，其中包含所有可用的最新图标。

【讨论】：

【解决方案8】：

您可以在此处从 flaticon.com 下载它们：

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

【讨论】：

可能会有所帮助，但是当您想将路径从 512x512 调整为 20x20 时，需要大量按比例缩小按钮混合