Can my HTML5 Canvas code be converted to SVG?

Question

I have the following example code:

 function drawCanvas() { var canvas = document.getElementById("logoText"); var c = canvas.getContext('2d'); c.lineWidth = 1; c.lineStyle = "#FFFFFF"; c.fillRect(10, 10, 150, 40); c.fillStyle = "#FFFFFF"; c.font = "22px 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif" c.fillText("Test", 20, 45); hexstring1 = "\u2610"; c.fillText(hexstring1, 20, 70); }

If I assume use of browsers that support both SVG and Canvas then how could I convert this code to use SVG.

Also what would there be any advantage or disadvantage to using SVG over Canvas?

Also see stackoverflow.com/questions/8571294/… and stackoverflow.com/questions/6918597/… — Erik Dahlström
– Erik Dahlström, Commented Mar 5, 2012 at 12:20

Sirko · Accepted Answer · 2012-03-03 16:15:10Z

SVG is tag based like HTML itself. So you have to insert DOM nodes inside an SVG tag. Your example translates roughly to the below code.

You may create this in JavaScript the same way like any other nodes, but make sure to use document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' ); to insert the nodes instead of the usual document.createElement( 'div' );.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100"> <rect x="10" y="10" width="150" height="40" style="stroke: #FFFFFF; stroke-width: 1px" /> <text x="20" y="45" style="fill: #FFFFFF; font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif; font-size: 22px">Test</text> <text x="20" y="70" style="fill: #FFFFFF; font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif; font-size: 22px">&#9744;</text> </svg>

There are two advantages of using SVG over canvas:

Your images scale much better. There are much less artifacts if you enlarge your image.
You can make your elements "clickable". Attach the same events like in HTML to any element in SVG. So you can, e.g., make some sort of a custom button using SVG, attach a click handler and use it as a submit button.

philipp · Accepted Answer · 2012-03-03 16:06:58Z

1

You cannot convert from canvas to svg directly. You can store the canvas drawing commands in a stack, afterwards you can generate a path data string, or use the DOM Interface. Look here for the structure of path data

answered Mar 3, 2012 at 16:06

philipp

16.6k15 gold badges66 silver badges121 bronze badges

3 Comments

Samantha J T Star Over a year ago

Sorry. What I mean by convert is just to recode in SVG. Maybe I did not explain very well.

michelpm Over a year ago

It is a good idea, use this library that does just that: jonobr1.github.io/two.js

philipp Over a year ago

@michelpm looks like a good library, since unifying the apis can be a pain in the back. On the other hand, I used nearly always only one of the technologies, so dealing with one API was enough…

Collectives™ on Stack Overflow

Can my HTML5 Canvas code be converted to SVG?

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related