为什么这个.svg文件没有转换为字体?

时间:2013-03-01 19:41:28

标签: html html5 fonts svg icon-fonts

我正在尝试使用http://icomoon.io/app/应用将.svg文件转换为字体。 我不知道为什么,但它不起作用。我之前已经尝试过使用其他文件,但它确实有效。

这是svg图像的代码(如果需要查看图片只需将其粘贴到编辑器中并保存为.svg文件我猜) 我不确定,但我认为svg代码可能有问题,是否符合标准?

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="128pt" height="128pt" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" />
<path fill="#010101" d=" M 53.05 7.85 C 69.60 4.58 87.31 9.41 100.07 20.39 C 100.09 32.60 100.02 44.80 100.02 57.00 C 100.22 60.35 98.92 63.52 97.31 66.38 C 94.98 70.57 92.63 74.75 90.33 78.95 C 89.56 78.96 88.03 78.97 87.27 78.97 C 83.90 84.45 80.91 90.15 77.90 95.83 C 79.17 96.72 80.45 97.58 81.74 98.44 C 80.54 100.57 79.09 102.65 78.71 105.13 C 82.31 106.41 82.80 101.95 84.36 99.87 C 85.56 100.39 86.71 101.06 88.00 101.35 C 89.27 100.96 89.70 99.54 90.37 98.54 C 92.93 93.79 95.58 89.09 98.16 84.36 C 97.57 83.89 96.39 82.95 95.80 82.48 C 98.60 76.74 102.24 71.44 104.82 65.58 C 107.10 60.38 106.35 54.59 106.48 49.08 C 106.59 41.93 106.35 34.77 106.69 27.62 C 115.57 37.75 119.81 51.61 119.26 64.98 C 118.75 80.67 111.02 95.89 98.83 105.75 C 87.62 115.07 72.58 119.59 58.09 118.04 C 42.23 116.69 27.40 107.80 18.19 94.90 C 5.63 77.77 4.45 53.31 15.17 35.00 C 23.09 21.06 37.25 10.76 53.05 7.85 Z" />
<path fill="#ffffff" d=" M 42.57 16.50 C 43.91 15.74 46.15 15.18 46.82 17.24 C 45.33 18.71 43.37 19.45 41.53 20.35 C 31.97 25.09 24.31 33.34 20.08 43.11 C 19.81 45.14 15.82 44.62 17.09 42.48 C 21.83 30.96 31.20 21.53 42.57 16.50 Z" />
<path fill="#ffffff" d=" M 24.15 46.38 C 28.38 35.64 37.29 26.97 48.08 22.92 C 49.71 23.36 49.78 25.53 48.24 26.05 C 39.99 29.47 32.89 35.71 28.77 43.65 C 28.00 45.20 27.09 46.68 26.07 48.08 C 25.59 47.66 24.63 46.81 24.15 46.38 Z" />
<path fill="#ffffff" d=" M 49.39 31.08 C 50.87 30.25 51.93 30.60 52.56 32.14 C 51.39 33.88 49.23 34.34 47.52 35.38 C 42.26 38.38 37.89 43.03 35.31 48.53 C 34.85 49.58 34.15 50.46 33.24 51.18 C 32.37 50.60 31.20 49.45 32.06 48.34 C 35.36 40.67 41.73 34.37 49.39 31.08 Z" />
<path fill="#ffffff" d=" M 57.12 43.35 C 64.70 40.81 73.62 43.30 78.78 49.39 C 85.63 57.22 85.03 70.27 77.30 77.29 C 70.25 84.18 58.20 84.72 50.68 78.29 C 44.68 73.57 41.68 65.19 43.75 57.79 C 45.27 51.06 50.57 45.44 57.12 43.35 Z" />
<path fill="#010101" d=" M 59.35 46.59 C 67.78 44.09 77.35 49.99 79.35 58.47 C 82.31 68.10 74.15 79.10 64.08 79.01 C 56.56 79.62 49.36 74.07 47.41 66.90 C 44.96 58.31 50.63 48.59 59.35 46.59 Z" />
<path fill="#ffffff" d=" M 57.86 62.84 C 57.21 57.61 64.96 54.74 67.86 59.24 C 71.45 63.49 66.35 69.54 61.41 68.10 C 59.77 66.76 57.55 65.28 57.86 62.84 Z" />
</svg>

