svg-to-gcode

Overview

The svg-to-gcode project is an open-source JavaScript module we built to bridge the gap between vector graphics (SVG) and CNC plotters like the PolyPlot machine. Instead of manually converting designs into machine-readable instructions, this module lets web applications transform SVG paths directly into G-code, ready to be sent to the plotter.

Because it’s written as an npm module, it can be seamlessly imported into modern web projects, making it easy to integrate G-code generation into interactive interfaces and custom plotting applications.

Why we built it

When creating the PolyPlot machine interface, we needed a way to go from SVG drawings (shapes, paths, designs) to the precise movement commands a CNC machine understands. Existing libraries were either too complex, outdated, or tied to desktop applications.

So, svg-to-gcode was designed as:

• Lightweight – only does what’s needed: SVG → G-code.
• Browser-friendly – works inside web applications without extra tools.
• Configurable – lets you tune machine-specific parameters.

How it works

At its core, the library reads SVG path data, calculates movement points, and converts them into G-code instructions.

A simple example of usage inside a web application:

import { Converter } from 'svg-to-gcode';

const svgElement = document.querySelector("svg");

const settings = {
    zOffset : 3, 
    feedRate : 3000, 
    seekRate : 2000, 
    zValue: -15,
    tolerance: 0.4,
    minimumArea: 2.5,
    pathPlanning: 'minimumTravel',
    quadrant: 1,
    xOffset: 10,
    yOffset: 10,
    bedSize: { width: 420, height: 297 }
};

// For using the default configuration , skip the settings
const converter = new Converter(settings)

// You can download the generated gCode using this code
converter.convert(svgElement).then((gcode) => {
    const file = new Blob([gcode], { type: 'text/plain' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(file);
    link.download = 'out.gcode';
    link.click();
    URL.revokeObjectURL(link.href);
})

This generates a ready-to-use G-code string from your SVG.

Configuration Options

The module is flexible thanks to its configuration object. Here’s a beginner-friendly explanation of each option:

• zOffset – How high the tool should move up after finishing a cut/draw path (safe travel height).
• feedRate – The drawing/cutting speed (mm/min) when the tool is engaged.
• seekRate – The travel speed (mm/min) when moving between paths without drawing.
• zValue – The depth value when the tool goes down for drawing or cutting.
• tolerance – Controls curve smoothness; lower values = more detail, higher values = faster and simpler paths.
• minimumArea – Ignores tiny paths smaller than this area (useful to skip dust or noise in SVG files).
• pathPlanning – Strategy for ordering paths; e.g. "minimumTravel" reduces wasted movement.
• quadrant – Defines which part of the bed coordinates are used (1 = top right, etc.).
• xOffset / yOffset – Shifts the drawing’s starting point on the machine bed.
• bedSize – The machine’s working area (width and height in mm).

Where it’s used

The first use case of svg-to-gcode was inside the PolyPlot machine interface, where users draw or upload designs directly in a browser, then immediately generate and send G-code to the machine.

Since it’s an npm package, it’s not limited to FabLab or PolyPlot — anyone building CNC, laser, or plotter applications can use it as a drop-in tool for SVG-based workflows.

Closing note

This project is a small but important part of making CNC tools more accessible, open, and web-based. By sharing it as an open-source npm library, we hope others can adapt it, improve it, or even build entirely new creative interfaces on top of it.