7 ms·

Can someone give some example usecases? I am curious as to how this is used. Thank you.

yvoschaap 4y ago
I tried something similar like this to render thumbnail of websites (at a very small file-size). E.g. https://twitter.com/yvoschaap/status/1446397003316047872 https://twitter.com/yvoschaap/status/1446397003316047872
- codetrotter 4y ago
  That is super neat! Did you end up having any users/customers?
- mrkramer 4y ago
  Isn't this something like archive.ph is doing? Snapshotting and screenshotting websites. I'm referring both to you and the op.
  - dj_gitmo 4y ago
    https://archive.ph/1NNZr https://archive.ph/1NNZr That looks like a Web Archive (WARC) and a PNG screen shot. I think you can make a screenshot with CasperJS. The WARC can be created by wget.
    - mrkramer 4y ago
      Yea you are right about PNG but wrong about WARC. Archive.ph doesn't use WARC.
      - dredmorbius 4y ago
        What does it use, if you know? Source?
        mrkramer 4y ago
        Their FAQ says: https://archive.ph/faq#:~:text=Which%20parts%20of,of%201024x768%20pixels https://archive.ph/faq#:~:text=Which%20parts%20of,of%201024x.... Wikipedia says: https://en.wikipedia.org/wiki/Archive.today#:~:text=Web%20pages%20cannot%20be%20duplicated%20from%20archive.today%20to%20web.archive.org%20as%20second%2Dlevel%20backup%2C%20as%20archive.today%20places%20an%20exclusion%20for%20Wayback%20Machine%20and%20does%20not%20save%20its%20snapshots%20in%20WARC%20format https://en.wikipedia.org/wiki/Archive.today#:~:text=Web%20pa.... So I assumed they don't use it but idk for sure.
        dredmorbius 4y ago
        Thanks.
- marginalia_nu 4y ago
  How small are you getting them? I'm straight up screenshotting websites (e.g. https://search.marginalia.nu/screenshot/245804 https://search.marginalia.nu/screenshot/245804). Seem to come in at on average 17 Kb, based on a sample size of 550K screenshots.
  - fy20 4y ago
    That's pretty cool! How do you go about removing the details? Is it done in JavaScript before the screenshot is taken, or by post-processing the SVG?