1 个答案:

答案 0 :(得分:2)

'问题'存在于应用内。

基本上它会将每条路径更改为相同的颜色,因此白色重叠路径只是混合在一起。您可以删除第一条路径

<path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" />

(这只是背景中不必要的方块),看它确实有效。你必须将你的路径转换成一个形状,这样就不会有重叠而是“削减”。


出于无聊,我创建了工作版本:

<?xml version="1.0" encoding="utf-8"?>
<!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" viewBox="0 0 50 50" xml:space="preserve">
    <path d="M50,26.1c-0.2,7-3.7,13.9-9.2,18.3c-5,4.2-11.8,6.2-18.3,5.5 c-7.1-0.6-13.8-4.6-17.9-10.4C-1,31.8-1.5,20.8,3.3,12.6c3.6-6.3,9.9-10.9,17-12.2C27.7-1,35.6,1.1,41.4,6.1c0,5.5,0,11,0,16.4 c0.1,1.5-0.5,2.9-1.2,4.2c-1,1.9-2.1,3.8-3.1,5.6c-0.3,0-1,0-1.4,0c-1.5,2.5-2.9,5-4.2,7.6c0.6,0.4,1.1,0.8,1.7,1.2 c-0.5,1-1.2,1.9-1.4,3c1.6,0.6,1.8-1.4,2.5-2.4c0.5,0.2,1.1,0.5,1.6,0.7c0.6-0.2,0.8-0.8,1.1-1.3c1.1-2.1,2.3-4.2,3.5-6.4 c-0.3-0.2-0.8-0.6-1.1-0.8c1.3-2.6,2.9-5,4-7.6c1-2.3,0.7-4.9,0.7-7.4c0-3.2-0.1-6.4,0.1-9.6C48.3,13.9,50.2,20.1,50,26.1z M15.6,4.3C10.5,6.6,6.3,10.8,4.1,16c-0.6,1,1.2,1.2,1.3,0.3c1.9-4.4,5.3-8.1,9.6-10.2c0.8-0.4,1.7-0.7,2.4-1.4 C17.2,3.7,16.2,4,15.6,4.3z M18,7.2C13.2,9,9.2,12.9,7.3,17.7c0.2,0.2,0.6,0.6,0.9,0.8c0.5-0.6,0.9-1.3,1.2-2c1.8-3.6,5-6.4,8.7-7.9 C18.8,8.4,18.8,7.4,18,7.2z M18.6,10.9c-3.4,1.5-6.3,4.3-7.8,7.7c-0.4,0.5,0.1,1,0.5,1.3c0.4-0.3,0.7-0.7,0.9-1.2 c1.2-2.5,3.1-4.6,5.5-5.9c0.8-0.5,1.7-0.7,2.3-1.5C19.8,10.6,19.3,10.5,18.6,10.9z M31.8,19.1c-2.3-2.7-6.3-3.8-9.7-2.7 c-2.9,0.9-5.3,3.5-6,6.5c-0.9,3.3,0.4,7.1,3.1,9.2c3.4,2.9,8.8,2.6,11.9-0.4C34.6,28.4,34.9,22.6,31.8,19.1z M25.2,32.4 c-3.4,0.3-6.6-2.2-7.5-5.4c-1.1-3.9,1.4-8.2,5.4-9.1c3.8-1.1,8.1,1.5,9,5.3C33.4,27.5,29.7,32.4,25.2,32.4z M26.9,23.5 c-1.3-2-4.8-0.7-4.5,1.6c-0.1,1.1,0.9,1.8,1.6,2.4C26.2,28.1,28.5,25.4,26.9,23.5z"/>
</svg>