Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG not rending properly #74

Open
eueddem opened this issue Apr 7, 2020 · 5 comments
Open

SVG not rending properly #74

eueddem opened this issue Apr 7, 2020 · 5 comments

Comments

@eueddem
Copy link

eueddem commented Apr 7, 2020

Hello,

I tried to export this svg:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#231f20}</style></defs><path class="cls-1" d="M11.5 0h1v3.99h-1zM11.5 19.99h1V24h-1zM19.99 11.5H24v1h-4.01zM0 11.5h4.01v1H0z"/><path class="cls-1" transform="rotate(-45 19.05 4.95)" d="M17.02 4.45h4.06v1h-4.06z"/><path class="cls-1" transform="rotate(-45 4.95 19.05)" d="M2.92 18.55h4.06v1H2.92z"/><path class="cls-1" transform="rotate(-45 19.05 19.05)" d="M18.55 17.02h1v4.06h-1z"/><path class="cls-1" transform="rotate(-45 4.95 4.95)" d="M4.45 2.92h1v4.06h-1z"/><path class="cls-1" d="M12 5a7 7 0 1 0 7 7 7 7 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"/></svg>

Preview:
Screen Shot 2020-04-06 at 5 34 56 PM

But after export via icon-font-generator, it is rendered like this:
Screen Shot 2020-04-06 at 5 32 55 PM

Any idea how to fix this? I tried SVGO, but it did not help.

Thank you for great app.

@0000marcell
Copy link

I'm having the exact same problem

@areve
Copy link

areve commented May 1, 2020

me too all my icons are wonky

@areve
Copy link

areve commented May 1, 2020

I've been trying other libraries and https://www.npmjs.com/package/svgicons2svgfont raised a warning saying "A fontHeight of at least than 1000 is recommended, otherwise further steps (rounding in svg2ttf) could lead to ugly results. Use the fontHeight option to scale icons."

This does fix the problem for me, I'm not sure how to set this in this package though.

@BrunnerLivio
Copy link

BrunnerLivio commented May 2, 2020

This is a duplicate issue.
As @areve mentioned —height 1000 helps or see my comment on a previous issue

@areve
Copy link

areve commented May 2, 2020

--height 1000 fixed it for me, I suggest a warning should be added similar to the other library I mentioned.

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

No branches or pull requests

4 participants