logo标签列表

使用icomoon将SVG转换为字体图标

javascriptcsssvgicon-fonts
7
我有一个svg文件，在任何浏览器中打开都没有问题。我试图使用http://icomoon.io/将它们转换成一堆字体图标，但在导入后它不正确地显示出来。我也尝试使用http://fontastic.me/，但是没有成功。
以下是SVG图像的标记：
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
    color: red;
">
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M323.41,321.664c0,0.457-0.371,0.828-0.828,0.828  H88.835c-0.458,0-0.829-0.371-0.829-0.828V87.918c0-0.459,0.371-0.829,0.829-0.829h233.747c0.457,0,0.828,0.37,0.828,0.829V321.664z  " style="
    color: red;
"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M215.311,196.935"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M250.935,277.399  c25.36-14.769,42.409-42.247,42.409-73.71c0-47.078-38.164-85.242-85.242-85.242s-85.242,38.164-85.242,85.242  c0,31.463,17.048,58.941,42.408,73.71"/>
<g>
    <path fill="#231F20" d="M173.653,282.14l-4.741-48.439c-0.059-0.58-0.327-1.092-0.715-1.482l-47.088,54.471   c0.48,0.449,1.127,0.714,1.82,0.676l48.578-2.721C172.82,284.568,173.783,283.448,173.653,282.14z"/>
</g>
<text transform="matrix(1 0 0 1 175.665 231.1914)" fill="#231F20" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" font-family="'Helvetica'" font-size="99.4919">A</text>
</svg>

我猜想这可能与图像的创建方式有关，但是找不到太多解决此问题的资源。任何帮助都将不胜感激！谢谢。
什么问题？（http://jsfiddle.net/Zeaklous/m3Jrs/） - Zach Saucier
4个回答
13

IcoMoon会忽略描边属性和文本对象，它只对填充形状感兴趣。在您的情况下，这意味着它只会导入圆曲线末端的三角形。

您需要将路径和文本转换为填充形状。在Inkscape中，尝试选择您的艺术品并按 CtrlShiftC 键。在Illustrator中，在“路径”菜单中有一个“轮廓描边”选项，将文本转换为轮廓的命令是 ⌘ShiftC（如果我没记错的话，在Mac上，否则可能是 ControlShiftC）。

如果您有任何重叠的对象，它们可能也必须合并在一起。

不要期望完美的结果。IcoMoon做得很好，但在某些情况下可能会将曲线转换为直线。

谢谢！最终我弄明白了如何使用路径查找器和对象选项卡 :) - Kshitiz
1
对于Inkskape，描边转路径的组合键是Ctrl+Alt+C，而对象转路径的组合键是Ctrl+Shift+C。 - Nicolai
6
我稍晚参加了这个聚会，但我遇到了同样的问题，所以我创建了一个能够解决该问题的 Node 包。
以下是我通过 fixer 处理后的 SVG 代码。
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
    color: red;
