Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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
2  
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

4 Answers 4

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

Why making it difficult? How often do you have to do this? How many images are on that page? I would simple save the pages as html with images, and then open the images in your SVG editor on one canvas.

share|improve this answer
    
You're misunderstanding the question. I want to convert the HTML of the entire page into SVG. –  SLaks Apr 15 '13 at 23:38
    
Just a thought, haven't tested it: print to PDF, then import in Illustrator, then export to SVG. To get usable prints try Acrobat Professional or any other tool that can print to PDF. Acrobat Pro and Illustrator are availabe as trials, so you can see if this works or not. –  SPRBRN Apr 16 '13 at 17:49

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.