Converting html to svg using javascript/jquery

Question

Is there a way to convert an html snippet to svg?

for example: <b>This is bolded</b>

I want to make an svg document with the html snippet above... is this possible?

Answer 1

I would suggest that you should edit your question to describe the actual use case and goal you are trying to achieve, as directly implementing what you seem to ask for is hard (see below). Some combination of SVG-in-XHTML or XHTML-in-SVG (for example, this) are far more likely to give you want you want.

We can only help you achieve your goals if you tell us your goals instead of asking us help you to solve a particular implementation you thought of to achieve them.

---

As I mentioned above, There is not an easy way to do what you suggest. In particular, HTML has automatic line wrapping, floating and general positioning concepts, as well as explicit z-indexing, that are not present in SVG.

The following madness would mostly work, however:

• Create an iframe or div on your page and set the HTML to your snippet.
• Loop through every element and convert wrap a margin:0;padding:0;border:0 span around every word in the text.
• Loop through every element (including your created spans) and calculate the absolute position on the page. (jQuery has a method to do this, or you could use the combination of offsetLeft/offsetTop and offsetParent to walk up the positioned tree and calculate it yourself.)
  • Calculate the equivalent z-index for each element by walking up the tree and using the getComputedStyle() and creating a chain of the local z-index.
  • For each of these elements, create the equivalent element in SVG with absolute positioning.
• Re-sort the SVG elements you created by the hierarchy of z-indices.

Answer 2

Check this html to SVG demo, (using HiQPDF, a commercial product). You can find there code samples for C# and VB.NET. You can convert an URL or a HTML code snippet as you requested.