我正在尝试从 Sketch 导出 SVG 图标以导入 Fontello，但是 SVG 似乎不适用于该应用程序（它们在 IcoMoon 中也不起作用）。
我试图作为测试创建的图标是一个简单的“汉堡”风格图标，只有几行，但它们无法正常工作。至少可以说令人沮丧。
有没有人有这方面的经验并且可以分享他们的知识？谢谢你。
从 Sketch 导出图标字体
平面设计
字体
图标
素描应用
2022-01-15 21:07:52
3个回答
我想出了如何从草图中导出 SVG 以进行 icomoon 正确导入：
第1步
通过选择路径组并单击：图层 > 路径 > 矢量化描边，防止 SVG 超出边界
要知道这已经奏效，转换为闭合路径的笔划和检查器现在显示填充颜色而不是边框颜色。
第2步
通过单击检查器上的Make Exportable选项卡并选择 SVG 格式来导出每个图标/svg。
第 3 步
像往常一样将 SVG 图标导入 icomoon，现在该集合应该正确显示图标并且网格大小应该准确。注意：确保草图上的所有 SVG 具有相同的高度。
2016 年更新 感谢 @jackocnr 指出：
在 2016 年，草图菜单选项是图层 > 转换为轮廓
这本手册对我有用。这是非常有用的。他的作者谈到了草图导出问题。我引用他的文章以防文章被删除。
整体解决方案
- 为每个图标创建一个画板（插入 -> 画板）。
- 确保每个画板的位置没有半像素并且是偶数。
- 删除所有图标旋转。
- 删除任何边界框，这样 Sketch 就不会导出不需要的代码。
- 防止 SVG 由边界层 > 路径 > 矢量化描边构成（感谢Gus）
- 导出清洁 .svg
*这是作者试图导出的图标
草图导出错误
错误 #1
通过将画板位置更改为偶数来修复草图变换导出。这将删除代码中的任何转换。另一方面，由于位置偏离了半像素，Sketch 将我的视图框的大小更改为 0 0 25 25。我原来的画板是 24 x 24px。这个错误甚至为代码添加了规范。没有布埃诺。
错误 #2
问题：根据设计，每个图标都设置为宽度：24px，高度：24px，边框半径：3px。问题是，在导出时，矩形被添加到路径中，因此难以通过 css 以任何大小进行缩放。
解决方案：删除任何透明边界框，让 css 发挥作用。开发人员真正需要的只是将 viewbox 设置为 24 x 24px。他们可以添加宽度、高度和边框半径。
错误 #3
问题：草图导出旋转（-180.000000）。
<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>
解决方案：在 Adobe Illustrator 中打开您的 .svg 图标，旋转图标，然后拖放回 Sketch。这将一起消除旋转。
错误 #4 问题：再次使用切片工具导出翻译和转换。解决方案：什么都没有。只是不要这样做。反正切片时间太长，浪费时间。
如果您正在使用子路径，请在导出前展平形状。我仍然在 Fontello 中遇到关于手动创建复合路径的错误，但它似乎工作正常。
（我的形状是一个圆形，上面有两个形状。）