Pixel Art in the Browser: Why Canvas Beats SVG for Tiny Grids

I started making pixel art on graph paper in middle school. Every square was a pixel. I'd color them in with markers, scan the result, and zoom to 800% in MS Paint to see how it looked on screen. This was before I knew what anti-aliasing was, before I understood why a diagonal line in pixel art needs to follow specific stepping patterns to look clean. Pixel art is a discipline of constraints. You have a tiny grid, usually 16x16, 32x32, or 64x64. Every pixel is a deliberate decision. There's no blur, no feathering, no transparency gradients to hide behind. If a shape looks wrong, there's a specific pixel that's wrong, and you need to find it and fix it. Canvas vs SVG for pixel editors When building a pixel art editor for the browser, the rendering choice matters. SVG represents each pixel as a rectangle element in the DOM. On a 64x64 canvas, that's 4,096 DOM elements. On a 128x128 canvas, that's 16,384. The DOM was not designed for this. Performance degrades noticeably above a few thous