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?

Answer 1

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.

Answer 2

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