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's with mask tags are rendering wrong #164

Open
metadorm opened this issue May 24, 2022 · 0 comments
Open

SVG's with mask tags are rendering wrong #164

metadorm opened this issue May 24, 2022 · 0 comments

Comments

@metadorm
Copy link

SVG's containing mask tags are rendering wrong.

Airplane Icon:
image

After svgtofont:
image

SVG Code:
<svg width="24" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="21"><path d="M21.5 14.925c0-.36-.19-.69-.49-.89l-7.51-4.69v-5.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v5.5l-7.51 4.69a1.05 1.05 0 0 0 .87 1.89l6.64-2.08v5.5l-1.8 1.35a.48.48 0 0 0-.2.4v.59c0 .33.32.57.64.48l2.86-.82 2.86.82c.32.09.64-.15.64-.48v-.59a.48.48 0 0 0-.2-.4l-1.8-1.35v-5.5l6.64 2.08c.68.21 1.36-.3 1.36-1Z" fill="#000"/></mask><g mask="url(#a)"><path fill="currentColor" d="M0 .265h24v24H0z"/></g></svg>

SVGO is also not supporting flattening (or converting mask to path): svg/svgo#680

For some simple icons (1 path icons), I can simply remove mask tag to make them render like they supposed to be, but more complex (2 or more paths and multiple mask overlays) are not rendering correctly.

What can I do to make them render 1:1 to it's original?

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

1 participant