RE: Image rendering - telling the browser to TURN OFF anti-aliasing.

Attached (for those that don’t have the attachment stripped out) is the SVG diagram – which is a conversion of a NIST CGM test diagram, which illustrates the problem.
The color of 4 squares is defined as a 2x2 array of color,  which then gets scaled up to fill the space, that this 2x2 array of color is to fill.

I have a different example that defines a pattern, which is used to fill a region – it has similar issues with the edges blurring, but as the pattern replicates the pattern definition – the effect of anti-aliasing and processing isn’t as destructive as it is in this case.


Thomas
--
Thomas Smailus, Ph.D.  P.E.
Boeing Information Technology
thomas.o.smailus@boeing.com

From: schenney@google.com [mailto:schenney@google.com] On Behalf Of Stephen Chenney
Sent: Monday, March 23, 2015 11:10
To: Smailus, Thomas O
Cc: www-svg
Subject: Re: Image rendering - telling the browser to TURN OFF anti-aliasing.

Can you provide us with an svg file to test with? In theory the various image-rendering CSS properties would be useful in this context, but I don't know if they would influence SVG fill patterns. It would be good if they did.

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering


Stephen.

On Mon, Mar 23, 2015 at 1:54 PM, Smailus, Thomas O <Thomas.O.Smailus@boeing.com<mailto:Thomas.O.Smailus@boeing.com>> wrote:
This is an issue I’m finding with respect to fill patterns that are defined as simple raster patterns, which are then used to fill a region by replicating and/or stretching the pattern image to fill the region.

Currently the browsers anti-alias the image – and rightly so, because it could be a continuous tone photograph (most likely), or is it a 2x2 grid of colors that is a fill pattern (less likely).

This, of course, produces very ugly renderings when we are in the ‘fill pattern’ case.  It would be nice to tell the browser : Don’t anti-alias this when you transform it / fill with it, etc.  An image-rendering=”NoAntiAlias” sort of setting (or some name that makes sense to tell the viewer to only SCALE the raster content as needed, for the perserveAspectRatio setting, and transform per the transform attribute.

As it is, what I’d like isn’t what I can get.

The image on the right half is the CGM – a 4 pixel grid of 4 different colors, rendered over a rectangular area – the color pattern remains crisp and well defined.
The image on the right is what SVG does (Firefox in this case) – as it resamples and anti-aliases the 2x2 raster to fill a coordinate space.

http://i.imgur.com/BFiKipG.png



Thomas