search

sapegin / grunt-webfont

SVG to webfont converter for Grunt
MIT License
1.11k stars 210 forks source link

Some SVG icons are displayed / filled incorrectly #382

Open MrToph opened 6 years ago

MrToph commented 6 years ago

Hi,

I noticed some SVG icons are displayed incorrectly when building the font with fontforge (on MacOS).

Here's how it looks like in any SVG previewer: screen shot 2018-06-01 at 11 36 40

Here's how it looks like in the webfont: screen shot 2018-06-01 at 11 36 19

It doesn't fill the paths correctly. They are filled with black instead of the specified color.

The svg is pretty simple it only consists of three paths with fill and stroke colors. Here's the svg if you want to try it yourself:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<path fill="#fff" stroke="#000" stroke-width="46.5455" d="M69.818 310.528h161.257l134.563-113.385c8.043-6.814 18.537-10.957 29.999-10.957 25.705 0 46.543 20.836 46.545 46.54v0 558.545c-0.003 25.704-20.841 46.541-46.545 46.541-11.462 0-21.956-4.143-30.066-11.013l0.068 0.056-134.54-113.385h-161.28c-25.706 0-46.545-20.839-46.545-46.545v0-309.853c0-25.706 20.839-46.545 46.545-46.545v0z"></path>
<path fill="#fff" d="M679.168 512l84.177 84.177c6.749 6.749 6.074 18.409-1.513 26.019-7.61 7.587-19.247 8.262-26.019 1.513l-84.177-84.177-84.177 84.177c-6.749 6.749-18.409 6.074-26.019-1.513-7.587-7.61-8.262-19.247-1.513-26.019l84.177-84.177-84.177-84.177c-6.749-6.749-6.074-18.409 1.513-26.019 7.61-7.587 19.247-8.262 26.019-1.513l84.177 84.177 84.177-84.177c6.749-6.749 18.409-6.074 26.019 1.513 7.587 7.61 8.262 19.247 1.513 26.019l-84.177 84.177z"></path>
<path fill="#000" d="M679.168 512l84.177-84.177c6.749-6.749 6.074-18.409-1.513-26.019-7.61-7.587-19.247-8.262-26.019-1.513l-84.177 84.177-84.177-84.177c-6.749-6.749-18.409-6.074-26.019 1.513-7.587 7.61-8.262 19.247-1.513 26.019l84.177 84.177-84.177 84.177c-6.749 6.749-6.074 18.409 1.513 26.019 7.61 7.587 19.247 8.262 26.019 1.513l84.177-84.177 84.177 84.177c6.749 6.749 18.409 6.074 26.019-1.513 7.587-7.61 8.262-19.247 1.513-26.019l-84.177-84.177zM796.253 563.27c25.833 25.833 23.459 66.863-1.513 91.834s-65.978 27.369-91.834 1.513l-51.27-51.27-51.27 51.27c-25.833 25.833-66.863 23.459-91.834-1.513s-27.369-65.978-1.513-91.834l51.27-51.27-51.27-51.27c-25.833-25.833-23.459-66.863 1.513-91.834s65.978-27.369 91.834-1.513l51.27 51.27 51.27-51.27c25.833-25.833 66.863-23.459 91.834 1.513s27.369 65.978 1.513 91.834l-51.27 51.27 51.27 51.27z"></path>
</svg>
jleider commented 4 years ago

I've found that SVGs with strokes generally exhibit these types of problems when generating font icons. Try refactoring your SVG to use fills only.