58

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.

Purag
  • 16,273
  • 4
  • 48
  • 70
Esteis
  • 3,403
  • 2
  • 26
  • 41
  • Good question, but I doubt there is anything out there for this. It would depend on Webkit, or some other engine, being able to output in some vector form. I suspect it outputs straight raster, but am not sure of the internals. – Brad Aug 17 '12 at 12:34
  • 1
    Maybe render the page to a pdf, and then to an svg? It will depend on how the browser renders the page to a pdf. Some will actually insert text, others will render it to and image and place that into the pdf. Worth a shot though. – xthexder Aug 17 '12 at 13:59

8 Answers8

46

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?

MeatFlavourDev
  • 1,039
  • 1
  • 11
  • 21
  • I would add using chrome in the headless mode to this (great) list; see https://stackoverflow.com/a/50050884/6646912 for more info – krassowski Jul 27 '18 at 11:41
  • 2
    See my comments on these three methods at - https://superuser.com/questions/579933/is-it-possible-to-take-a-screenshot-of-a-web-page-as-an-svg-image – Randall Whitman Apr 17 '19 at 22:13
38

I managed to find a website that will do the conversion for you. All you have to do is paste the HTML in between line breaks and it does the rest. The URL is: http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx

Bmize729
  • 996
  • 6
  • 18
  • 1
    so perfect! Just saved me HOURS! And improved the quality of what I was doing! So nice it gets the text as font and everything! I couldn't be happier – David Silva Smith Sep 20 '14 at 20:57
  • 3
    I don't like that it's not a free solution :( Boo expensive licences. – MeatFlavourDev Nov 17 '14 at 00:32
  • 4
    Ow. 395 US$ for a one-person license is incredibly expensive. That was certainly not in place when I accepted this answer. I'll still leave this answer accepted, but if something comparable and less expensive (or libre) comes along I expect I shall change the accepted answer over. – Esteis Jan 28 '15 at 21:53
  • 2
    Can we change accepted answer then? It's shame to have to scroll to third answer :) – Maciej Paprocki Oct 26 '15 at 15:00
  • @Bmize729 God bless you – Newton Sheikh Feb 20 '18 at 06:01
  • @MaciejPaprocki: Done. I'm sorry it took me so long to get around to it, I felt I had to test the solutions before accepting, and never found the time. – Esteis May 23 '19 at 14:45
  • @Esteis you should get an award for xoming back after 4 years! – Maciej Paprocki May 23 '19 at 21:19
  • @MaciejPaprocki And you should get one for being enthusiastic and supportive! :D Thanks again for the comment pointing at the newer&better answer, and I hope you have a lovely weekend. <3 – Esteis May 25 '19 at 15:49
9

You can try wkhtmltoimage It can convert HTML to SVG and many different formats

Amiya Behera
  • 1,250
  • 11
  • 21
  • 1
    This method produces a nice all-vector result. It also produces the largest file, of the methods I've tried out on a small HTML form with radio buttons. – Randall Whitman Apr 17 '19 at 22:18
3

Tried xthexder's advice: printing to file. (And then converting PDF to SVG.) I tried Opera, Firefox, and Chromium under Linux; overview below. Real pity about Opera's bugs.

I've made this answer community wiki; additions for other OSes welcome.

Opera 11.61 (Linux)

  • supports printing to SVG(!), PDF, and PS
  • uses author style sheet (unless you choose a different style sheet from the View menu, or disable CSS)
  • With PDF and PS output, no text is put in the file! This is v. strange and must be a bug.
  • If I choose SVG output, Opera produce a .svg file but writes PostScript code in it. :-(

Firefox 11.0 (Linux)

  • supports printing to PDF and PS
  • ignores author style sheet, prints in black and white
  • Uses DejaVu Serif font in a somewhat large size

Chromium 17 (Linux)

  • supports printing to PDF only
  • ignores author style sheet, prints in black and white
  • Uses Times New Roman
Esteis
  • 3,403
  • 2
  • 26
  • 41
  • 2
    Opera doesn't itself produce SVG output when printing, but the printer driver (not controlled by Opera) may translate the drawing commands and allow saving to different file formats e.g svg. – Erik Dahlström Aug 20 '12 at 11:17
1

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:

  1. install wkhtmltopdf and add it to your path env var
  2. open your web app and put it in whatever state you want to capture
  3. use the SingleFile browser extension to make a static html snapshot of it
  4. run wkhtmltoimage mySnapshot.html mySnapshot.svg
  5. open it in Inkscape, ungroup the image and extract the part of the now-vectorized page you're interested in
Andrew Ulrich
  • 83
  • 1
  • 5
1

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.

abullock
  • 326
  • 1
  • 10
0

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/

hasankzl
  • 138
  • 8
-5

You can try http://www.letime.net/alpha/glm.html

it do text to HTML5 draws in css3

pierre jocelyn andre
  • 1
  • 1
  • Welcome to Stack Overflow! While this may answer the question, [it would be preferable](http://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – IKavanagh Sep 27 '15 at 16:15
  • 1
    Hi Pierre, thank you very much for your answer. glm seems to be a program to turn text into HTML, right? My question is looking for a way to turn HTML+CSS into a vector image, so I cannot accept your answer; but have an upvote, and enjoy Stack Overflow! – Esteis Sep 28 '15 at 07:37