commotionfever 4y ago
if it works how i think it does, this could be really nice to cook up some infographics in a css framework like tailwind. then make some svgs for a github readme for example i made this one[1] with tailwind but i just ended up taking a png screenshot [1] https://github.com/sentriz/socr/blob/master/.github/socr.png https://github.com/sentriz/socr/blob/master/.github/socr.png
danielvaughn 4y ago
IMO the use case is limited but interesting. The most obvious would be product screenshots for landing pages, although typically design tools handle that well enough. I'm currently building a web-app for building web pages, and I'd love for the user to be able to view a thumbnail gallery of all the pages they've built. This tool would allow me to build a zooming feature pretty easily. Outside of those two, I'd imagine the use cases are fairly limited.
- btown 4y ago
  The thing about having access to the Skia render graph is that all of a sudden you're no longer limited to product screenshots and screen recordings. Imagine a pipeline where you can export someone's interaction session with a site, pixel-perfect, into DaVinci Resolve or Blender or Unity as a fully annotated DOM-advised render node hierarchy, with consistent node identities over time, of every rendered element on the page as it changes across frames. That's way more powerful than just pixels. Imagine flying through your site in 3D (or even VR) with full control over timing, being able to explode and un-explode your DOM elements as they transition into being - the type of thing that only Apple would do for their WWDC demos with dedicated visualization teams. The start is to be able to see the rendering engine as a generator for not just raster data over time, but vector data over time. Of course, there's a lot of work to do from there, but this is the core leap.
  - TeMPOraL 4y ago
    Cynical take: it won't hold. It'll get neutered by vendors and eventually purposefully removed as a possibility by Google. Here's the thing: this "core leap" you mention isn't new. It's been made long before, on input side: that's what HTML is. All those use cases you mention should be possible, but aren't. Why? Because the for-profit web doesn't want that. Most websites on the Internet today exist not to be useful, but to use you. For that, it's most important that the website author has maximum control over what the users see. This allows them to effectively place ads, do A/B tests for maximum manipulation (er, "engagement"), force a specific experience on you, expose you to right upsells in the right places. If they could get away with serving you clickable JPEGs, they would absolutely do that. Alas, HTML + JS + CSS is the industry standard, the all things considered cheapest option - so most vendors instead just resort to going out of their way[0] to force their sites to render in specific ways, and supplement it with anti-adblock scripts/nags, randomizing DOM properties, pushing mobile apps, etc. To be fair, they do have some point. Look at this very thread: currently, the top comments talk about using Chrome -> SVG pipe to access accidentally leaked commercial and government data, such as hidden layers in product CAD drawings, or improperly censored text[1]. Your own example, "export someone's interaction session with a site, pixel-perfect, into DaVinci Resolve or Blender or Unity" is going to be mostly used adversarially (e.g. by competitors). My own immediate application would be removal of ads, which presumably have distinct pattern in such rendering, as they get inserted at a different stage of the render pipeline than the content itself. This is just the usual battle over control of the UX of a website. The vendor wants to wear me down with their obnoxious, bullshit UX[2], serve me ads, and use DRM to force me to play by their rules. I want my browser to be my user agent. We can't have it both ways[3], and unfortunately, Google is on the side of money. -- [0] - Well, to be fair, a lot of this is done by default by frameworks, or encoded in webdev "best practices". [1] - Obligatory reminder: the only fool-proof way of publishing partially censored documents or images is to censor them digitally, then print out, scan back, and distribute the scan. If you don't go through analog, you risk accidentally leaking censored information or relevant metadata. [2] - Like e.g. every single e-commerce platform. The vendor hopes I'll get tired and make a suboptimal choice. I want to pull vendor's data into a database and run SQL queries on it, so I can make near-optimal purchase decisions in fraction of the time. This "core leap" you mention would be a big win for me, which is why it won't last. [3] - At this point, accessibility is the only thing that's keeping websites somewhat sane. There's plenty of apologists for all the underhanded and malicious techniques that are core to webdev these days - but they can't usually dismiss the complaint that the website is not usable on a screen reader. For some sites, it would be illegal to do so.
Scalene2 4y ago
Great for screenshots to render in a video.
convolvatron 4y ago
if we can reduce the size of the basis footprint for a browser implementation, we can more easily produce new browsers (i.e by implementing a fully general Path, and font rendering)
- mrkramer 4y ago
  That would be cool if actually converting HTML to SVG would save you bandwidth and all the rest that goes with web requests. Imagine a web browser that only supports SVG and converts all HTML to SVG then when browsing the web you would only look at screenshots of websites and webpages. This would be something like read-only browser. It is already possible[0] tho but it is not enabled by default on Chrome nor it is exclusive feature. [0] https://frankgroeneveld.nl/2021/08/24/most-underused-browser-feature/ https://frankgroeneveld.nl/2021/08/24/most-underused-browser...
GranPC 4y ago
I do something similar - but using the Print command and converting the PDF to SVG - to import websites into Blender for flashy animations. This allows me to neatly animate things in/out, and zoom into details without pixelation.
somishere 4y ago
I have a "generator" site[1] where people are able create/share a "fairly" unique image (billions of potential combos) rendered in the dom. There's no point pre-rendering every possible version of a all-but unique social image, so instead I generate them on the fly as they are requested (i.e someone shares one). In my case I actually render them on the client using dom-to-image[2] and then store/cache them using R2. This is basically to save on server costs (it's hosted on free CF pages with a worker). A more secure implementation (with a compute budget) might use a headless browser like this server side to render the image. [1] perfectpollie.au [2] npmjs.com/dom-to-image
Humphrey 4y ago
I could imagine this been used, once it's more mature, as a Weasy Print (html to PDF) replacement. (assuming it ends up supporting PDF's or adding a different svg2pdf convertor) There are countless use cases where a system needs to generate something printable, such as a PDF report, ticket, gift certificate, etc. And generating something that looks great from a system that is good at generating html can be a challenge. Being able to convert a rendered html page to a vector graphic opens up a lot of options. I already have an AWS Lambda function running Weasy Print for when I need simple PDF generated from a webapp. It'd be great to be able to switch to something like this that does a better job at rendering HTML, and therefore having the option to make more beautiful PDF's.

I tried something similar like this to render thumbnail of websites (at a very small file-size). E.g. https://twitter.com/yvoschaap/status/1446397003316047872 https://twitter.com/yvoschaap/status/1446397003316047872

codetrotter 4y ago
That is super neat! Did you end up having any users/customers?
mrkramer 4y ago
Isn't this something like archive.ph is doing? Snapshotting and screenshotting websites. I'm referring both to you and the op.
- dj_gitmo 4y ago
  https://archive.ph/1NNZr https://archive.ph/1NNZr That looks like a Web Archive (WARC) and a PNG screen shot. I think you can make a screenshot with CasperJS. The WARC can be created by wget.
  - mrkramer 4y ago
    Yea you are right about PNG but wrong about WARC. Archive.ph doesn't use WARC.
    - dredmorbius 4y ago
      What does it use, if you know? Source?
      - mrkramer 4y ago
        Their FAQ says: https://archive.ph/faq#:~:text=Which%20parts%20of,of%201024x768%20pixels https://archive.ph/faq#:~:text=Which%20parts%20of,of%201024x.... Wikipedia says: https://en.wikipedia.org/wiki/Archive.today#:~:text=Web%20pages%20cannot%20be%20duplicated%20from%20archive.today%20to%20web.archive.org%20as%20second%2Dlevel%20backup%2C%20as%20archive.today%20places%20an%20exclusion%20for%20Wayback%20Machine%20and%20does%20not%20save%20its%20snapshots%20in%20WARC%20format https://en.wikipedia.org/wiki/Archive.today#:~:text=Web%20pa.... So I assumed they don't use it but idk for sure.
        dredmorbius 4y ago
        Thanks.
marginalia_nu 4y ago
How small are you getting them? I'm straight up screenshotting websites (e.g. https://search.marginalia.nu/screenshot/245804 https://search.marginalia.nu/screenshot/245804). Seem to come in at on average 17 Kb, based on a sample size of 550K screenshots.
- fy20 4y ago
  That's pretty cool! How do you go about removing the details? Is it done in JavaScript before the screenshot is taken, or by post-processing the SVG?

commotionfever 4y ago

if it works how i think it does, this could be really nice to cook up some infographics in a css framework like tailwind. then make some svgs for a github readme for example i made this one[1] with tailwind but i just ended up taking a png screenshot [1] https://github.com/sentriz/socr/blob/master/.github/socr.png https://github.com/sentriz/socr/blob/master/.github/socr.png

danielvaughn 4y ago

IMO the use case is limited but interesting. The most obvious would be product screenshots for landing pages, although typically design tools handle that well enough. I'm currently building a web-app for building web pages, and I'd love for the user to be able to view a thumbnail gallery of all the pages they've built. This tool would allow me to build a zooming feature pretty easily. Outside of those two, I'd imagine the use cases are fairly limited.

