Is it possible to take a screenshot of a web page as an SVG image?

I have a webpage which is entirely vector-based (text, icon fonts, SVGs, but no PNGs, JPEGs, or GIFs).

Is there any way to take a vector screenshot of that webpage and save it as a fully-scalable SVG file?
(so that I can take the screenshot on a normal PC and have it look good on retina)

This ought to be possible, but I can't find anything that will do it.

Extra credit: If it has a few bitmap images, I want an SVG with embedded bitmaps.

SLaks

Posted 2013-04-08T19:35:55.373

Reputation: 7 596

I had the same question and this helped (might need some post-work in Illustrator to go from PDF to SVG): https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

– MicroMachine – 2018-05-17T20:01:29.387

There is library, which implements a canvas based on svg - https://github.com/gliffy/canvas2svg , which can be used together (use "canvas" option) with https://html2canvas.hertzen.com .

– 4esn0k – 2019-10-27T13:28:14.370

It looks like http://html2canvas.hertzen.com/ might help here.

– SLaks – 2013-04-08T19:36:38.893

1is the .html file in question not actually what you want? – Sparr – 2013-04-08T19:37:51.223

@Sparr: No; I want to manipulate the SVG in an editor (eg, crop it, add a banner), then put it in an <img>. (for the help / tour page of a web app) – SLaks – 2013-04-08T19:39:05.343

How would PNG or JPEG files be converted to SVG? – HairOfTheDog – 2013-04-08T20:02:50.633

@HairOfTheDog: They would become embedded bitmaps. (that's what I meant by the last line in my answer) – SLaks – 2013-04-08T20:06:33.890

If you are not opposed to working with Linux, take a look at this

– Darius – 2013-04-08T20:07:36.193

@Darius: Are you aware of any GTK-based browsers? – SLaks – 2013-04-08T20:30:19.453

@SLaks Midori?

– Darius – 2013-04-08T21:52:51.863

7This is an amazing usefull idea. Especially for UI designers who have to work on existing websites evolutions. I will pay for a tool that features SVG exports because I hate to work on mockups with bitmaps softwares, this is a total nonsense. – smonff – 2013-04-13T14:47:31.100

If you can, copy the svg code from the html file source code and save it in a file with an svg extension. Then you can edit in Inkscape or Illustrator. But it seems u would have already thought of that. Am I missing something? – dgo – 2013-04-15T01:19:12.643

@user1167442: You're misunderstanding the question. I want to convert the HTML of the entire page into SVG. – SLaks – 2013-04-15T23:37:30.020

@Slaks. Right, I figured it out after I asked. This looks like a solution though: http://html2canvas.hertzen.com/

– dgo – 2013-04-16T18:07:07.133

Answers

Not quite a screenshot, but if the page prints well you could print it as a PDF. Both Inkscape and Illustrator will load a PDF (and save it as SVG if needed).

Dan

Posted 2013-04-08T19:35:55.373

Reputation: 211

When I tried this out, Firefox printed bitmap radio buttons to the PDF file. Chromium-browser and wkhtmltopdf produced all-vector files. – Randall Whitman – 2019-04-17T21:58:39.660

CSSBox WebVector will convert HTML pages to SVG. It's a java command-line application, and you can see a sample of its output here.

Andrew

Posted 2013-04-08T19:35:55.373

Reputation: 91

Both command-line and GUI modes in fact. I tried out WebVector to export to SVG a small HTML form containing radio buttons. It produced an SVG file containing entirely vector content, as desired - no embedded bitmap content. The radio buttons rendered as squares, which look like checkboxes of typical rendering. – Randall Whitman – 2019-04-17T21:31:13.560

This is answered already at Capture large webpage screenshot in Chrome

I would use CutyCapt it captures webkit's render to an image.

CutyCapt is a small cross-platform command-line utility to capture WebKit's rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP. See IECapt for a similar tool based on Internet Explorer.

chx

Posted 2013-04-08T19:35:55.373

Reputation: 3 069

I tried out CutyCapt to export to SVG a small HTML form containing radio buttons. It produced an SVG file containing partly vector and partly bitmap content. – Randall Whitman – 2019-04-17T21:09:31.377

CutyCapt is available in the canonical repositories on ubuntu 18.04, so sudo apt install cutycapt is all I needed to do to try it. With a couple of seconds delay (--delay=3000) it even renders mathjax!!! – cheshirekow – 2019-05-08T22:48:16.063

One approach: If you take a raster screenshot (PNG, JPG, etc.), you can then use "Trace Bitmap" in Inkscape to "convert" the fields of certain related colors in the screenshot to vector objects. I am sure there is an equivalent tool in Adobe Illustrator. Take care with how many separate colors you specify to trace - the resulting vector files can grow complex quickly. Each color is a separate vector object that overlaps the other color objects to represent the original raster image, so you will probably need to do some clean up.

Adam Keck

Posted 2013-04-08T19:35:55.373

Reputation: 21

1This will take so much work to get the settings correct, I don't think this will be acceptable. But you never know. Adobe Flash can do this as well, and has a different way of doing things, which could have better or worse results. – SPRBRN – 2013-04-17T12:03:46.237

-1

This might help you. There is a great add-on to Firefox, called Save as PDF, which uses the tools from https://pdfcrowd.com/. For final SVG output I would then use one of the online tools to convert to SVG.

Petr S

Posted 2013-04-08T19:35:55.373

Reputation: 1