Cannot convert svg properly with viewbox

[TylerYang]

Hi @nfroidure ,
Here are my svg and the converted svg font,

and below is my svg source code(apple.svg),

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.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" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#333333" d="M11.7,8.4c0,1.9,1.8,2.5,1.8,2.5c0,0-0.3,0.9-0.9,1.8
    c-0.6,0.8-1.1,1.5-2,1.5c-0.9,0-1.2-0.5-2.2-0.5c-1,0-1.3,0.5-2.2,0.5c-0.9,0-1.6-0.8-2.1-1.6c-1.2-1.5-2-4.4-0.8-6.3
    c0.6-0.9,1.6-1.5,2.8-1.6c0.9,0,1.7,0.5,2.2,0.5c0.5,0,1.5-0.7,2.6-0.6c0.4,0,1.7,0.2,2.5,1.2C13,6.1,11.6,6.8,11.7,8.4z M8,4.6
    C7.9,3.9,8.3,3.2,8.7,2.7c0.5-0.5,1.3-0.9,2-0.9c0.1,0.7-0.2,1.5-0.7,2C9.5,4.3,8.7,4.7,8,4.6z"/>
</svg>

Apparently it was being converted in a wrong way. However if I add one more icon into my folder(Copy from gulp-svgicons2svgfont/testsfixtures/cleanicons/basket.svg,

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="150"
   height="150"
   viewBox="0 0 150 150"
   id="svg2">
  <path
     d="m 10,31.20545 1.71448,12.00139 25.11569,0 11.851,68.85007 82.83665,0 L 140,49.91438 l -92.16104,0 -3.06802,-18.70893 -34.77094,0 z m 47.012957,88.64184 c -5.560463,0 -10.076357,4.51685 -10.076357,10.07635 0,5.56046 4.515894,10.07636 10.076357,10.07636 5.556613,0 10.076354,-4.5159 10.076354,-10.07636 0,-5.5595 -4.519741,-10.07635 -10.076354,-10.07635 z m 64.458583,0 c -5.5593,0 -10.07635,4.51705 -10.07635,10.07635 0,5.5593 4.51705,10.07636 10.07635,10.07636 5.5593,0 10.04628,-4.51706 10.04628,-10.07636 0,-5.5593 -4.48698,-10.07635 -10.04628,-10.07635 z"
     id="path15" />
</svg>

Then the result is right.(The img in the below)

Seems the only different thing(width and height are not the reason, I already try) between basket.svg and apple.svg is the path of apple.svg is drawing in a small shape(the attribute d in path tag) and use the viewBox to magnify it.

I guess this was the 3rd party component didn't convert the svg properly when the path was pretty small?

Any help would be appreciated.

[nfroidure]

@TylerYang thank you for such a well documented issue. Unfortunately, that's a well known issue documented in the end of the usage section of the README https://github.com/nfroidure/gulp-iconfont#usage

We should add a warning when the font height is resolved to a number under 1000, feel free to PR svgicons2svgfont if you feel comfortable with adding this.

[TylerYang]

@nfroidure My bad. No problem, I will add a PR later. Thx for your help. 👍

[TylerYang]

@nfroidure How about auto-increase the fontHeight feature?

[nfroidure]

Not sure. It would lock users to a particular size, one could want to use a small size with simpler icons for some reason.

[TylerYang]

You are right, it will be better to let the other developer make the decision.