SVGs that feel like GIFs

If the target is a GitHub readme, then you can embed a video directly. eg https://github.com/paulirish/git-recent#readme

That said, OP's SVG trick may be a smarter choice if the content is a terminal capture.

If you're going this route of adding a straight up video (which isn't bad!) it helps to edit the readme directly on GitHub. That way they're uploaded to githubusercontent (or whatever the domain is) and not taking up space in your repository.

The nice thing about videos is the play/pause/slider UI. Some platforms do add play/pause explicitly to GIFs, using some JS, but as far as I know (and you would know more), that's not built into browsers yet. That's been one of the reasons I often end up using videos instead.

When I've personally animated SVGs for use in RevealJS presentations, I tend to use CSS animations that I could control with JS if I wanted.

If this gets widespread use, browsers will catch up and in 5-10 years we will have pause buttons! ;)

Were people doing that other option?

The idea of committing a video to your repository for a PR seems silly. Every PR adds a new video to the codebase? Do you make a PR to prune them every once in a while?

An animated GIF is essentially a video with a large number of restrictions and poor compression compared to an actual video. Often sites convert animated GIFs to videos because the result is smaller and works better.

Meanwhile we are still have a stupid overlay controls because 20 years ago it was an iframe for an ActiveX control.

> Every PR adds a new video to the codebase

Git commits only differences with the precedent commit, not the entire repository. Therefore the video is only committed once as long as that video doesn’t change.

The SVG trick is less usable for screen captures IMO, since you lose controls.

I think it's best for embedding a motion demo of a feature your software provides, no more than 5 seconds. Even then, a video option may be useful to some people.

SVG can be color responsive (change color based on the user's dark/light prefs). It can also be size responsive (change based on max width or aspect). Video can't

https://jsbin.com/nohamuguze/edit?html,css,output

edit: sigh.... Works in Firefox and Chrome. Has issues in Safari - I'm sure I could futs with it more and get it to work everywhere but still, sadness

wow Paul I haven't seen your name in years but loved what you used to do with Echo Nest and the Rdio API <3