svg 8-bit graphics on canvas

using SVG to create 8-bit graphics that will NOT scale bicubically.

HTML

Scalable rotateable 8-bit graphics on a HTML 5 canvas using SVG.
<canvas style="background-color: #eee;" id="canv" width="280" height="200"></canvas>

JavaScript

var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0); // same as saying: img, 0 ,0 , 8, 8, 0, 0, 8, 8
    ctx.drawImage(img, 0, 0, 8, 8, 8, 8, 64, 64);
    // show you cannot just scale, but also rotate!
    ctx.rotate(0.1);
    ctx.drawImage(img, 0, 0, 8, 8, 120, 8, 150, 150);
}
// Specify the src to load the image
var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'>";
// the letter A in bytes..
var bytes = [56, 108, 198, 198, 198, 255, 198, 198];
var x, y;
for (y = 0; y < 8; y++) {
    for (x = 0; x < 8; x++) {
        var n = bytes[y];
        var mask = 2 << x;
        if ((n & mask) != 0) {
            svg += "<rect fill='#000' ";
            svg += "x='" + x + "' y='" + y + "' ";
            svg += "width='1.02' height='1.02'/>";
        }
    }
}
svg += '</svg>';
console.log(svg);
var data = "data:image/svg+xml;utf8," + svg;
img.src = data;