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

I have a pixelart-style image which intend to scale to 4x size with SVG. However, the following code blurs the pixels of the image:

<image x="0" y="0" width="1024" height="1024"
    image-rendering="optimizeSpeed开发者_开发百科"
    xlink:href="pixelart.bmp" />

Is there some attribute which will resolve this?

---

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

---

CSS value image-rendering:pixelated; so:

<image x="0" y="0" width="1024" height="1024"
    style="image-rendering:pixelated"
    xlink:href="pixelart.bmp" />

This is from reading through the answer link above, in the "accepted" answer. It is not official as of time of writing, still "Proposed" for CSS4, but appears to be supported by Chrome already.