Importing

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:

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

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, points), false, true);