CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
Avatar for Software 22.04.

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

| Download
Views: 73
Image: ubuntu2204-dev
Kernel: Python 3 (system-wide)

SVG or PNG plots in CoCalc Notebooks

Typeproscons
SVGhigher resolutionsize and rendering time proportional to number of elements
PNGscreen resolution, could be 2x oversampled for high res monitorsconstant 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.

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.

plt.plot(xx, yy)
[<matplotlib.lines.Line2D at 0x7f20febf2bf0>]
Image in a Jupyter notebook

... 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.

%config InlineBackend.figure_formats = 'png'

plt.plot(xx, yy)
[<matplotlib.lines.Line2D at 0x7f20fe950d60>]
Image in a Jupyter notebook

SVG

Configure the backend for drawing inline plots to use SVG

The plot below has a size of only 27kB.

%config InlineBackend.figure_formats = 'svg'

plt.plot(xx, yy)
[<matplotlib.lines.Line2D at 0x7f20fea84820>]
Image in a Jupyter notebook

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!

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

%config InlineBackend.figure_formats = 'png'

This PNG plot has about 110kB.

plt.plot(uu, vv, color='black', marker='.', linestyle="none", alpha=0.1)
[<matplotlib.lines.Line2D at 0x7f20feb1e650>]
Image in a Jupyter notebook
%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.

plt.plot(uu, vv, color='black', marker='.', linestyle="none", alpha=0.1)
[<matplotlib.lines.Line2D at 0x7f20fc808b80>]
Image in a Jupyter notebook

Summary:

If your plots are of low complexity with only a moderate number of elements, there are benefits to redering as SVG (or PDF). They can be blown up in size without pixelation, used in vector graphic drawing tools like Inkscape, etc.

Across all possible situations though, a high resolution PNG will give you a good looking image with a predictable performance. You loose the ability to scale it up arbitrarily, though. What you can do is changing the size of the plotted image.

Other backends?

Most of them are for desktop computers, which do not apply here on CoCalc – an online web-appliction.

%matplotlib --list
Available matplotlib backends: ['tk', 'gtk', 'gtk3', 'gtk4', 'wx', 'qt4', 'qt5', 'qt6', 'qt', 'osx', 'nbagg', 'notebook', 'agg', 'svg', 'pdf', 'ps', 'inline', 'ipympl', 'widget']

Still, let's try PDF. This will not show up, but create a link. You might want to use that variant, if you include a plot in a larger PDF document, e.g. LaTeX

%config InlineBackend.figure_formats = 'pdf'

plt.plot(xx, yy)
[<matplotlib.lines.Line2D at 0x7f20fc867fd0>]
Invalid PDF output

Bonus: changing figure size

%config InlineBackend.figure_formats = 'retina'

plt.rcParams['figure.figsize'] = 3, 3 # 3x3 inches, but it's not really inches on screen (depends on your screen resolution)

plt.plot(xx, yy)
[<matplotlib.lines.Line2D at 0x7f20f821f6a0>]
Image in a Jupyter notebook

and you can also adjust the resolution (dpi)

plt.rcParams['figure.dpi'] = 16

plt.plot(xx, yy)
[<matplotlib.lines.Line2D at 0x7f20f8252a10>]
Image in a Jupyter notebook
plt.rcParams['figure.dpi'] = 256

plt.plot(xx, yy)
[<matplotlib.lines.Line2D at 0x7f20f80cd120>]
Image in a Jupyter notebook