从Font Awesome中提取SVG

89

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

（请参阅小提琴）

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

— 雅琳
source

62

全部符合SVG规范...

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

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

— 罗伯特·朗森
source

6

为了使答案更完整，将wrapper更改为<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>似乎可以解决问题，1792theunits-per-em和on1536是ascentonfont-face元素。

— mckamey 2014年

Re 1792 is the units-per-em：错别字？我认为这将是179.2匹配的高度/宽度。

— 内特·库克

98

只需从此github存储库中获取准备好的svg图标，
它们便已根据需要翻转并居中

在此处输入图片说明

按任何文件，然后按“原始” 在此处输入图片说明

— 安吉
source

10

我发现其中很多图标的侧面都有裁剪，例如汽车

— Bankzilla

21

IcoMoon应用程序使这一过程变得简单。

— 杰迪里布
source

2

是的IcoMoon很棒

— Yarin

3

IcoMoon非常易于使用，但是我发现它比GitHub存储库中的SVG导出的路径更长。尝试比较fa-gift图标。的path是通过IcoMoon 837个的字符，与在回购514。

— Dan Dascalescu 2015年

很高兴找到Dan，不知道这个警告。不过，我爱IcoMoon。

— SISYN

12

使用fontforge脚本。我在这里在线找到了一个脚本：

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

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

— 杰迪里布
source

7

还有一个node.js工具将为您自动执行此操作，并创建一个before和after verify.html。 https://github.com/eugene1g/font-blast

到目前为止，我已经在其他字体上使用了它，只有1个不良的图标转换，但是其余的SVG字体都还不错。

— 汤姆·拜勒
source

2

我将不得不尝试一下

— John Dangerous

font-blast超级简单快捷

— 00-BBB

4

您只需在fa此处下载最新版本：https : //fontawesome.com/

然后转到advanced-options/raw-svg文件夹。你会发现有三个文件夹brands，regular并solid包含所有最新的可用图标。

— 奥兰斯特
source

3

您可以在以下位置从flaticon.com下载它们：

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

— 约翰危险
source

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

— nicolallias

3

您可以从Github的回购中下载所需的任何Font-Awesome svg

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

— 么么哒
source