SVG Open 2009: SVG vs. Canvas on Trivial Drawing Application

Workshop!

"User interface prototype to SVG web app with rapid prototyping"

Abstract

Canvas vs. SVG?
Combining Canvas and SVG

Canvas examples

Jigsaw puzzle

Implementing almost everything that's native in SVG, 2800 lines of JavaScript

Flickr slideshow

Implements at least the mouse interaction, which is native in SVG

Wolfenstein 3D

Now it's fit for Canvas!

SVG examples

Space Invaders

Bitmaps and no mouse interaction, maybe Canvas would have worked better?

Photo slideshow

Now it's fit for SVG!

Illustrating the difference with a...

pixel drawing application with SVG
pixel drawing application with Canvas
vector drawing application with SVG
vector drawing application with Canvas

Pixels

Canvas

function drawPixel(canvas, x, y) {
  var ctx = canvas.getContext("2d");
  ctx.fillRect(x, y, 1, 1);
}

SVG

function drawPixel(SVGRoot, x, y) {

  var pixel = document.createElementNS(
    "http://www.w3.org/2000/svg", "rect");

  pixel.setAttribute('style', "fill: black");
  pixel.setAttribute('x', x);
  pixel.setAttribute('y', y);
  pixel.setAttribute('width', 1);
  pixel.setAttribute('height', 1);

  SVGRoot.appendChild(pixel);
}

Conclusions for pixels

For Canvas, pixels are native
Emulating pixels with SVG results in a huge DOM
Winner: Canvas

Vectors

SVG

// same code as when emulating pixels!

function addCircle(SVGRoot, radius, x, y) {

  var circle = document.createElementNS(
    "http://www.w3.org/2000/svg", "circle");

  circle.setAttribute('style', black);
  circle.setAttribute('cx', x);
  circle.setAttribute('cy', y);
  circle.setAttribute('r', radius);

  SVGRoot.appendChild(circle);
}

Canvas (CakeJS library)

// CakeJS is 7500 lines of JavaScript!

function addCircle(cakeCanvas, radius, x, y) {

  var circle = new Circle(radius,
    { x: x, y: y, fill: black });

  cakeCanvas.append(circle);
}

Conclusions for vectors

For SVG, vector shapes and mouse interaction are native
With Canvas, you need to implement everything by yourself (or use a library)
Winner: SVG

Recap

It's possible to do pixels with SVG and vector shapes with Canvas...
...But we are better off with native implementations.

Combining SVG and Canvas

How to transfer data between SVG and Canvas?

svg and canvas friends

Canvas to SVG

foreignObject vs. toDataURL()

SVG does not know anything about the contents of a foreignObject

It could be anything that the browser can render

Canvas provides the .toDataURL() -method for reading its image data

This data can be inserted into SVG image element

Using canvas.toDataURL()

function importCanvas(sourceCanvas, targetSVG) {

  // get base64 encoded png from Canvas
  var image = sourceCanvas.toDataURL();

  // Create new SVG Image element.
  var svgimg = document.createElementNS(
           "http://www.w3.org/2000/svg",
           "image");
  svgimg.setAttributeNS(
           "http://www.w3.org/1999/xlink",
           "xlink:href",
           image);

  // Append image to SVG
  targetSVG.appendChild(svgimg);
}

SVG to Canvas

There is no .toDataURL() -method for SVG
Solution: Server-side rasterization from serialized SVG

Server-side conversion with ImageMagick

<?php

// Save SVG from POST
$svg_xml = $_POST["svg_xml"];
file_put_contents("input.svg",$svg_xml);

// Run conversion program (ImageMagick) 
system("convert input.svg output.png");

// Return the name of rasterization for client
echo "output.png"

?>

Loading converted Image with Ajax (jQuery)

function importSVG(sourceSVG, targetCanvas) {

  var svg_xml = (new XMLSerializer()).serializeToString(sourceSVG);

  $.post("convert.php", { svg_xml: svg_xml },
    function(data) {
      var ctx = targetCanvas.getContext('2d');
      var img = new Image();

      img.onload = function() {
        ctx.drawImage(img,0,0);
        img.src = data;
      }
    });
}

Everything combined

Pixels with Canvas
Vectors with SVG
Data transfer from Canvas to SVG and back

Existing components with the same interface

Let's drop our trivial implementation and use existing components instead

SVG-edit + CanvasPaint

Combine SVG-Edit and CanvasPaint together
Example provided as is, we did not modify SVG-Edit or CanvasPaint

No vs. situation

As pointed out yesterday by Klaus Förster, there is need for both SVG and Canvas
They should nicely complement each other in future HTML5

Conclusion

For pixel flare and other demo effects, go with Canvas
But for user interaction and shape stacking, S to the V to the G!

shape stacking