Skip to content

zat package removes mask property when compressing SVGs #352

@kibin

Description

@kibin

When I run zat package, all my SVG-icons look broken.
When I start to investigate what’s going on I see that all the mask properties has been stripped from the resulting file.

Before (see next-to-last string, path tag):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs/>
  <defs>
    <mask id="b">
      <radialGradient id="a">
        <stop offset="0" stop-color="#fff"/>
        <stop offset="1"/>
      </radialGradient>
      <text y="50" fill="url(#a)" font-family="Arial" font-size="20">
        SVG Mask
      </text>
    </mask>
  </defs>
  <path fill="#B63FC4" d="M0 0h100v100H0z" mask="url(#b)"/>
</svg>

After (with all the white spaces returned):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs/>
  <defs>
    <mask id="b">
      <radialGradient id="a">
        <stop offset="0" stop-color="#fff"/>
        <stop offset="1"/>
      </radialGradient>
      <text y="50" fill="url(#a)" font-family="Arial" font-size="20">
        SVG Mask 
      </text>
    </mask>
  </defs>
  <path fill="#B63FC4" d="M0 0h100v100H0z"/>
</svg>

You can see that the last <path> tag has no mask property, which breaks SVG and turns it into a simple rectangle instead of text with a mask.
Also it’s strange that this operation (compressing) is destructive on the source (it’s affecting svgs in zat/assets).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions