Open Bug 1708824 Opened 3 years ago Updated 2 years ago

Optimize the download start/finish animation svgs

Categories

(Firefox :: Theme, task, P3)

Product:
Firefox
Component:
Theme
Type:
task

Tracking

()

People

(Reporter: sfoster, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: [proton-icons] [proton-cleanups])

The notification-finish-animation.svg and notification-start-animation.svg are "filmstrip" images, with a <svg> element for each frame. Because of this, and the extensive use of clipPath and mask references, svgo's convertPathData plugin is unable to flatten the transforms and re-calculate those paths.

There are also some redundant elements in there - paths which are entirely clipped away.

While this all can be done manually, I'd like to keep improving the tooling around these images, as each iteration or re-design presents the same problem. The plugins and configs I've been using are at https://github.com/sfoster/moz-svg-tooling so updating/forking those to accomplish even some of this task would be great.

This needs the same treatment as bug 1713956 where I fixed the stop/reload animation

  • Remove duplicated frames, implementing pauses using CSS animation key-frames
  • Optimize svg: convert masks to clip-path, eliminate duplicated/redundant paths and clip-paths etc. that are effectively duplicates as they only use a duplicated path
Whiteboard: [proton-icons] → [proton-icons] [proton-cleanups]
You need to log in before you can comment on or make changes to this bug.