Skip to content
This repository has been archived by the owner on May 29, 2020. It is now read-only.

Some SVG icons are displayed / filled incorrectly #382

Open
MrToph opened this issue Jun 1, 2018 · 1 comment
Open

Some SVG icons are displayed / filled incorrectly #382

MrToph opened this issue Jun 1, 2018 · 1 comment

Comments

@MrToph
Copy link

MrToph commented Jun 1, 2018

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
Copy link

jleider commented Dec 30, 2019

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants