[HN Gopher] Show HN: Satori - Convert HTML and CSS to SVG
___________________________________________________________________
Show HN: Satori - Convert HTML and CSS to SVG
Author : steventey
Score : 85 points
Date : 2022-10-10 20:37 UTC (2 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| crazygringo wrote:
| (Warning: bit of a tangent)
|
| Conceptually, I love this.
|
| Mainly because for some reason it irritates me than screenshots
| are bitmaps.
|
| Nearly everything in a user interface or document is vector-
| based, except for photographs and natural-media illustrations.
|
| The ability to capture part of a webpage as an SVG feels like a
| step forwards in preserving vector content.
|
| My real wish is that OS interfaces would be just as vector-based,
| where rendering to bitmap was just something the OS handled at
| the end. So a screenshot in macOS or Windows would similarly
| always be SVG.
| asadlionpk wrote:
| I also wished that was true while working on a _fast_ web-based
| remote desktop client. Imagine if instead of a video stream via
| VNC, the UI was HTML or SVG diffs. That would be really fast!
| RDP does something similar but on a much lower-level.
| crazygringo wrote:
| Yes! IIRC, RDP was originally based on simply sending over
| the GDI calls -- the Windows draw instructions -- directly.
|
| I've been told it moved away from that as networks got
| faster, interfaces became more GPU-accelerated, and video
| encoding became hardware-accelerated, so that now it's not
| much different from VNC. But I don't know when or to what
| extent, or if RDP still uses any draw instructions at all.
| jjtheblunt wrote:
| Is this not reminiscent of Display Postscript?
| elefantastisch wrote:
| This seems really cool, but I don't understand the use cases.
| Someone help me out?
| steventey wrote:
| You can basically use this to generate Open Graph images
| programmatically for your websites really really fast (1-2ms)!
|
| Here's a blog post detailing how this works (using @vercel/og):
| https://vercel.com/blog/introducing-vercel-og-image-generati...
| metadat wrote:
| Could satori be used to convert a whole webpage into a single
| SVG image?
|
| Could be a (convoluted?) way to ensure an asset looks the
| same across all browsers..
| shuding wrote:
| No, Satori does not guarantee that the SVG will 100% match
| the browser-rendered HTML output. That's because Satori
| implements its own layout engine based on the SVG 1.1 spec.
| However, Satori generated result (SVG) is stable on all
| browsers.
| Jaydenaus wrote:
| This was the use case I had in mind. My company generates
| exports that are either PDF or PNG/JPEG images from the DOM
| using Puppeteer. We really wanted to support SVG but every
| option we explored had pretty significant rendering issues,
| meaning an entire rewrite in SVG would have been required.
| eyelidlessness wrote:
| Is the SVG->PNG portion of the show handled by Satori as
| well, or separately as a part of the Vercel service? Asking
| because I've got code handling that part for this exact use
| case, which I'd be happy to either eliminate if I can use
| Satori, or I could clean up and open source my own solution
| if people would find it useful.
| julienreszka wrote:
| Can be useful to generate invoices without dealing with pdf
| gillesjacobs wrote:
| This would have been great for that one time I found a html+css
| copy-paste script for styled multiple underlined text. Doing it
| in LaTeX/tikz directly would have taken me hours.
|
| The html+css looked fine, but to get it to a vector image as
| required by the journal was a pain: print to PDF, find out the
| lines aren't reproduced correctly, manually find a PDF printer
| with the right settings, convert to eps
| lazyjeff wrote:
| Some of what looks challenging here is handling fonts. SVG would
| be so much better if there was a way to do font embedding. Even a
| minimal set of fonts would be amazing. Or if operating systems or
| libraries for SVG support could all commit to supporting a common
| set of fonts, like browsers did for web safe fonts. Think of how
| clunky the web would have been without those.
| aidos wrote:
| PDF has a set of 14 standard fonts that are expected to be
| available (or an equivalent font) for consistent rendering
| across platforms.
|
| Of course they support embedding too, so you can use any font
| (and I think embedding is required to be conformant with Pdf-a
| - but I'm a little hazy on that).
| alixanderwang wrote:
| You can embed fonts in SVG:
|
| https://oreillymedia.github.io/Using_SVG/extras/ch07-dataURI...
| .
| asib wrote:
| In my experience, embedded fonts are handled very
| inconsistently (and often poorly) by different rendering
| engines.
| morley wrote:
| In particular: if you load an SVG in Chrome via an img tag,
| the webfont is not run because the environment tries to
| execute as little as possible. It'll instead use whatever
| fallback font is present on the system.
|
| Source: I just dealt with this problem a few weeks ago. I
| also spent all last week implementing a custom OG image in
| Canvas. Wish Satori had come out a week earlier!
| aidos wrote:
| That didn't sound right to me, and I've just checked that
| the fonts are loading for me. I wonder if you were
| embedding them in a way that didn't work?
|
| EDIT: here's how I'm doing the embedding
| <style type="text/css"> @font-face { font-
| family:FontName; src:url(data:font/otf;base64,T1RUTwAOAIA
| AAwBgQ0ZGIHKc...AAAAAAAAAAAA=) format("opentype"); }
| </style>
|
| I've passed by the Chrome SVG code a bit, and I've never
| seen anything to suggest there's an "SVG lite" type
| version in there. I imagine it's just painted to a bitmap
| and handed to the compositor like everything else
| (obviously a massive simplification).
| eyelidlessness wrote:
| I think you can safely embed data URLs because they're
| known to be static. What you can't generally do is
| trigger a network waterfall or dynamic evaluation from an
| img tag's SVG resource.
| searchableguy wrote:
| Does the tailwind support work with className declaration?
|
| I would like to use it with existing component library which is
| built using tailwind without making changes. Is that possible?
| aidos wrote:
| Interesting.
|
| I was thinking that this was going to be a crazy amount of layout
| engine work, but now I look a little closer it _appears_ the
| layout work is farmed out to yoga [0] (not trying to take away
| anything from the effort here). So this project is almost a
| wrapper around running yoga as a renderer and using SVG as a form
| of backend target?
|
| I say "appears" because the yoga landing page doesn't do a great
| job of explaining what it does.
|
| EDIT Just looking at some of the information about the font side
| of things and the naming is a little confusing. You set
| embedFont=false to use text instead of converting the text to
| paths. embedFont=true sounds a lot like it will embed the _font_
| required to render the _text_ - but it _kinda_ does the opposite.
|
| https://github.com/vercel/satori#font-embedding
|
| [0] https://github.com/facebook/yoga
___________________________________________________________________
(page generated 2022-10-10 23:00 UTC)