SVG image element with crisp edges-CodePudding

I have an SVG which includes a PNG image using <image>. This included image is a pixel art and I would like it to show pixelated.

But instead it is showing blurry.

Can I change the display so it is pixelated?

Minimal test case:

<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>

Inside is a PNG with dimensions two pixels wide and one pixel tall.

Here is how it displayed on macOS 12.1 (21C52) / Safari 15.2 (17612.3.6.1.6).

But I want it to look like this:

CodePudding user response：

Styling the <image> element with image-rendering: pixelated achieves the desired result:

<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>

The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

— MDN Web Docs: Image Rendering

CodePudding user response：

Well the right way would be to use image-rendering: pixelated - but that's not supported on Safari yet.

Until then - this filter will work on monochrome pixel art - transforming all RG & B values between 0 and 127 -> 0 and all values from 128 to 255 -> 255. (If you have scaled up anti-aliasing that you want to squash, you should add another <feFuncA type="discrete" tableValues="0 1"/> to that list of feFunc's in the filter).

<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>