如何在保持整像素的情况下缩放SVG <image>？

Question

我有一张像素艺术风格的图片，想要使用SVG将其放大到4倍大小。然而，以下代码会使图像的像素模糊：

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

有没有一些属性可以解决这个问题？

- Eric

Answer 1

我认为image-rendering="optimizeSpeed"是你可以得到的最接近的选项。正如该属性的规范所述，它应使用实现快速渲染目标的重采样算法，要求重采样算法至少与最近邻重采样一样好。由于这是规范中唯一提到“最近邻”的部分，我认为你没有其他选择。

我找到的唯一相关内容是IE9 属性 -ms-interpolation-mode:nearest-neighbor。当然，这是仅适用于 HTML 的 IE 特定的 CSS 属性。

哪个操作系统/浏览器/版本会因使用该属性而导致插值像素？

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

- Phrogz

---

我在Google Chrome上遇到了这个问题，无论是否使用该属性。目前，我通过在画图软件中预先放大我的图像来解决它。 - Eric

哦，看起来 image-rendering: -moz-crisp-edges; 也可以解决问题。现在 Chrome 的属性在哪里呢？ - Eric

这是一个关于 WebKit 的等效替代方案的 stackoverflow 回答（在回答时还没有等效替代方案）。 - Phrogz

Answer 2

CSS属性 image-rendering: pixelated; 的意思是像素化显示图片。

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

这段内容是从上面的答案链接中阅读得来的，“已被接受”的答案。截至撰写时间，它尚未正式发布，仍处于CSS4的“建议”阶段，但似乎已经被Chrome浏览器支持。

- Abacus