Canvas vs SVG

By Xah Lee. Date: . Last updated: .

Here's a summary of differences of HTML Canvas and Scalable Vector Graphics (SVG).

What's the Difference Between Canvas and SVG

• Canvas is bitmap based, SVG is vector graphics tech. (this basically means, SVG graphics can be resized without getting fuzzy.)

• Canvas is just a bitmapped paint area. You use JavaScript to paint things on it. That's all it can do for you. For example, once you've drawn a circle, you can't just delete that circle. You have to draw something to cover up the circle. The circle isn't some object you can manipulate. It's just old paint on the wall. Everything in canvas is like this. Suppose if you want to know if user clicked on the circle. To do this, you have to calculate the click's coordinate, and you have to write code to check if mouse point is in the circle. Suppose you want to move the circle, then you have to draw something to cover up the old circle, and draw the circle again somewhere else. Canvas is very low level.

• SVG is XML. (XML is a cleaned up version of HTML) Each graphics element you created can be scripted with JavaScript for interactivity as part of XML/CSS/DOM. For example, onclick, onmouseover.

• The language of Canvas is low level and procedural, while SVG is declarative and higher level. In procedural style, you give commands to draw as if telling a paint brush where to move. In declarative style, you state your graphics shape and size.

• with Canvas, once a image is drawn, it's dead image, like paint on wall. With SVG, it's live: changes in code or object parameters are rendered in real-time.

• Canvas is relative new, part of HTML5. Canvas is invented by Apple in 2004 as proprietary tech to replace Flash, and is well supported in Apple's mobile devices. SVG started in 1999.

All current browsers supports both Canvas and SVG.

• SVG also supports bitmapped images.

Canvas vs SVG Comparison by Example

Here's CANVAS and SVG of the same drawing.

Try to magnify the browser and see the SVG scales smoothly.

Here's the canvas code:

{

const ff = (() => {

    const yy = <HTMLCanvasElement> document .getElementById("canvas47541");

    // create drawing area
    const xx = yy.getContext("2d");

    // paint a line
    xx.beginPath();
    xx.strokeStyle = "red"; // specify color
    xx.moveTo(0,0); // move pen to
    xx.lineTo(50,50); // draw line to here
    xx.stroke(); // actually draw it

    // paint a arc
    xx.beginPath();
    xx.strokeStyle = "blue";
    xx.arc(50,50, 30, 0, 2 * Math.PI, true); // x, y, radius, angle 1, angle 2, counter-clockwise
    xx.stroke();

    // paint a text
    xx.fillText("canvas", 0, 90,);

    // paint a rectangle
    xx.fillStyle = "cyan"; // specify color
    xx.fillRect(50, 25, 15, 10); // x, y, width, height

});

ff();

}

Here's the SVG code:

<svg>
<path d="M 0 0 L 50 50" style="stroke:red"></path>
<circle cx="50" cy="50" r="30" style="stroke:blue;fill:none;"></circle>
<rect x="50" y="25" width="15" height="10" style="fill:cyan;"></rect>
<text x="0" y="90">svg</text>
</svg>

Here's the SVG code in JavaScript:

document .getElementById("svg3_51007"). innerHTML = `<svg>
<path d="M 0 0 L 50 50" style="stroke:red"></path>
<circle cx="50" cy="50" r="30" style="stroke:blue;fill:none;"></circle>
<rect x="50" y="25" width="15" height="10" style="fill:cyan;"></rect>
<text x="0" y="90">svg</text>
</svg>`;

or this way:

{

const gg = (() => {

    // create the svg element
    const svg_box = document .createElementNS ("http://www.w3.org/2000/svg", "svg");

    const mypath = document .createElementNS ("http://www.w3.org/2000/svg", "path");
    mypath.setAttribute("d", "M 0 0 L 50 50");
    mypath.setAttribute("style", "stroke:red");

    const mycir = document .createElementNS ("http://www.w3.org/2000/svg", "circle");
    mycir.setAttribute("cx", "50");
    mycir.setAttribute("cy", "50");
    mycir.setAttribute("r", "30");
    mycir.setAttribute("style", "stroke:blue;fill:none;");

    const myrect = document .createElementNS ("http://www.w3.org/2000/svg", "rect");
    myrect.setAttribute("x", "50");
    myrect.setAttribute("y", "25");
    myrect.setAttribute("width", "15");
    myrect.setAttribute("height", "10");
    myrect.setAttribute("style", "fill:cyan;");

    const mytext = document .createElementNS ("http://www.w3.org/2000/svg", "text");
    mytext.setAttribute("x", "0");
    mytext.setAttribute("y", "90");
    mytext.appendChild(document .createTextNode("svg"));

    svg_box.appendChild(mypath);
    svg_box.appendChild(mycir);
    svg_box.appendChild(myrect);
    svg_box.appendChild(mytext);

    // attach to document
    document .getElementById("svg20876").appendChild(svg_box);

});

gg();

}

What's Canvas Good For?

Because Canvas is very primitive, so it's fast. It is suitable for bitmapped games, such as DOOM, Quake, where all you want to do is painting the screen.

For chart, map, interactive illustration, board game, SVG is much more suitable.

Canvas Tutorial

Learn Canvas in 10 Minutes

SVG Tutorial

Practical SVG Tutorial

Sample Animated SVG

Here's is a animated SVG.

soccer ball rotating
rotating soccer ball in SVG. image source

SVG: Animation

Canvas Topic

  1. Canvas vs SVG
  2. Learn Canvas in 10 Minutes
  3. Canvas Tutorial: Halma Board Game
  4. HTML Canvas Demo: Raycaster
  5. HTML Canvas Reference
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog