Search code examples
svgpngantialiasing

Turn off anti-aliasing of bitmap images embedded in SVG images

I have an PNG image embedded within an SVG images. How do I turn off anti-aliasing for the embedded image? (Or, turn it off for everything including the embedded image?)

I've tried setting shape-rendering="crispEdges" on the image object, but when I zoom in using Chrome or Inkscape I can still see the fuzzy edges.

Thanks

Solution

  • shape-rendering is for shapes i.e. lines and circles. Images have their own property image-rendering. You need something like this...

        image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;