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

• It looks like html2canvas.hertzen.com might help here. Apr 8, 2013 at 19:36
• is the .html file in question not actually what you want? Apr 8, 2013 at 19:37
• @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) Apr 8, 2013 at 19:39
• How would PNG or JPEG files be converted to SVG? Apr 8, 2013 at 20:02
• This 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. Apr 13, 2013 at 14:47

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

• When I tried this out, Firefox printed bitmap radio buttons to the PDF file. Chromium-browser and wkhtmltopdf produced all-vector files. Apr 17, 2019 at 21:58
• If you use this option in Chrome, you might want to emulate screen media for printing to avoid different styles being used. See this answer from dj rock. Aug 3, 2021 at 23:39

I wrote an open source browser extension that does exactly this. It works by traversing the DOM and converting elements to SVG elements, using the styles and coordinates computed by the browser. The SVG hierarchy will mirror the DOM hierarchy.

The SVG works well when embedded in the browser, but I also put work in to make it importable into design tools like Figma as well as possible (caveat here is that design tools often don't support the full SVG spec).

• Works well, but doesn't perfectly capture more sophisticated elements of displays, such as created using modern CSS Jul 21 at 13:05

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.

• 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. Apr 17, 2019 at 21:31

• 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!!! May 8, 2019 at 22:48