具有清晰边缘的 SVG 图像元素

Question

我有一个包含使用<image> 的PNG 图像的SVG。此包含的图像是像素艺术，我希望它显示像素化。

但它却显示模糊。

我可以更改显示以使其像素化吗？

最小测试用例：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image
    width="100"
    height="100"
    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAD0lEQVR4AWP48OotAwMDAA3tAsiMG69RAAAAAElFTkSuQmCC"
  />
</svg>

里面是一个尺寸为 2 像素宽和 1 像素高的 PNG。

这是它在 macOS 12.1 (21C52) / Safari 15.2 (17612.3.6.1.6) 上的显示方式。

但我希望它看起来像这样：

Answer 1

使用image-rendering: pixelated 设置<image> 元素的样式可以达到预期的效果：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image style="image-rendering: pixelated;" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAD0lEQVR4AWP48OotAwMDAA3tAsiMG69RAAAAAElFTkSuQmCC" />
</svg>

image-rendering CSS 属性设置图像缩放算法。该属性适用于元素本身、在其其他属性中设置的任何图像及其后代。

——MDN Web Docs: Image Rendering

请注意，这似乎无法在 Safari 中正确呈现。

Answer 2

正确的方法是使用 image-rendering: pixelated - 但 Safari 尚不支持。

在此之前 - 此过滤器将适用于黑白像素艺术 - 将所有 RG 和 B 值转换为 0 到 127 -> 0 以及从 128 到 255 -> 255 的所有值。（如果您已放大抗锯齿如果您想压缩，则应在过滤器中的 feFunc 列表中添加另一个 <feFuncA type="discrete" tableValues="0 1"/>）。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" color-interpolation-filters="sRGB">
  <defs>
    <filter id="crispen">
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 1"/>
        <feFuncG type="discrete" tableValues="0 1"/>
        <feFuncB type="discrete" tableValues="0 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image
    filter="url(#crispen)"
    width="100"
    height="100"
    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAD0lEQVR4AWP48OotAwMDAA3tAsiMG69RAAAAAElFTkSuQmCC"
  />
</svg>

您还可以通过为 tableValues 指定不同的数组来将其推广到双色调像素艺术。如果您的深色调是 rgb(40,60,70) 而您的浅色调是 rgb (250,200,180)，那么您的 feComponentTransfer 将是：

  <feComponentTransfer>
    <feFuncR type="discrete" tableValues="0.156 .98"/>
    <feFuncG type="discrete" tableValues="0.235 .784"/>
    <feFuncB type="discrete" tableValues="0.274 .706"/>
  </feComponentTransfer>

（例如 - 当您统一较低的红色值 40 - 您得到 40/255 = .156）

请注意，这只适用于所有上下 RGB 值均低于和高于 127.5 的情况。例如，如果您的浅色调是 rgb(200,50,50) 而您的深色调是 (50,60,60) - 那么这将导致错误的答案。在这种情况下，您必须创建一个更长（更复杂）的 tableValues 数组，以便将源颜色转换为正确的目标颜色。