ckportfolio.com - Web Development: SVG and Canvas Comparison

Web Development: SVG and Canvas Comparison

Initialization

SVG and Canvas both use corresponding HTML tags to initialize their place in the document:

Scalable Vector Graphics (SVG)

...
    <body>
        <svg id="example" width="200" height="200" viewBox="0 0 100 100"></svg>
    </body>
...

Canvas

...
    <body>
        <canvas id="example" width="200" height="200"></canvas>
    </body>
...

Both technologies recommend establishing the following attributes for each graphical element:

  • Unique identifer for future styling / programming
  • Width and height of the element

Unique to SVG is the viewBox attribute, which determines the local drawable area. For instance, should one wish to place a circle in the right bottom corner of the above element, X and Y values of 100 and 100 would be used. It is important to note that width and height attributes determine the final size of the rendered graphics.

Graphical Elements

SVG

As HTML5 supports direct embedding of SVG documents, one can simply populate the <svg> element with child elements. Example is available on jsFiddle.

...
    <body>
        <svg id="example" width="200" height="200" viewBox="0 0 100 100">
          <rect x="5" y="5" width="90" height="90" fill="crimson"></rect>
          <line x1="0" y1="50" x2="100" y2="50" stroke="black" opacity="0.5" stroke-width="10"></line>
          <circle r="10" fill="white" cx="50" cy="50"></circle>
        </svg>
    </body>
...

As individual geometric primitives are treated as HTML elements, they can also benefit from CSS declarations:

#example circle
{
  stroke: black;
  stroke-width: 3px;
}

Canvas

Beyond the initial HTML tag, all graphical elements in <canvas> must be drawn using JavaScript, in a procedural fashion. Example is available on jsFiddle.

var example = document.getElementById('example');
var context = example.getContext('2d');

context.fillStyle = 'crimson';
context.fillRect(10, 10, 180, 180);
context.beginPath();
context.arc(100, 100, 20, 0, 2 * Math.PI);
context.fillStyle = "white";
context.fill();

context.beginPath();
context.moveTo(0, 100);
context.lineTo(200, 100);
context.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 20;
context.stroke();

context.arc(100, 100, 20, 0, 2 * Math.PI);
context.fillStyle = "white";
context.fill();

Using a style called immediate mode, where the canvas element is drawn on line by line over each stroke, the canvas does not maintain a list of graphical elements as SVG: only the original <canvas> element will be accessible in the browser.

Application

As its name suggests, SVG is best suited for vector graphics that feature a smaller number of geometric shapes. They are scalable and easy to customize with conventional CSS. As a format designed to describe graphics for the browser to render, SVG is often used in logos and icons, but does not fare well with more complex graphics and color blends.

Canvas features a rather steep learning curve with no inherent way to customize already painted objects, and is prone to pixelation due to its raster nature. However, the format offers a much higher degree of graphical expression, and is much faster when painting complex scenes. Canvas is best created using a dedicated JavaScript library, and often found in dynamic and interactive animations on the web.

Fin