Maker.js, a Microsoft Garage project, is a JavaScript library for creating and sharing modular line drawings for CNC and laser cutters.

View project on GitHub Star

Importing

SVG path data

SVG Path data is the value of the d attribute of a path element. For example, given this SVG:

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M 0 100 L 100 100 L 100 0 L 0 0 L 0 100 Z" />
</svg>

The path data is:

M 0 100 L 100 100 L 100 0 L 0 0 L 0 100 Z

Call makerjs.importer.fromSVGPathData(pathData) passing your path data string. This will return a new model.

If your SVG path data contains Curve commands, these will become Bezier curves in your model.

Advanced options

You may override the default import behavior by calling makerjs.importer.fromSVGPathData(pathData, options) and passing an options object. The options object has these properties:

property type values / effects
bezierAccuracy number The maximum distance between the true curve and the arc approximations. A lower number is more accurate but requires more computation. Using zero is not recommended as it may never finish computing. This number is relative to the unit system of your SVG; so if you are rendering pixels, then 0.5 is accurate to half a pixel.

Example:

var makerjs = require('makerjs');

var pathData = "M 95 35 L 59 35 L 48 0 L 36 35 L 0 35 L 29 56 L 18 90 L 48 69 L 77 90 L 66 56 Z";

var model = makerjs.importer.fromSVGPathData(pathData);

SVG points

You may wish to import the points from an SVG Polyline or Polygon element. It is important to note the difference of coordinates between SVG and Maker.js points: The Y component is opposite. The remedy for this is simple - use the Y-axis mirror functions of makerjs.point.mirror on every point, or call makerjs.model.mirror on your entire model.

SVG points can be extracted from the value of the points attribute of either polyline or polygon elements:

<svg>
  <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
</svg>
<svg>
  <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
</svg>

Either of these SVG elements map nicely to the makerjs.models.ConnectTheDots model. ConnectTheDots accepts an isClosed parameter - set this to false for SVG polylines and true for SVG polygons.

Example:

var makerjs = require('makerjs');

var points = "50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180";

var closed = true; //true for SVG polygon, false for SVG polyline

var model = makerjs.model.mirror(new makerjs.models.ConnectTheDots(closed, svgData), false, true);