Conclusions for pixels
* For Canvas, pixels are native
* Emulating pixels with SVG results in a huge DOM
* Winner: Canvas
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
Canvas to SVG
* Canvas provides the .toDataURL() -method for reading its image data - This data can be inserted into SVG image element
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
// 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"
?>
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;
}
});
}
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!
