[IPython-dev] SVG backend rescales chart differently than PNG backend?

Patrick Surry patrick.surry at gmail.com
Thu Nov 5 09:51:07 EST 2015

I've been using matplotlib fig.figimage(...) to insert a PNG image into a
chart.  But no matter what I did, the image was blurred as if it had been
rescaled to an odd size.  When I tried plt.savefig(...) the image in the
chart looked crisp.  There's an example and screenshot at the bottom,
compare the bug's legs.

I discovered the different default dpi setting, but that didn't help.
Turns out that I was using the SVG backend, which renders the chart  seems
to render the chart as a bitmapped SVG image, but then displays it in the
notebook with 'pt' instead of 'px' dimensions, which causes it to display
slightly bigger and blurry.

I'm using IPython 3.1.0 on OS X.    Here's an example using the stinkbug
image found at http://matplotlib.org/users/image_tutorial.html.

With both the PNG or SVG backend, the rendered chart saved with savefig is
342x256px, but with the SVG backend, the div displaying the output in the
notebook is sized in pt, not px, which causes it to rescale the previously
rendered image at a slightly bigger size.

Is there a way to fix that?

If you edit the HTML and change "width: 342pt; height: 255pt" to "width:
342px; height: 255px" then the rendered chart looks crisp again.  (The
dimensions in the SVG element don't seem to matter because of the 100%
style declaration.)

<div class="output_subarea output_svg">
 <div style="width: 342pt; height: 255pt;"><svg height="255pt"
version="1.1" viewBox="0 0 342 255" width="342pt" xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="width: 100%; height: 100%;">

%matplotlib inline
%config InlineBackend.rc = {'savefig.dpi': 100}
import matplotlib.pyplot as plt
import matplotlib.image as mpimg


# with png backend, the rendered chart in the notebook and the saved image
are exactly the same

%config InlineBackend.figure_formats = set(['png'])
plt.savefig('pngfig.png', bbox_inches='tight')

# with svg backend, the rendered chart is larger than the saved image,
which is exactly the same size as the prior pngfig.

%config InlineBackend.figure_formats = set(['svg'])
plt.savefig('svgfig.png', bbox_inches='tight')

[image: Inline image 1]
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20151105/496c5ddf/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 183954 bytes
Desc: not available
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20151105/496c5ddf/attachment.png>

More information about the IPython-dev mailing list