svg-to-gcode

The svg-to-gcode is an open-source JavaScript module we built to make SVG drawings directly usable on CNC plotters. It takes vector paths and converts them into G-code, the language machines understand — right inside the browser.

The idea first came up while developing Zundlet, and later during PolyPlot. Both tools worked with SVG on the frontend, but the machines needed G-code. Existing tools were either tied to desktop environments, too heavy for browser use, or overly complex for what we needed. We wanted something lightweight, browser-friendly, and configurable. So we built svg-to-gcode.

It started as a solution for PolyPlot, but once it worked, it became clear: this could help anyone building web-based CNC tools. So we packaged it as a small, reusable npm module.

How it works

At its core, svg-to-gcode takes the language of drawings and turns it into the language of machines. An SVG might look simple — a circle, a line, or a smooth curve — but underneath, it’s all just mathematical descriptions of shapes.

The first thing the parser does is translate everything into paths, which are the backbone of vector graphics. Paths describe movement: “start here, go there, bend this way.” No matter what the original shape was, it becomes a path so that the rest of the process can treat everything in the same way.

Curves are where things get interesting. Plotters can’t follow a mathematical curve directly, so those smooth arcs are broken down into many tiny straight lines. To a machine, it’s just a sequence of short moves; to the human eye, it still looks like one continuous sweep. This trick is what allows a pen plotter to gracefully draw even the most complex Bézier curves without ever needing to “understand” curves at all.

Once the paths are ready, they’re mapped into G-code instructions — the step-by-step moves the plotter can follow. Each command tells the machine exactly where to go, when to lift or lower the pen, and how to trace the drawing across the page.

The magic lies in this transformation: what begins as abstract geometry on a screen is gradually reshaped into precise, mechanical motions. By the time the plotter moves, the SVG has already been decomposed, simplified, and reimagined as something the hardware can physically perform.

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

Origins and credits

svg-to-gcode was born out of necessity and a bit of inspiration. While experimenting with CNC plotters during the development of Zundlet, and later PolyPlot, we realized there wasn’t a lightweight, browser-only library that could take an SVG and directly generate G-code. Most existing tools required heavy backends, desktop installations, or complicated workflows — not ideal for our vision of a fully web-based plotting interface.

The project started as a friendly modification of an existing open-source repository called “exportSVGtoGCODE” by o0morgan0o, which was originally a Node CLI tool. We wanted to adapt it for browser use, make it configurable, and integrate it seamlessly with frontend applications.

What began as a small adjustment for our own needs quickly grew into a standalone npm module. Today, svg-to-gcode is not just a tool for PolyPlot — it’s a flexible, reusable library for anyone building web-based CNC or plotter workflows.