如何在保持整个像素的同时缩放SVG <img/>？

Question

我有一个pixelart风格的图像，打算用SVG缩放到4倍大小。但是，以下代码会模糊图像的像素：

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

是否有某些属性可以解决此问题？

Answer 1

我认为image-rendering="optimizeSpeed"是你能得到的最接近的。作为the specs for that property状态，“应该使用重新采样算法来实现快速渲染的目标，同时要求重采样算法至少应与最近邻居重采样一样好。” As这是规范中唯一提到“最近邻居”的部分，我认为你没有其他任何选择。

我能找到的唯一其他相关内容是IE9 property -ms-interpolation-mode:nearest-neighbor。这（当然）是特定于IE的，并且被列为CSS属性（因此可能仅适用于HTML）。

由于使用该属性进行升级，哪个操作系统/浏览器/版本为您提供了插值像素？

---

另请注意，您可以使用HTML5 Canvas和SVG的组合，以每个像素一个SVG <rect>完美地重新创建您的图像：
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml

Answer 2

CSS值图像渲染：像素化；所以：

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

这是通过阅读上面“可接受的”答案中的答案链接而得出的。截至撰写本文时，它尚未正式发布，对于CSS4仍是“建议”，但似乎已被Chrome支持。