Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I export part of an HTML page to an SVG image?

I need a vector image of a Wikipedia navbox. Unfortunately, Inkscape can't open the HTML file, and neither Opera nor Chromium can save the page as SVG. Googling, googling, and yet more googling turned up nothing; in particular, 'HTML2svg' seems to mean functionality where the HTML 'talks to' an SVG image inside it. Does anybody how to turn HTML into SVG, either the entire page or a div on the page? I need the styled HTML, CSS and all.

like image 769
Esteis Avatar asked Aug 17 '12 12:08

Esteis


People also ask

Can I convert HTML to SVG?

WebVector is an HTML to SVG or PNG convertor. It converts a HTML document into a vector image in SVG format or a bitmap image in PNG format. The Standard Vector Graphics (SVG) files can be further edited by a variety of vector graphics editors such as Inkscape.

Can SVG be directly into an HTML page?

SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.

What is SVG tag in HTML?

The <svg> tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. To learn more about SVG, please read our SVG Tutorial.


1 Answers

I've come across the same need and found the following free utilities which hold promise that this is possible:

  1. WebVector is an HTML to SVG or PNG convertor. It converts a HTML document into a vector image in SVG format or a bitmap image in PNG format. The Standard Vector Graphics (SVG) files can be further edited by a variety of vector graphics editors such as Inkscape.
    http://cssbox.sourceforge.net/webvector/

  2. 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.
    http://cutycapt.sourceforge.net/

  3. wkhtmltopdf and wkhtmltoimage are open source (LGPL) command line tools to render HTML into PDF and various image formats using the QT Webkit rendering engine. These run entirely "headless" and do not require a display or display service. There is also a C library, if you're into that kind of thing.
    http://wkhtmltopdf.org/

--

Unanswered Questions: I know that you can use something like rasterize.js to render DOM objects into <canvas>, but how are these libraries built such that they are able to export SVG? Specifically, can WebKit itself be used to output "pixel-perfect" editable SVG of web content and HTML snippets? Is this a relatively simple task for a library or is this something significantly more complex?

like image 69
MeatFlavourDev Avatar answered Sep 20 '22 00:09

MeatFlavourDev