SVG or PNG plots in CoCalc Notebooks

Type	pros	cons
SVG	higher resolution	size and rendering time proportional to number of elements
PNG	screen resolution, could be 2x oversampled for high res monitors	constant size, proportional to number of pixels and overall complexity, constant rendering time

NOTE: This is for the Python 3 kernel. It does not work for the SageMath kernels. See 35972.

In [2]:

import matplotlib.pyplot as plt
import numpy as np
xx = np.linspace(-3, 10, 1000)
yy = np.sin(xx**2)

Default: PNG plots with 2x oversampling ("retina")

This is configured by default on CoCalc via

%config InlineBackend.figure_formats = 'retina'

This plot has a size of about 142kB and works well on modern high resolution screens.

In [3]:

plt.plot(xx, yy)

[<matplotlib.lines.Line2D at 0x7f20febf2bf0>]

... or as just a simpler PNG without oversampling, with a size of just about 60kB. If you have a high resolution screen, you'll notice fuzziness around sharp edges and characters.

In [4]:

%config InlineBackend.figure_formats = 'png'

In [5]:

plt.plot(xx, yy)

[<matplotlib.lines.Line2D at 0x7f20fe950d60>]

SVG

Configure the backend for drawing inline plots to use SVG

The plot below has a size of only 27kB.

In [6]:

%config InlineBackend.figure_formats = 'svg'

In [7]:

plt.plot(xx, yy)

[<matplotlib.lines.Line2D at 0x7f20fea84820>]

10.000 points?

Here, SVG grows larger than PNG.

Warning If you up this to 100.000 and plot SVG, your browser might eat up a lot of your computers resources, since it has to draw so much!

In [8]:

uu = np.random.randn(10_000)
vv = np.random.randn(10_000)

In [9]:

%config InlineBackend.figure_formats = 'png'

This PNG plot has about 110kB.

In [10]:

plt.plot(uu, vv, color='black', marker='.', linestyle="none", alpha=0.1)

[<matplotlib.lines.Line2D at 0x7f20feb1e650>]

In [11]:

%config InlineBackend.figure_formats = 'svg'

While this SVG is more than 1MB (compressed it is less, though), and it takes a bit to even render it in your browser. With more elements to draw, the local performance of showing this SVG will suffer even more, while the performance of rendering a PNG is essentially constant.

In [12]:

plt.plot(uu, vv, color='black', marker='.', linestyle="none", alpha=0.1)

[<matplotlib.lines.Line2D at 0x7f20fc808b80>]