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 http://stackoverflow.com/questions/8571294/method-to-convert-html5-canvas-to-svg and http://stackoverflow.com/questions/6918597/convert-canvas-or-control-points-to-svg — Erik Dahlström, Mar 05 '12 at 12:20

score 8 · Accepted Answer · answered Mar 03 '12 at 16:15

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.

score 1 · Answer 2 · answered Mar 03 '12 at 16:06

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 03 '12 at 16:06

philipp

15,947
15
61
106

Sorry. What I mean by convert is just to recode in SVG. Maybe I did not explain very well. – Samantha J T Star Mar 03 '12 at 16:33
It is a good idea, use this library that does just that: http://jonobr1.github.io/two.js/ – michelpm May 31 '13 at 21:17
@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… – philipp Jun 01 '13 at 07:04

Can my HTML5 Canvas code be converted to SVG?

2 Answers2