How to Export SVG from p5.js for Pen Plotting

p5.js is one of the best ways to make generative art, but there’s a catch for plotter artists: by default it renders pixels, and plotters need vectors. The fix is straightforward once you know it. Here’s how to get a clean p5.js SVG export ready for the pen.

Why the default canvas won’t work

A standard p5.js sketch draws to a pixel canvas. Save it and you get a PNG — a grid of colored dots with no concept of “lines.” A plotter has nothing to follow in a PNG. You need to preserve your strokes as paths, which means exporting SVG.

Step 1: Add the p5.svg library

The p5.svg library adds an SVG renderer to p5.js. Include it alongside p5.js in your HTML, or add it in the p5.js Web Editor via your index.html:

<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.js-svg@1"></script>

Step 2: Create an SVG canvas

Tell p5 to use the SVG renderer in setup():

function setup() {
  createCanvas(800, 600, SVG);
}

Now everything you draw is recorded as vector paths instead of pixels.

Step 3: Draw with strokes, not fills

This is the most important habit for plottable output:

function setup() {
  createCanvas(800, 600, SVG);
  noFill();          // critical — fills don't plot
  stroke(0);
  noLoop();
}

function draw() {
  for (let i = 0; i < 200; i++) {
    // your generative strokes here
    line(random(width), random(height), random(width), random(height));
  }
}

noFill() keeps your output to clean outlines a pen can draw. Filled shapes export as complex closed paths that plot poorly.

Step 4: Save the SVG

Add a save trigger — for example, on a key press:

function keyPressed() {
  if (key === 's') save('plot.svg');
}

Press s and p5.svg writes a true vector SVG to your downloads.

Step 5: Optimize before plotting

p5.js exports paths in draw order, which is rarely efficient. Run the file through vpype:

vpype read plot.svg linemerge reorder write final.svg

This merges connected lines and reorders strokes, cutting plot time and pen lifts.

Step 6: Plot it

Send final.svg to your plotter via Inkscape or your usual sender. Because p5.js gives you precise control over every stroke, the output is exactly what you designed — no tracing, no guessing.

Where to learn more

Once you can export reliably, the limit is your sketches. The Nature of Code (written for Processing/p5.js) teaches the vectors, forces, and noise that power the best generative plots — and everything in it can be exported to SVG with the steps above.

Frequently asked questions

Can p5.js export SVG?

Not on its own — p5.js renders to a pixel canvas by default. To export vectors you add the p5.svg library, which lets you create an SVG canvas and save the drawing as a true vector file a plotter can use.

Why do I need SVG instead of PNG from p5.js?

Plotters draw strokes along vector paths. A PNG is pixels with no path information, so the plotter has nothing to follow. SVG preserves your lines as paths, which is exactly what the machine draws.

My p5.js SVG plots messily — why?

Filled shapes and overlapping strokes export as complex paths. Use stroke-based drawing (no fills), and run the exported SVG through vpype to merge lines and reorder strokes before plotting.