lovell / lovell/sharp

SVG animation

Open
#3,248 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

blocked-upstream-dependency enhancement
Dominant language
JavaScript
Stars
32.7k
Forks
1.4k
Avg merge
1d 14h
Merged PRs (30d)
5

Description

## 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/

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the sharp("file.svg") input and the existing .png() conversion path, then determine how delayed SVG rendering and multiple frames should be represented. Compare the requested .delay(1000) API with the existing GIF delay behavior. Done means a later animation frame, or requested frames, can be rendered reliably and covered by tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
backend-api-design, computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.