Question

I'm trying to convert a .svg file to a font, by using http://icomoon.io/app/ app. I don't know why, but it is not working. I already tried it before with other files, and it worked.

Here is code for svg image (if you need to see picture just paste it in editor and save as .svg file I guess) I'm not sure, but I think there could be something wrong in a svg code, is it up to lates standards?

<?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>
Was it helpful?

Solution

'Problem' lays within the app.

Basicly it changes every path to the same color, so white overlapping paths just blend in. You can delete first path

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

(which is just unnecessary square in the background) to see that it actually works. You will have to convert your paths into a shape so there will be no overlaps but 'cuts'.


Out of boredom I created working version:

<?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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top