btown 4y ago
The thing about having access to the Skia render graph is that all of a sudden you're no longer limited to product screenshots and screen recordings. Imagine a pipeline where you can export someone's interaction session with a site, pixel-perfect, into DaVinci Resolve or Blender or Unity as a fully annotated DOM-advised render node hierarchy, with consistent node identities over time, of every rendered element on the page as it changes across frames. That's way more powerful than just pixels. Imagine flying through your site in 3D (or even VR) with full control over timing, being able to explode and un-explode your DOM elements as they transition into being - the type of thing that only Apple would do for their WWDC demos with dedicated visualization teams. The start is to be able to see the rendering engine as a generator for not just raster data over time, but vector data over time. Of course, there's a lot of work to do from there, but this is the core leap.
- TeMPOraL 4y ago
  Cynical take: it won't hold. It'll get neutered by vendors and eventually purposefully removed as a possibility by Google. Here's the thing: this "core leap" you mention isn't new. It's been made long before, on input side: that's what HTML is. All those use cases you mention should be possible, but aren't. Why? Because the for-profit web doesn't want that. Most websites on the Internet today exist not to be useful, but to use you. For that, it's most important that the website author has maximum control over what the users see. This allows them to effectively place ads, do A/B tests for maximum manipulation (er, "engagement"), force a specific experience on you, expose you to right upsells in the right places. If they could get away with serving you clickable JPEGs, they would absolutely do that. Alas, HTML + JS + CSS is the industry standard, the all things considered cheapest option - so most vendors instead just resort to going out of their way[0] to force their sites to render in specific ways, and supplement it with anti-adblock scripts/nags, randomizing DOM properties, pushing mobile apps, etc. To be fair, they do have some point. Look at this very thread: currently, the top comments talk about using Chrome -> SVG pipe to access accidentally leaked commercial and government data, such as hidden layers in product CAD drawings, or improperly censored text[1]. Your own example, "export someone's interaction session with a site, pixel-perfect, into DaVinci Resolve or Blender or Unity" is going to be mostly used adversarially (e.g. by competitors). My own immediate application would be removal of ads, which presumably have distinct pattern in such rendering, as they get inserted at a different stage of the render pipeline than the content itself. This is just the usual battle over control of the UX of a website. The vendor wants to wear me down with their obnoxious, bullshit UX[2], serve me ads, and use DRM to force me to play by their rules. I want my browser to be my user agent. We can't have it both ways[3], and unfortunately, Google is on the side of money. -- [0] - Well, to be fair, a lot of this is done by default by frameworks, or encoded in webdev "best practices". [1] - Obligatory reminder: the only fool-proof way of publishing partially censored documents or images is to censor them digitally, then print out, scan back, and distribute the scan. If you don't go through analog, you risk accidentally leaking censored information or relevant metadata. [2] - Like e.g. every single e-commerce platform. The vendor hopes I'll get tired and make a suboptimal choice. I want to pull vendor's data into a database and run SQL queries on it, so I can make near-optimal purchase decisions in fraction of the time. This "core leap" you mention would be a big win for me, which is why it won't last. [3] - At this point, accessibility is the only thing that's keeping websites somewhat sane. There's plenty of apologists for all the underhanded and malicious techniques that are core to webdev these days - but they can't usually dismiss the complaint that the website is not usable on a screen reader. For some sites, it would be illegal to do so.

Scalene2 4y ago

Great for screenshots to render in a video.

convolvatron 4y ago

if we can reduce the size of the basis footprint for a browser implementation, we can more easily produce new browsers (i.e by implementing a fully general Path, and font rendering)

mrkramer 4y ago
That would be cool if actually converting HTML to SVG would save you bandwidth and all the rest that goes with web requests. Imagine a web browser that only supports SVG and converts all HTML to SVG then when browsing the web you would only look at screenshots of websites and webpages. This would be something like read-only browser. It is already possible[0] tho but it is not enabled by default on Chrome nor it is exclusive feature. [0] https://frankgroeneveld.nl/2021/08/24/most-underused-browser-feature/ https://frankgroeneveld.nl/2021/08/24/most-underused-browser...

GranPC 4y ago

I do something similar - but using the Print command and converting the PDF to SVG - to import websites into Blender for flashy animations. This allows me to neatly animate things in/out, and zoom into details without pixelation.

somishere 4y ago

I have a "generator" site[1] where people are able create/share a "fairly" unique image (billions of potential combos) rendered in the dom. There's no point pre-rendering every possible version of a all-but unique social image, so instead I generate them on the fly as they are requested (i.e someone shares one). In my case I actually render them on the client using dom-to-image[2] and then store/cache them using R2. This is basically to save on server costs (it's hosted on free CF pages with a worker). A more secure implementation (with a compute budget) might use a headless browser like this server side to render the image. [1] perfectpollie.au [2] npmjs.com/dom-to-image

Humphrey 4y ago

I could imagine this been used, once it's more mature, as a Weasy Print (html to PDF) replacement. (assuming it ends up supporting PDF's or adding a different svg2pdf convertor) There are countless use cases where a system needs to generate something printable, such as a PDF report, ticket, gift certificate, etc. And generating something that looks great from a system that is good at generating html can be a challenge. Being able to convert a rendered html page to a vector graphic opens up a lot of options. I already have an AWS Lambda function running Weasy Print for when I need simple PDF generated from a webapp. It'd be great to be able to switch to something like this that does a better job at rendering HTML, and therefore having the option to make more beautiful PDF's.