Feature request: remove useless masks

[lifeiscontent]

Description

given an svg file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60">
  <defs>
    <path id="a-to-z-a" d="M20.588,26 L19.1,22.424 L11.9,22.424 L10.412,26 L7.892,26 L15.308,8.96 L15.644,8.96 L23.084,26 L20.588,26 Z M12.812,20.216 L18.188,20.216 L15.5,13.736 L12.812,20.216 Z M47.744,34.2 L47.744,34.488 L40.64,48.792 L47.504,48.792 L47.504,51 L37.256,51 L37.256,50.664 L44.408,36.408 L37.352,36.408 L37.352,34.2 L47.744,34.2 Z M27,18.2532924 C27,18.1134029 27.1139402,18 27.2557783,18 L29.7442217,18 C29.8854841,18 30,18.1070023 30,18.2532924 L30,41.7467076 C30,41.8865971 29.8860598,42 29.7442217,42 L27.2557783,42 C27.1145159,42 27,41.8929977 27,41.7467076 L27,18.2532924 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="a-to-z-b" fill="#fff">
      <use xlink:href="#a-to-z-a"/>
    </mask>
  </g>
</svg>

I'd like to remove the useless mask that sketch produces from the artboard/symbol and instead of the use xlink:href="#a-to-z" it should inline the path and remove defs.

Context

Chrome doesn't render masks correctly.

[zomars]

Can we remove defs altogether?

[peternowell]

@zomars you can do that in SVGito! :)

[zomars]

Is there a way to integrate it @peternowell ?

[mathieudutour]

Version 1.6.0 allows to load a custom SVGO plugin by specifying a relative path: https://github.com/BohemianCoding/svgo-compressor#custom-svgo-plugins

It does require Sketch 52 tho.

Feel free to send a PR to add your svgo plugin to the list if you end up building it :)

It seems that someone started a plugin that does exactly this: svg/svgo#670

[username1290]

@zomars you can do that in SVGito! :)

sir, tried this file and mask is still there:

Input:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <defs> <polygon id="arrow_right_24px_inactive-a" points="8.59 17.34 13.17 12.75 8.59 8.16 10 6.75 16 12.75 10 18.75"/> </defs> <g fill="none" fill-rule="evenodd"> <mask id="arrow_right_24px_inactive-b" fill="#fff"> <use xlink:href="#arrow_right_24px_inactive-a"/> </mask> <g fill="#000" fill-opacity=".54" mask="url(#arrow_right_24px_inactive-b)"> <rect width="24" height="24"/> </g> </g> </svg>

Output:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <g fill="none"> <mask id="arrow_right_24px_inactive-b" fill="#fff"> <polygon points="8.59 17.34 13.17 12.75 8.59 8.16 10 6.75 16 12.75 10 18.75"></polygon> </mask> <g fill="#000" fill-opacity=".54" mask="url(#arrow_right_24px_inactive-b)"> <rect width="24" height="24"></rect> </g> </g> </svg>

EDIT: realized you were answering to zomars

[epurban]

Was this ever solved? I'm having the same issue with svgs exported from sketch.

[username1290]

I guess not. Ended up doing it manually, removing every extra layer in the original Sketch file 'til it worked.