svgo removing @keyframes

[719media]

trafficstars

svgo is removing @keyframes from

For example,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    .ring {
      animation: spinner 1s linear infinite;
    }

    @keyframes spinner {
      to {
        transform: rotate(360deg);
      }
    }
  </style>
  <g class="ring">
    <path fill="#9f2fdf" d="M498.5 250C498.5 112.6 387.4 1.5 250 1.5V10c132.7 0 240 107.3 240 240h8.5z"/>
  </g>
</svg>

the @keyframes portion is removed

[michael5r]

We're seeing this issue as well - a quick fix is to set minifyStyles: false in the config.

[Connum]

I think this should be mentioned in the docs or maybe even set as the default setting. Or, even better, minifyStyles should still keep @keyframes.

[danbeam]

additional note: I think this may have to do with using @keyframes with from/to. if you just change to 0%/100% (respectively) you may have better results.

maybe this would be easy to fix?

[mattleonowicz]

I had keyframes with % and it still removed them. I had to disable.

[SethFalco]

Thanks for reporting the issue!

I've taken a look at this, but I'm unable to reproduce the issue in SVGO v3.0.3. It's likely that whatever the problem was has already been resolved.

As this is an old issue, I'll close it already. If anyone can still reproduce the issue with the latest release, you're welcome to open another one.