9 ms·

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:

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

CharlesW 6y ago
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/nfakpcpmhhilkdpphcjgnokknpbpdllg https://chrome.google.com/webstore/detail/svg-screenshot/nfa...)
chaorace 6y ago
Similar: emacs can take SVG screenshots of itself: https://gist.githubusercontent.com/alphapapa/65b0b9d4b3f55344c6e143f8f3878d7a/raw/emacs-27-svg-screenshot.svg https://gist.githubusercontent.com/alphapapa/65b0b9d4b3f5534...
- globuous 6y ago
  That's insane ^^
- fergie 6y ago
  Seems to depend on Cairo, which is AKAIK only available in X11 environments. Does anybody know how to get this working on OSX?
  - fkistner 6y ago
    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/1419418-datawithpdf https://developer.apple.com/documentation/appkit/nswindow/14...
eins1234 6y ago
This is really cool! Would be super helpful to have some example screenshots linked in the readme though, to help set expectations.
- felixfbecker 6y ago
  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/artifacts/30080134 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.
  - Assossa 6y ago
    404's for me
    - felixfbecker 6y ago
      Ah, looks like GitHub actions don't allow public access to artifacts: https://github.community/t/public-read-access-to-actions-artifacts/17363/4 https://github.community/t/public-read-access-to-actions-art... In that case - just install the extension and try it out? :)
- felixfbecker 6y ago
  Added! https://github.com/felixfbecker/svg-screenshots#examples https://github.com/felixfbecker/svg-screenshots#examples
greggman3 6y ago
crashed on the first page I tried it on
- felixfbecker 6y ago
  Could you file a bug here and include the URL you tried it on? https://github.com/felixfbecker/dom-to-svg/issues/new https://github.com/felixfbecker/dom-to-svg/issues/new
mstade 6y ago
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...
tomashubelbauer 6y ago
Looks like we have a similar hobby! https://github.com/TomasHubelbauer/SVG-Screencast 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 https://github.com/TomasHubelbauer/SVG-3D :)
- felixfbecker 6y ago
  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.
  - tomashubelbauer 6y ago
    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!
unicornporn 6y ago
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-firefox#w_what-are-my-options-if-i-want-to-use-an-unsigned-add-on-advanced-users https://support.mozilla.org/en-US/kb/add-on-signing-in-firef...
- felixfbecker 6y ago
  It's linked from the README: https://addons.mozilla.org/en-US/firefox/addon/svg-screenshots/ https://addons.mozilla.org/en-US/firefox/addon/svg-screensho... No need to add an unsigned extension :)
  - unicornporn 6y ago
    Oh! I looked for it, I promise!
wjdp 6y ago
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.
- felixfbecker 6y ago
  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 https://github.com/felixfbecker/svg-screenshots#examples
  - wjdp 6y ago
    Haha, rock on! (Looks great btw)
lukevi 6y ago
I recognize your name from some of the VS Code extensions that I use and just want to say thank you!

CharlesW 6y ago

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/nfakpcpmhhilkdpphcjgnokknpbpdllg https://chrome.google.com/webstore/detail/svg-screenshot/nfa...)

chaorace 6y ago

Similar: emacs can take SVG screenshots of itself: https://gist.githubusercontent.com/alphapapa/65b0b9d4b3f55344c6e143f8f3878d7a/raw/emacs-27-svg-screenshot.svg https://gist.githubusercontent.com/alphapapa/65b0b9d4b3f5534...

globuous 6y ago
That's insane ^^
fergie 6y ago
Seems to depend on Cairo, which is AKAIK only available in X11 environments. Does anybody know how to get this working on OSX?
- fkistner 6y ago
  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/1419418-datawithpdf https://developer.apple.com/documentation/appkit/nswindow/14...

eins1234 6y ago

This is really cool! Would be super helpful to have some example screenshots linked in the readme though, to help set expectations.

felixfbecker 6y ago
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/artifacts/30080134 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.
- Assossa 6y ago
  404's for me
  - felixfbecker 6y ago
    Ah, looks like GitHub actions don't allow public access to artifacts: https://github.community/t/public-read-access-to-actions-artifacts/17363/4 https://github.community/t/public-read-access-to-actions-art... In that case - just install the extension and try it out? :)
felixfbecker 6y ago
Added! https://github.com/felixfbecker/svg-screenshots#examples https://github.com/felixfbecker/svg-screenshots#examples

greggman3 6y ago

crashed on the first page I tried it on

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

mstade 6y ago

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...

tomashubelbauer 6y ago

Looks like we have a similar hobby! https://github.com/TomasHubelbauer/SVG-Screencast 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 https://github.com/TomasHubelbauer/SVG-3D :)

felixfbecker 6y ago
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.
- tomashubelbauer 6y ago
  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!

unicornporn 6y ago

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-firefox#w_what-are-my-options-if-i-want-to-use-an-unsigned-add-on-advanced-users https://support.mozilla.org/en-US/kb/add-on-signing-in-firef...

felixfbecker 6y ago
It's linked from the README: https://addons.mozilla.org/en-US/firefox/addon/svg-screenshots/ https://addons.mozilla.org/en-US/firefox/addon/svg-screensho... No need to add an unsigned extension :)
- unicornporn 6y ago
  Oh! I looked for it, I promise!

wjdp 6y ago

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.

felixfbecker 6y ago
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 https://github.com/felixfbecker/svg-screenshots#examples
- wjdp 6y ago
  Haha, rock on! (Looks great btw)

lukevi 6y ago

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