If you're interested in adding SVGs that look like truthful screenshots, I wrote a Chrome/Firefox extension that can take screenshots of webpages in SVG: https://github.com/felixfbecker/svg-screenshots

It can't screen record an animation though, but it could be a baseline for hand-animating the elements. Accepting PRs for screen recording functionality :D

Similar: emacs can take SVG screenshots of itself:

https://gist.githubusercontent.com/alphapapa/65b0b9d4b3f5534...

That's insane ^^

Seems to depend on Cairo, which is AKAIK only available in X11 environments. Does anybody know how to get this working on OSX?

macOS has APIs to get a vector PDF snapshot from any view/window [1]. If emacs ends up drawing using platform APIs such as CoreText it should be possible to get a screenshot that way.

[1]: https://developer.apple.com/documentation/appkit/nswindow/14...

Looks like we have a similar hobby!

https://github.com/TomasHubelbauer/SVG-Screencast

This is for screen recordings. SVG animations as the OP I play around with, too:

https://github.com/TomasHubelbauer/SVG-3D

:)

Oh that's cool! Did you ever think about recreating the DOM in SVG elements in animating those with CSS, instead of using raster images? It would potentially be possible with MutationObserver, and optionally "copying" any CSS animations in the source DOM. Will likely not be perfect but could still be a good trade-off for a little demo animation of e.g. how to fill out a certain form instead of using a GIF or video.

I'm building this to use to record Electron window recordings - I ultimately want to use this to automatically build animated SVGs showcasing features of VS Code extensions as a part of their CI so the showcased can be coded using VS Code API and the animations in the extension readme just fall out of that. So no DOM in this case. But I am thinking of ways to optimize this. I know this will be used for screen recordings and that gives me some flexibility in what assumptions I can make in the optimization pipeline. At the moment I plan on trying to come up with an algorithm to detect scrolling/jumping regions (like in the demo where the whole line height grows once the first emoji is typed on a given line) and animate their scrolling and cropping using CSS animations instead of image patches. But I think what you describe is definitely something to explore and I might take that up next if I figure a use case for it as it sounds really interesting and fun!

I can't find it on addons.mozilla.org. According to Mozilla[1] I can only use unsigned addons with ESR, Nightly and the Developer Edition of Firefox (which I don't use). I've tried setting xpinstall.signatures.required to false in about:config. It's not helping.

[1] https://support.mozilla.org/en-US/kb/add-on-signing-in-firef...

It's linked from the README: https://addons.mozilla.org/en-US/firefox/addon/svg-screensho... No need to add an unsigned extension :)

Oh! I looked for it, I promise!

Whoa, if this does what I hope it does I'll be ecstatic! Thank you!

(Here's the Chrome extension link for anyone who's interested: https://chrome.google.com/webstore/detail/svg-screenshot/nfa...)

Sounds cool but no examples in the README so (lazy) potential users have no idea whether it's worth looking into.

Source: I am lazy.

The only reason I didn't have examples was because I am lazy. Your argument about laziness convinced me, so I added some: https://github.com/felixfbecker/svg-screenshots#examples

Haha, rock on! (Looks great btw)

This is great, thank you!

I'd love a tool like this for generating animated SVG clips of a web page, it'd help immensely when creating walkthroughs. Video recordings do work, but it's a mess working with different encodings to make it look ok. Not to mention, with SVG such walkthroughs could actually be made interactive...

This is really cool!

Would be super helpful to have some example screenshots linked in the readme though, to help set expectations.

Here are some examples produced by the tests of the underlying library, including HN, GitHub and the Google homepage: https://github.com/felixfbecker/dom-to-svg/suites/1630896833...

The tests take a PNG screenshot of the webpage, then a PNG screenshot of the created SVG and pixelmatch the two. The difference must be below 0.5% for tests to pass.

404's for me

Ah, looks like GitHub actions don't allow public access to artifacts: https://github.community/t/public-read-access-to-actions-art...

In that case - just install the extension and try it out? :)

Added! https://github.com/felixfbecker/svg-screenshots#examples

I recognize your name from some of the VS Code extensions that I use and just want to say thank you!

crashed on the first page I tried it on

Could you file a bug here and include the URL you tried it on? https://github.com/felixfbecker/dom-to-svg/issues/new

ah i could have used this. my readme is a simulation of a github profile ;)

https://github.com/conceptualspace

Cool idea, although with the new Dark mode on Github enabled it was very easy to see what is going on :)

Freezes mobile GH app on Android.

This pleases me more than it should! Cool stuff! :o)

Hi! Just wanted to say this is an excellent readme, and your Boemska website is equally great. Very impressive – kudos to you and keep up the great work!

Thank you for your kind words. That's made my day :)

Awfully laggy on slow machines.

That's the termtosvg animation ruining it for all the others. I'm actually going to replace it with a gif. The UI anims are really smooth.

what did you use to create them?

Based on the SVG markup, termtosvg [1].

1: https://github.com/nbedos/termtosvg