我想我已经接近答案了(quack quack),但到目前为止它非常难看。
他们的关键是让 SVG 文件的结构与 Illustrator 的预期相匹配。最简单的开始方法是将现有的 illustrator 文件保存为 SVG,然后在文本编辑器中打开结果。
首先,剥离 XML,以便您拥有 SVG 文件的基本“框架”,没有任何内容。这是一个例子。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px"
height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">
</svg>
在图标字体的 SVG 文件中,字形看起来像这样(至少对于Trello 的 SVG 图标字体):
<glyph unicode="" d="M120 186q0 109 68 240t195.5 247.5t277.5 164.5l-9 -14q-106 73 -168.5 189.5t-62.5 249.5q0 146 72.5 269.5t197 195.5t271.5 72q144 0 268 -71.5t197 -195.5t73 -270q0 -132 -63 -249t-169 -193l-11 20q115 -37 218.5 -115.5t173 -170.5t110.5 -190t41 -179 q0 -78 -71 -138.5t-192 -96t-267.5 -53.5t-309.5 -18t-309.5 18t-267.5 53.5t-192 96t-71 138.5z" />
在粘贴到我们计划导入 Illustrator 的文件之前,我们需要对其进行一些修改。以下是我必须改变的一些事情:
- 将单词更改
glyph为path
- 您不需要该
unicode属性,因此将其更改为id. (我还修改了该值,因此 Illustrator 不会尝试呈现 Unicode,例如""变成"xf001"。这可能不是必需的)。
- 将新的路径元素包装在一个
g标签中,其 id 与路径的 id 匹配。
您的字形标签现在应该如下所示:
<g id="xf004">
<path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>
放在一起,文件将如下所示:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px"
height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">
<g id="xf004">
<path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>
</svg>
当然,您需要对要导入的所有字形应用这些步骤,但这就是宏和搜索/替换的用途:)