Html 从字体中提取SVG

我想从glyph中获取SVG路径数据，这样我就可以在HTML中将它们直接用作SVG。我原以为这和复制粘贴路径数据一样简单，但当我在HTML中使用它时，符号都是颠倒的。有人知道为什么吗

（见附件）

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

。。。移植到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中的标准图形（初始坐标系的y轴指向下方）不同，SVG字体的设计网格以及字形的初始坐标系的y轴指向上方，以与许多流行字体格式的公认行业惯例保持一致

根据，将包装器更改为

似乎可以做到这一点，

---

其中，1792是每em的单位，1536是字体面元素的升序

使这一点非常简单。

使用fontforge脚本。我发现了一个脚本：

见：

---

只需从
它们已根据需要翻转和居中

按任意文件，然后按“原始”

---

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

---

还有一个node.js工具，可以为您自动执行此操作，并创建一个before&after

verify.html

。

---

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

您只需在此处下载最新版本的

fa

：

---

然后转到

高级选项/raw svg

文件夹。在那里，您可以找到三个文件夹

brands

、

regular

和

solid

，其中包含所有可用的最新图标

您只需从Github的repo下载所需的任何字体即可

---

对于这个答案的完整性，将包装器更改为

似乎可以做到这一点，其中

1792

是每个em的

单位

，

1536

是

字体

元素上的

上升

。Re

1792是每个em的单位

：打字？我认为它应该是

179.2

来匹配高度/宽度。是的，IcoMoon是一个非常棒的IcoMoon非常容易使用，但我发现它导出的路径比中的SVG更长。尝试比较fa礼品图标。路径是837个字符通过IcoMoon，与…尼斯·芬丹，不知道这个警告。尽管如此，我还是喜欢IcoMoon。我发现很多这样的图标都是在侧面裁剪的，例如，这里可以找到carVersion 5。我将不得不尝试这种超快速且容易的外部爆炸，这可能会有所帮助，但是当你想将路径从512x512调整到20x20时，需要大量的向下缩放按钮

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