54

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
  • 7,944
  • 2
  • 36
  • 59
  • It looks like http://html2canvas.hertzen.com/ might help here. – SLaks Apr 08 '13 at 19:36
  • 1
    is the .html file in question not actually what you want? – Sparr Apr 08 '13 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 ``. (for the help / tour page of a web app) – SLaks Apr 08 '13 at 19:39
  • How would PNG or JPEG files be converted to SVG? – HairOfTheDog Apr 08 '13 at 20:02
  • @HairOfTheDog: They would become embedded bitmaps. (that's what I meant by the last line in my answer) – SLaks Apr 08 '13 at 20:06
  • If you are not opposed to working with Linux, take a look at [this](http://askubuntu.com/questions/247878/create-an-svg-screenshot) – Darius Apr 08 '13 at 20:07
  • @Darius: Are you aware of any GTK-based browsers? – SLaks Apr 08 '13 at 20:30
  • @SLaks [Midori?](http://en.wikipedia.org/wiki/Midori_(browser)) – Darius Apr 08 '13 at 21:52
  • 10
    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. – smonff Apr 13 '13 at 14:47
  • 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 Apr 15 '13 at 01:19
  • @user1167442: You're misunderstanding the question. I want to convert the HTML of the entire page into SVG. – SLaks Apr 15 '13 at 23:37
  • @Slaks. Right, I figured it out after I asked. This looks like a solution though: http://html2canvas.hertzen.com/ – dgo Apr 16 '13 at 18:07
  • 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 May 17 '18 at 20:01
  • 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 Oct 27 '19 at 13:28

6 Answers6

23

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

Giacomo1968
  • 53,069
  • 19
  • 162
  • 212
felixfbecker
  • 331
  • 2
  • 3
  • Works well, but doesn't perfectly capture more sophisticated elements of displays, such as created using modern CSS – ms609 Jul 21 '22 at 13:05
21

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
  • 311
  • 1
  • 3
  • 1
    When I tried this out, Firefox printed bitmap radio buttons to the PDF file. Chromium-browser and wkhtmltopdf produced all-vector files. – Randall Whitman Apr 17 '19 at 21:58
  • 1
    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](https://superuser.com/a/1328256/340842) from [dj rock](https://superuser.com/users/911290/dj-rock). – fakedad Aug 03 '21 at 23:39
11

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
  • 111
  • 1
  • 3
  • 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 Apr 17 '19 at 21:31
2

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.

Community
  • 1
chx
  • 3,633
  • 6
  • 30
  • 68
  • 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 Apr 17 '19 at 21:09
  • 1
    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 May 08 '19 at 22:48
-1

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
  • 19
  • 1
  • 3
    This 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 Apr 17 '13 at 12:03
-3

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
  • 1
  • 1