nfroidure/svgicons2svgfont

Font inverted when line crossed with a closed circle

YuJianrong opened this issue · 2 comments

YuJianrong commented

Issue

I'm a gentledev i:

  • fully read the README recently
  • searched for existing issues
  • checked i'm up to date with the latest version of the project

My svg looks like this:

<svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
<path d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" />
<path d="M10.5084 5.10761C11.0029 5.35357 11.2043 5.95383 10.9584 6.44832C9.55914 9.26129 6.87322 11.3234 3.66597 11.8617C3.12131 11.9531 2.60567 11.5857 2.51426 11.041C2.42285 10.4963 2.79029 9.98068 3.33496 9.88928C5.89528 9.4596 8.04677 7.81102 9.16766 5.5576C9.41363 5.06311 10.0139 4.86164 10.5084 5.10761Z" />
<path d="M8.3837 2.79462C8.88689 2.56698 9.47934 2.79035 9.70699 3.29354C10.9635 6.07089 13.7575 8 17 8C18.002 8 18.9588 7.81625 19.8401 7.48149C20.3564 7.28537 20.9339 7.54493 21.13 8.06122C21.3262 8.57751 21.0666 9.15503 20.5503 9.35115C19.4457 9.77074 18.2485 10 17 10C12.9434 10 9.45315 7.58466 7.88479 4.11791C7.65714 3.61472 7.88052 3.02226 8.3837 2.79462Z" />
</svg>

It combined by three paths, the first one is the closed circle, the second and third one are some shapes overlapped with the circle. Some of the intersections are inverted

Expected behavior

image

Actual behavior

image

Steps to reproduce the behavior

Upload the svg to http://nfroidure.github.io/svgiconfont/

sirphoenix commented

Can confirm this, having a similar issue with my SVG, code below:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.00063C6 4.65652 4.6568 6 3 6C1.3432 6 0 4.65652 0 3.00063C0 1.34348 1.3432 0 3 0C4.6568 0 6 1.34348 6 3.00063" fill="#A1A1A1" /> <path d="M19 16.5005C19 17.8804 17.8807 19 16.5 19C15.1193 19 14 17.8804 14 16.5005C14 15.1196 15.1193 14 16.5 14C17.8807 14 19 15.1196 19 16.5005" stroke="#979797" stroke-width="1.5" /> <path d="M3.00391 3L3.00391 16.3583H9.88918" stroke="#A1A1A1" stroke-width="1.5" /> <path d="M11.7031 16.5L7.99915 20V13L11.7031 16.5Z" fill="#A1A1A1" /> </svg>

original:
image

iconfont result:
image

jonathanj commented

I have this issue on an icon that doesn't use fill-rule. In the SVG below it's a single path but I've made several other export attempts and the output (when converted into an icon font) is the same. The only solution I've found is to manually edit the paths to not overlap.

Original (as seen in Sketch):
image

Rendered (in the icon font, produced by icon-font-generator):
image

As noted in #62, Icomoon doesn't seem to have this issue, so it may be an issue with the conversion from the input SVG somewhere along the way.

SVG source:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <path d="M11.063 11.063v7.938h9.875v-7.938zM10.188 9.313h11.625c0.5 0 0.875 0.375 0.875 0.875v9.688c0 0.5-0.375 0.875-0.875 0.875h-11.625c-0.5 0-0.875-0.375-0.875-0.875v-9.688c0-0.5 0.375-0.875 0.875-0.875zM16 2.75l-13.875 6.313c-0.438 0.188-0.938 0-1.188-0.438-0.188-0.438 0-1 0.5-1.188l14.188-6.5c0.25-0.063 0.5-0.063 0.75 0l14.188 6.5c0.5 0.188 0.688 0.75 0.5 1.188-0.25 0.438-0.75 0.625-1.188 0.438zM15.125 10.188c0-0.5 0.375-0.875 0.875-0.875s0.875 0.375 0.875 0.875v3.25c0 0.438-0.375 0.875-0.875 0.875s-0.875-0.438-0.875-0.875zM5.25 20.75v7.938h9.875v-7.938zM4.375 19h11.625c0.5 0 0.875 0.375 0.875 0.875v9.688c0 0.5-0.375 0.875-0.875 0.875h-11.625c-0.5 0-0.875-0.375-0.875-0.875v-9.688c0-0.5 0.375-0.875 0.875-0.875zM9.313 19.875c0-0.5 0.375-0.875 0.875-0.875s0.875 0.375 0.875 0.875v3.25c0 0.5-0.375 0.875-0.875 0.875s-0.875-0.375-0.875-0.875zM16.875 28.688h9.875v-7.938h-9.875zM16 19h11.625c0.5 0 0.875 0.375 0.875 0.875v9.688c0 0.5-0.375 0.875-0.875 0.875h-11.625c-0.5 0-0.875-0.375-0.875-0.875v-9.688c0-0.5 0.375-0.875 0.875-0.875zM20.938 19.875c0-0.5 0.375-0.875 0.875-0.875s0.875 0.375 0.875 0.875v3.25c0 0.5-0.375 0.875-0.875 0.875s-0.875-0.375-0.875-0.875z"/>
</svg>