">
    <path d="M86.837 79.979 C 85.648 80.263,84.203 80.888,83.627 81.366 C 80.532 83.935,80.666 78.331,80.676 204.800 C 80.684 298.546,80.862 324.015,81.520 325.313 C 81.978 326.219,83.371 327.646,84.616 328.485 L 86.880 330.011 206.491 329.839 L 326.103 329.667 328.385 327.176 L 330.667 324.686 330.664 205.176 C 330.662 88.016,330.636 85.625,329.367 83.543 C 328.654 82.374,327.380 81.024,326.536 80.543 C 325.285 79.829,303.087 79.648,207.000 79.564 C 142.100 79.507,88.027 79.694,86.837 79.979 M315.835 204.833 L 315.667 315.000 205.667 315.000 L 95.667 315.000 95.498 204.833 L 95.329 94.667 205.667 94.667 L 316.004 94.667 315.835 204.833 M201.667 111.423 C 179.577 112.824,159.847 121.654,143.696 137.367 C 129.783 150.904,121.330 166.288,117.228 185.541 C 115.150 195.292,115.144 212.170,117.214 221.792 C 120.507 237.099,126.508 249.962,135.686 261.389 L 139.212 265.778 130.329 276.056 C 125.444 281.708,121.673 286.570,121.950 286.860 C 122.463 287.397,171.797 284.871,172.790 284.257 C 173.650 283.726,173.457 280.317,171.348 258.667 C 169.053 235.120,168.747 232.657,168.126 232.694 C 167.873 232.708,163.617 237.490,158.667 243.319 C 153.717 249.148,149.440 253.936,149.163 253.958 C 148.228 254.036,142.022 245.037,139.077 239.333 C 133.176 227.903,130.621 217.133,130.615 203.667 C 130.612 194.149,131.713 187.008,134.444 178.832 C 144.896 147.548,174.861 126.000,207.913 126.000 C 245.648 126.000,277.349 152.422,284.737 190.029 C 285.202 192.397,285.582 198.533,285.582 203.667 C 285.582 213.615,284.891 218.403,282.218 226.971 C 277.195 243.073,265.595 258.719,251.958 267.787 C 249.394 269.492,247.379 271.069,247.481 271.290 C 248.939 274.458,254.512 283.326,255.048 283.329 C 255.441 283.331,257.991 281.800,260.715 279.927 C 282.280 265.091,296.736 241.199,300.043 214.926 C 301.036 207.038,300.543 192.970,299.018 185.667 C 289.357 139.397,248.759 108.436,201.667 111.423 M202.120 160.810 C 201.391 162.748,195.065 179.433,188.064 197.888 C 181.062 216.343,175.333 231.568,175.333 231.721 C 175.333 231.875,178.049 232.000,181.367 232.000 L 187.401 232.000 188.262 229.833 C 188.736 228.642,190.255 224.436,191.638 220.488 L 194.154 213.310 209.828 213.488 L 225.502 213.667 228.665 222.667 L 231.829 231.667 237.968 231.859 C 243.609 232.036,244.075 231.955,243.722 230.859 C 243.510 230.203,237.210 213.467,229.721 193.667 L 216.105 157.667 209.776 157.477 L 203.447 157.286 202.120 160.810 M215.923 187.752 C 218.899 195.865,221.333 202.690,221.333 202.918 C 221.333 203.147,216.083 203.333,209.667 203.333 C 203.250 203.333,198.000 203.185,198.000 203.003 C 198.000 202.821,200.283 196.446,203.072 188.836 C 205.862 181.226,208.455 174.138,208.833 173.084 C 209.715 170.630,209.421 170.024,215.923 187.752 " stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>

  • 使用该软件包修复后，以下是在icomoon.io上SVG的效果。

  • 修复之前，它看起来像这样。

    请注意图标中间缺少的"A"和颜色不匹配。

如果你能够降低精度（例如将10,000个像素压缩成1个），那么使用SVGMO可以节省空间。 - Danny '365CSI' Engelman
@Danny'365CSI'Engelman，您是指使用这个吗？https://jakearchibald.github.io/svgomg/ 它在某些地方不起作用吗？ - Ghustavh Ehm
Jake的网站对我来说是有效的，它是https://github.com/svg/svgo的GUI界面。 - Danny '365CSI' Engelman
我们有一些误解。我建议将SVGO功能添加到您的工具中。 - Danny '365CSI' Engelman
谢谢您的澄清，我会进一步了解。 - Ghustavh Ehm
显示剩余2条评论
0

在我的情况下，我在这里添加了我的SVG svg-convert-stroke-to-fill 并下载了一个新的转换后的SVG并上传到icomoon，它可以正常工作。

1
目前您的回答不够明确。请 [编辑] 添加附加细节，以便其他人理解如何回答该问题。您可以在 帮助中心 中找到更多有关撰写良好答案的信息。 - Community
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接