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?
SVG's containing mask tags are rendering wrong.
Airplane Icon:
After svgtofont:
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): https://github.com/svg/svgo/issues/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?