How can I scale an SVG <image> while maintaining whole pixels?

I think that image-rendering="optimizeSpeed" is the closest you can get. As the specs for that property state, it "should use a resampling algorithm which achieves the goal of fast rendering, with the requirement that the resampling algorithm shall be at least as good as nearest neighbor resampling." As this is the only section of the spec that mentions "nearest neighbor", I don't think you have any other option.

The only other related thing I can find is the IE9 property -ms-interpolation-mode:nearest-neighbor. This is (of course) IE specific, and is listed as a CSS property (so possibly only applicable to HTML).

Which OS/browser/version is giving you interpolated pixels as a result of upsizing with that attribute?


Also, note that you can use a combination of HTML5 Canvas and SVG to perfectly recreate your image with one SVG <rect> per pixel:
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml