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

gradients are lost in compression #1722

Closed
ofrias opened this issue Dec 5, 2022 · 1 comment · Fixed by #1795
Closed

gradients are lost in compression #1722

ofrias opened this issue Dec 5, 2022 · 1 comment · Fixed by #1795
Assignees
Labels

Comments

@ofrias
Copy link

ofrias commented Dec 5, 2022

Describe the bug
When compressing this file with svgo default settings the gradients are lost.

To Reproduce

  1. Download https://upload.wikimedia.org/wikipedia/commons/1/19/Logo_TVE-1.svg
  2. Run svgo Logo_TVE-1.svg

Expected behavior
Gradients should be preserved.

Desktop (please complete the following information):

  • SVGO Version 3.0.2
  • OS: Ubuntu 22.04.1 LTS

Additional context
If I compress the file first with scour and then with svgo everything works OK.

@ofrias ofrias added the bug label Dec 5, 2022
@SethFalco
Copy link
Member

MRE of the issue, though it's actually the blur that was lost, not the gradient!

I haven't checked the code yet, but the problem is in the cleanupIds plugin. For some reason, it decides to remove the id="c" attribute from the filter, so nodes referencing it lose the blur.

original.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1950.1315" height="1740.1298">
  <defs>
    <linearGradient id="a">
      <stop stop-color="#f00" offset="0"/>
    </linearGradient>
    <filter id="c" style="color-interpolation-filters:sRGB" x="-0.2760295" width="1.5520591" y="-0.33142158" height="1.6628431">
      <feGaussianBlur stdDeviation="331.22039"/>
    </filter>
  </defs>
  <g transform="matrix(5.8862959,0,0,5.8862959,-228.3949,1414.6785)">
    <path d="m 6416.0915,21026.021 c 496.2734,-430.162 1156.7926,-524.889 1495.2326,-581.643 1461.5227,-245.087 1539.467,2033.775 96.1224,2234.099 -524.6707,72.82 -1265.3758,450.675 -1679.5812,-402.754 -315.0174,-535.208 -91.5956,-1058.609 88.2262,-1249.702 z" style="opacity:1;fill:url(#a);fill-opacity:1;stroke:none;stroke-width:16.60000038;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#c)" transform="matrix(0.07412091,0,0,0.07412091,-359.59058,-1695.4044)"/>
  </g>
</svg>

svgo.config.js

module.exports = {
  plugins: [
    "cleanupIds",
  ],
};

optimized.svg (prettified)

<svg xmlns="http://www.w3.org/2000/svg" width="1950.1315" height="1740.1298">
  <defs>
    <linearGradient id="a">
      <stop stop-color="#f00" offset="0"/>
    </linearGradient>
    <filter style="color-interpolation-filters:sRGB" x="-0.2760295" width="1.5520591" y="-0.33142158" height="1.6628431">
      <feGaussianBlur stdDeviation="331.22039"/>
    </filter>
  </defs>
  <g transform="matrix(5.8862959,0,0,5.8862959,-228.3949,1414.6785)">
    <path d="m 6416.0915,21026.021 c 496.2734,-430.162 1156.7926,-524.889 1495.2326,-581.643 1461.5227,-245.087 1539.467,2033.775 96.1224,2234.099 -524.6707,72.82 -1265.3758,450.675 -1679.5812,-402.754 -315.0174,-535.208 -91.5956,-1058.609 88.2262,-1249.702 z" style="opacity:1;fill:url(#a);fill-opacity:1;stroke:none;stroke-width:16.60000038;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#c)" transform="matrix(0.07412091,0,0,0.07412091,-359.59058,-1695.4044)"/>
  </g>
</svg>

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

Successfully merging a pull request may close this issue.

2 participants