SVG animation

[dcsan]

Feature request

I'm rendering some SVGs that play a CSS animation. I was wondering if there's a way to set a delay so the snapshot is taken after a few seconds?

What are you trying to achieve?

snapshot a later frame after an SVG CSS animation reaches a certain frame or even snapshot multiple frames so i can later make a GIF animation of the SVG anim.

When you searched for similar feature requests, what did you find that might be related?

delay exists for GIF output, but that's per image in the output stream, not input.

there are some issues on resizing SVG/PNG but nothing on animation / delays that I can see. https://github.com/lovell/sharp/issues/729

What would you expect the API to look like?

sharp("file.svg")
  .delay(1000)      // example here before the png conversion happens?
  .png()
  .toFile("new-file.png")
  .then(function(info) {
    console.log(info)
  })
  .catch(function(err) {
    console.log(err)
  })

What alternatives have you considered?

Somehow modify the CSS animations to "jump" to a certain start frame when loading. this is pretty hard with something like a CSS animation of a fadeIn though. I could possibly do it with keyframes for some animation types, and just convert the earlier frames to use zero time, effectively compressing the timeline. this would mean somehow modifying the CSS before rendering.

Please provide sample image(s) that help explain this feature

eg https://onextrapixel.com/examples-of-svg-animations/

[lovell]

Please see https://gitlab.gnome.org/GNOME/librsvg/-/issues/307

[Nokel81]

Would this also support the SVG's <animate> and <animateTransform> tags?

[Holybasil]

Would this also support the SVG's <animate> and <animateTransform> tags?

I tried to add animated:true while working with an SVG containing <animate> and <animateMotion>, and it didn't work either.

In the end I had to manually determine the key frame, here is my code snippet

.replace(/stroke\-dasharray\="[\d\.]*"\s/g, "")
.replace(/<animate((?!circle)[\d\D])*(\/>|animateMotion>)/g, "")