Convert a Website to SVG

It might not be a common task to convert a Website to SVG but in my case I wanted to have a screenshot that I could scale like a website but that was independent from reloading stuff from the internet. Background is that I wanted to embed a tweet in one of my slides for a talk.

So far I did that with a screenshot but that is not scaleable so depending on the projector it wold show up either very small or as pixel-art. Most of the things in such an embedded tweet are text and should be scaleable to almost any size, I thought. So why not get a vector-graphic instead of a pixel-graphic from that embedded tweet?

And after asking for help on twitter I found (thanks Stephan) HiQPdf that can convert pasted HTML into SVG.

Create the SVG

So I copied the complete website from the embed-preview on twitter into the HiQPdf-Form and got an SVG-file that looked the same as the webview from Twitter. So it works.

Though when I wanted to include that SVG like the screenshot I took previously, I realized that something was not quite as good. The width was not correctly set, so I had do do some manual work afterwards as well.

And it turned out that from the 100kb I got as an SVG-file I could remove almost 84kb as they where empty statements that did nothing at all. And the width and height-values that were given in the SVG-tag where also not completely correct. So after removing the bloat and setting the width to a better value (by trial and error) I even got a file smaller than the sceenshot I took previously. 16kb for the SVG compared to about 24k for the PNG.

And then the SVG behaved exactly like the PNG except for the better scalability!

So all in all using SVG instead of PNG for screenshots can work out great with a tool like HiQPdf (there for sure a re multiple others, I just didn’t test them) but be prepared to at least set the width and height correctly and if you want to have smaller files also expect some manual work to debloat the SVG.

And here are the results: