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.
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).
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).
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.
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.
You can import a website into Figma and then export it as an SVG, which worked well for me. In contrast to using other tools, it left the website's layout and formatting intact, which some Chrome extensions I tried did not. It also allows you to make edits before creating your SVG.
There are a few different Figma plugins to import a website, e.g. Web to Figma or html.to.design.
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.
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.
