Search code examples
svg-filters

SVG alpha filter altering pixel color

I'm using JS and <canvas> to render an isometric scene. I'm using this SVG filter so that the tiles have sharp pixel edges:

<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="linear" slope="255"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

This forces any transluscent pixels to render as opaque. But it's also slightly altering the color of the effected pixels, so they are noticeably different from the rest of the tile. I've only just started messing with svg filters, is there a way to modify this so that it doesn't alter the color of the pixels?

enter image description here

Solution

  • Some anti-aliasing schemes use rgb values other than the source rgb value (for example - sub-pixel anti-aliasing vs grey-scale antialiasing for font rendering). In these schemes, when you boost the opacity of these pixels - you can end up with a different color.

    In pure SVG, you'd use shape-rendering=crispEdges to eliminate anti-aliasing. But Canvas has no option like this.

    One solution here - rather than boost the opacity of the anti-aliasing pixels, you could try eliminating them - so only (almost) fully opaque pixels remain. You can do this using a different feComponentTransfer. This filter below sets every opacity below about .96 to 0, and every opacity above that to 1.

    <svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="crush-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>