SVG is important because the text of PNG in Jupyter notebooks inline mode looks blurred.

I agree svg is important in and of its self, however you can fix the blurry text in the notebook by using ipympl (which also gets you live figures!) or by increasing the dpi that inline uses.

I am concerned that we are applying this change both un-conditionally and to only one of the two branches that write out image elements to the svg. I can see the argument that in all cases, even if we are already re-sampling the image, that we don't want the viewer further re-sampling (which I assume it would do in RGB(A) space which in the case of false-color images leads to "wrong" colors showing up) but I am less sure about the aspect ratio.

This will definitely require some tests.

Can you post before/after examples where this improves things?

Can you post before/after examples where this improves things?

# generate an SVG image with 4 pixels
import matplotlib.pylab as plt
a = [[0,0],[0,1]]
# interpolation='none' is the only way to avoid resampling images in saved SVG files.
# interpolation=None will produce a new image with much more pixels in SVG files.
plt.imshow(a,interpolation='none')
plt.savefig('a.svg')

Before

Below is the <image> part in a text editor. The image has only 4 pixels. It's scaled up to fit the axes. However, SVG viewers will do interpolations such as bilinear for the scaled-up images (Ref).

<image height="2" id="imageb494a1e85e" transform="matrix(109 0 0 109 112.68 34)" width="2" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAABHNCSVQICAgIfAhkiAAAABpJREFUCJljdGEM+c/AwMDAxMDAwLDz2QUGAB7eBAuDpB2sAAAAAElFTkSuQmCC"/>

After

Below is the <image> part in a text editor, two new attributes are added. style="image-rendering:pixelated" works. preserveAspectRatio="none" looks not necessary here because height and width attributes are the same for this image. The ratio and real figure size are controlled by the transform matrix. In order versions of Matplotlib, however, the 'width' and 'height' are set to real values (usually not 1:1), so preserveAspectRatio="none" would be a good solution at that time. Somehow the base64 data is a bit different (maybe due to other updates to the Matplotlib master branch?)

<image height="2" id="image2ef7ee41b4" preserveAspectRatio="none" style="image-rendering:pixelated" transform="matrix(109 0 0 109 112.68 34)" width="2" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGklEQVR4nGN0YQz5z8DAwMDEwMDAsPPZBQYAHt4ECzzPS7MAAAAASUVORK5CYII="/>

I am concerned that we are applying this change both un-conditionally and to only one of the two branches that write out image elements to the svg. I can see the argument that in all cases, even if we are already re-sampling the image, that we don't want the viewer further re-sampling (which I assume it would do in RGB(A) space which in the case of false-color images leads to "wrong" colors showing up) but I am less sure about the aspect ratio.

This will definitely require some tests.

Yes, there may be many different cases...

The preserveAspectRatio="none": I did some tests... It's not necessary anymore. In older versions of Matplotlib, images are described in physical width and physical height. That requires preserveAspectRatio="none" otherwise the image would show in a ratio based on the pixels. Now Matplotlib describes images in SVG files by pixels and uses transform matrice to scale images. Problem aready solved.

# generate an SVG image with 4 pixels
import matplotlib.pylab as plt
a = [[0,0],[0,1]]
# interpolation='none' is the only way to avoid resampling images in saved SVG files.
# interpolation=None will produce a new image with much more pixels in SVG files.
plt.imshow(a,interpolation='none')

OK, but if I understand correctly, this change turns off antialiasing for svg viewers for full-resolution images as well, not just those with interpolation='none'? I think if something like this is to go in, it should not tell the viewer what to do in all cases, but just for this particular use of imshow.

# generate an SVG image with 4 pixels
import matplotlib.pylab as plt
a = [[0,0],[0,1]]
# interpolation='none' is the only way to avoid resampling images in saved SVG files.
# interpolation=None will produce a new image with much more pixels in SVG files.
plt.imshow(a,interpolation='none')

OK, but if I understand correctly, this change turns off antialiasing for svg viewers for full-resolution images as well, not just those with interpolation='none'? I think if something like this is to go in, it should not tell the viewer what to do in all cases, but just for this particular use of imshow.

I believe it affects interpolation='none' only, where the original image is used for output and a transform matrix is required for scaling up/positioning. For the other cases, the image is resized and interpolated before output, they go into the transform is None brach.

Reading the discussion and looking at the diff, my understanding is that this comes down to a single line, since the aspect ratio line is not needed now. The basic idea sounds reasonable, and my guess is that this should go in.

I think it needs a test, though, verifying that it works as intended for images with interpolation='none' and has no other effect. I don't know what form that test should take.

Looking at Firefox 75, it doesn't look like 'pixelated' is a valid setting, at least looking at the style editor when viewing an SVG directly. Using 'crisp-edges', 'optimizespeed', or '-moz-crisp-edges' works. I expect you would have to set this multiple times to hit both old and new names.

The idea looks fine, but I can't review this carefully (in particular browser compat) for now, so unassigning myself.

A full table of browser compatibility can be found here. It looks like Firefox and IE are different from the rest browsers.

I did some tests with Firefox 76, Chrome 81, and Inkscape 0.92 on Win7:

• optimizespeed or crisp-edges works for Firefox, doesn't work for Chrome or Inkscape. optimizespeed is deprecated according to the link above.
• pixelated works for Chrome and Inkscape, doesn't work for Firefox.

Setting the style to image-rendering:crisp-edges;image-rendering:pixelated works for Chrome, Firefox and Inkscape. I have updated the code.

Any reason this shouldn't go in for 3.3? I'll re-milestone, but feel free to undo...

Thanks a lot for this fix @cover-me !