Chrome's throbber_small.svg was mis-optimized by svgo

[randomascii]

Describe the bug When optimizing throbber_small.svg with this tool a few important directives were removed which changed the behavior. An example removal was to{transform:rotate(360deg)}. The diffs can be seen here: https://chromium-review.googlesource.com/c/chromium/src/+/3591043/2/ui/webui/resources/images/throbber_small.svg#b1

To Reproduce Steps to reproduce the behavior:

1. Copy the contents of this .svg file: https://source.chromium.org/chromium/chromium/src/+/main:ui/webui/resources/images/throbber_small.svg;l=1;bpv=0
2. Optimize it
3. Notice that instead of going continuously clockwise it changes direction
4. See crbug.com/1318796 for more details

Expected behavior The behavior of the .svg should have been retained

Desktop (please complete the following information):

• SVGO Version Unknown
• NodeJs Version Unknown
• OS: Windows

Additional context This all happens in the context of a Chromium repo.

[randomascii]

Update: we're running v1.2.0 which is quite old so we will try updating it to see if the bug is fixed.

[freshp86]

Update: we're running v1.2.0 which is quite old so we will try updating it to see if the bug is fixed.

I just checked with the latest version and the problem still happens. Have not tried selectively disabling any of the optimizations done by svgo by default though.

[freshp86]

The bug seems to happen because svgo is removing the to part of each transform. For example the following style tag

<style>
  @keyframes rotate {
    0% {transform:rotate(0deg)}
    to {transform:rotate(360deg)}
  }
  @keyframes fillunfill {
    0% {stroke-dashoffset:58.8}
    50% {stroke-dashoffset:0}
    to {stroke-dashoffset:-58.4}
  }
  @keyframes rot {
    0% {transform:rotate(0deg)}
    to {transform:rotate(-360deg)}
  }
</style>

becomes

<style>
  @keyframes rotate {
    0% {transform:rotate(0deg)}
  }
  @keyframes fillunfill {
    0% {stroke-dashoffset:58.8}
    50% {stroke-dashoffset:0}
  }
  @keyframes rot {
    0% {transform:rotate(0deg)}
  }
</style>

where all the to lines have been removed. Same happens if instead of to the code uses 100%. After a quick inspection it this sounds similar to https://github.com/svg/svgo/issues/888, and the issue is fixed by disabling the minifyStyles plugin in the config file.

[randomascii]

I'm no SVG expert but it seems odd for such significant changes to be made unless minifyStyles is disabled. Is it worth making the defaults safer?

[freshp86]

I think this is a bug with the minifyStyles plugin, and disabling it just bypasses the issue, as I don't see how removing the last part of a keyframe (whether it is using to or 100%) can possibly result in the same visual behavior.

[XhmikosR]

For reference, this is the same as #1631

[SethFalco]

This was fixed in v3.0.0. I've double-checked the file shared in the issue, and can confirm it no longer breaks when processed by SVGO. 🎉

Closing as resolved.