svg - 如何在保持整个像素的同时缩放 SVG？

Question

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

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

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

score 6 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

CSS 值 image-rendering:pixelated; 所以：

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

这是通过阅读上面的答案链接，在“已接受”答案中。在撰写本文时，它还不是官方的，仍然是 CSS4 的“提议”，但似乎已经被 Chrome 支持。

2 回答 2