Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
    
It looks like html2canvas.hertzen.com might help here. – SLaks Apr 8 '13 at 19:36
1  
is the .html file in question not actually what you want? – Sparr Apr 8 '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 <img>. (for the help / tour page of a web app) – SLaks Apr 8 '13 at 19:39
    
How would PNG or JPEG files be converted to SVG? – HairOfTheDog Apr 8 '13 at 20:02
3  
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

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer
    
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

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.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .