SVG Output in Gnuplot: Vector Figures for the Web

For figures on the web, SVG is gnuplot’s best format: the svg terminal writes a true vector file that stays sharp at any display size, keeps its text as text, and is typically far smaller than an equivalent high-resolution PNG. One terminal line is all it takes.

set terminal svg size 800,600 enhanced font "Sans,12"
set output "traffic.svg"
set title "Weekly Traffic"
set xlabel "Day"
set ylabel "Visits"
set grid
plot "traffic.dat" using 1:2 with linespoints linewidth 2 pointtype 7 title "Visits"
set output

The syntax mirrors pngcairo: size is the canvas in pixels (for SVG these are nominal units that define the viewBox and the proportions, not a fixed resolution), the font clause names family and size, and enhanced enables superscripts and subscripts in labels. Because the output is vector, the same file serves a phone, a desktop and a retina display without re-exporting.

Embedding the SVG in a page

<img src="traffic.svg" alt="Line chart of weekly visits">

<!-- or, to let the SVG inherit page CSS and links: -->
<object type="image/svg+xml" data="traffic.svg" width="800" height="600"></object>

The <img> route is the simple, robust default: the browser treats the SVG as an image, and you should give it a meaningful alt text, as with any figure. Embedding via <object> (or inlining the SVG markup into the HTML) additionally lets the page’s CSS reach into the figure. One honest caveat about fonts: an SVG references font families by name, and the rendering machine substitutes its own version of “Sans” or “Arial” — so an SVG can look slightly different across systems in a way a PNG never does. If pixel-exact appearance matters more than scalability, that is the one case for pngcairo.

The svg terminal also has a dynamic option that emits JavaScript-enhanced SVG with mouse-driven zooming and coordinate readout in the browser; it is a nice extra for exploratory dashboards, but the plain static SVG above is what you want for articles and documentation.

Common mistakes

• Figure looks huge or tiny on the page: the browser used the SVG’s nominal 800×600 size. Control the display size with CSS or the width/height attributes on the embedding tag — the vector content scales without loss.
• Text renders in an unexpected font: the viewing system lacks the named family and substituted another. Stick to widely available families (Sans, Arial, Helvetica, DejaVu Sans) for web SVGs, and accept the substitution as part of the format.
• File much larger than expected: a plot with hundreds of thousands of points becomes hundreds of thousands of vector nodes. Thin dense data before plotting for the web, just as you would for tikz output.

Related tutorials: PNG vs PDF in Gnuplot, Your First Gnuplot Plot. See also the full Gnuplot Tutorials index.