CODEWITHSUNDEEP
jqueryhtmlcanvassvghtml5-canvas
Samantha J T Star
Samantha J T Star

Reputation: 32758

Can my HTML5 Canvas code be converted to SVG?

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?

Upvotes: 4

Views: 2412

Answers (2)

Sirko
Sirko

Reputation: 74036

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.

Upvotes: 8

philipp
philipp

Reputation: 16495

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

Upvotes: 1

Related Questions