search

glyphr-studio / Glyphr-Studio-1

Now deprecated, Glyphr Studio v1 served us well from 2010 to 2023.
https://www.glyphrstudio.com
1.07k stars 93 forks source link

SVG circle shapes distorted #301

Closed Fluxlicious closed 4 years ago

Fluxlicious commented 4 years ago

I'm trying to import some existing SVG icons. They all have a black background circle, but the circle shape is distorted upon import. The rest of the shapes seem to be fine.

Here's an example SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.2 87.2"><title>Alle_leeftijden</title><g id="Layer_2" data-name="Layer 2"><g id="Kijkw-2020"><path d="M0,43.6A43.6,43.6,0,1,1,43.6,87.2,43.51,43.51,0,0,1,0,43.6Zm22.6,27V52h3.2V47.7H14.9V52h3.4V70.6Zm1.8-29.1V36.2H36v5.3h7.9V20.9a2,2,0,0,0-.6-1.5L40.1,16a1.72,1.72,0,0,0-1.5-.6H21.7a2,2,0,0,0-1.5.6l-3.1,3.3a2.2,2.2,0,0,0-.6,1.5V41.5Zm0-18.9H36v6.5H24.4Zm6.9,48H36a2,2,0,0,0,1.5-.6l1.8-1.6a2,2,0,0,0,.6-1.5V51.4a1.83,1.83,0,0,0-.6-1.5l-1.8-1.6a2,2,0,0,0-1.5-.6H31.3a2,2,0,0,0-1.5.6l-1.6,1.6a2,2,0,0,0-.6,1.5V66.9a2,2,0,0,0,.6,1.5L29.8,70A1.83,1.83,0,0,0,31.3,70.6ZM31.9,52h3.7V66.3H31.9ZM46.8,70.6h4.8a1.83,1.83,0,0,0,1.5-.6l1.6-1.6a2,2,0,0,0,.6-1.5V47.7H51.1V66.3H47.5V47.7H43.1V66.9a2,2,0,0,0,.6,1.5L45.3,70A1.83,1.83,0,0,0,46.8,70.6ZM70.6,41.5V34.9H58.4V15.4H50.5V41.5ZM62,70.6h4.8a1.83,1.83,0,0,0,1.5-.6L70,68.4a1.83,1.83,0,0,0,.6-1.5V60.8a1.83,1.83,0,0,0-.6-1.5l-1.8-1.7a1.83,1.83,0,0,0-1.5-.6h-4V52h3.6v2.1h4.3V51.4a1.83,1.83,0,0,0-.6-1.5l-1.7-1.6a1.83,1.83,0,0,0-1.5-.6H62a2,2,0,0,0-1.5.6l-1.6,1.6a2,2,0,0,0-.6,1.5v6a2,2,0,0,0,.6,1.5l1.6,1.7a2,2,0,0,0,1.5.6h4.3v5.1H62.7V64H58.3v2.9a2,2,0,0,0,.6,1.5L60.5,70A1.83,1.83,0,0,0,62,70.6Z"/></g></g></svg>
mattlag commented 4 years ago

Hi! I think you found a bug, I will track it down and fix it. But, there is a way you can address the error - the issue is that the second handle is being hidden (that's the bug) and you can fix it by checking the "handle 2" checkbox:

image

Also, as a note, these are very small drawings - you may possibly start to see some rounding errors. It's recommended that OTF files have only whole numbers... So if you could scale up your circles from approximately 90px to 1000px (or whatever the Cap Height is for your font), they may behave better once they are a font.

There is an option in Project Settings to toggle this rounding behavior: image

Which is why you may see stuff like this: image

Fluxlicious commented 4 years ago

Hi Matt, Thank you for your suggestion, that seems to fix it indeed. As for the rounding issue, i can see what you mean when you zoom in a lot, but it's never as bad as in your screenshot 🤨

For now i'm using the IcoMoon app to create my font. I was actually looking for something that was able to bundle multiple icons from different sources in a font for web usage. IcoMoon seems to do just that. Glyphr looks awesome for creating fonts from scratch, but it's overkill for my use case.