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.
8 Answers
you can use foreignObject in your svg to define html element in svg.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="20" y="20" width="160" height="160">
<div xmlns="http://www.w3.org/1999/xhtml">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.
</div>
</foreignObject>
</svg>If you want to convert your html elements to svg elements like rect,text,image you can use htmlsvg.js to do that.
live demo: https://htmlsvg.netlify.app/
As mentioned in the accepted answer, the wkhtmltoimage library is a decent solution, though it isn't always perfect. I was at first a little confused about how to use it, so I'd like to share my current workflow:
- install wkhtmltopdf and add it to your path env var
- open your web app and put it in whatever state you want to capture
- use the SingleFile browser extension to make a static html snapshot of it
- run
wkhtmltoimage mySnapshot.html mySnapshot.svg - open it in Inkscape, ungroup the image and extract the part of the now-vectorized page you're interested in
The easiest way that I use is printing the website from Google Chrome in PDF, usually using the biggest Pagesize, Portrait mode, and Background Graphics Checked. Sometimes it has some minor bugs, but it is far better than all the solutions from the other answers.
Related