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

Exporting

SVG

Simple export

Call makerjs.exporter.toSVG(model) passing your model. This function returns a string of SVG.

If your drawing has layers with names that match the following reserved color names, paths on that layer will have a stroke color automatically:
aqua, black, blue, fuchsia, green, gray, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

Captions

Captions are added to an SVG group with a layer name of "captions". This layer name may be used to apply layerOptions that are common to all captions. In addition, a caption will inherit the layerOptions that are applied to its model's layer name unless overridden by the anchor layer.

Advanced options

There are two main modes of SVG export: Path-only mode and Separate mode. Path-only mode is the default.

In Path-only mode, the SVG structure will have only one SVG <path> element per layer. (If you do not specify layers then you have one "null" layer). This SVG <path> element will contain all of your model's path data. If your drawing contained any closed geometries from endless chains, you will be able to use SVG fill on these shapes.

In Separate mode, every model in your heirarchy is exported as an SVG <g> element containing that model's paths, each exported as an individual SVG element. Lines will export as an SVG <line> element, circles will export as an SVG <circle> element, and arcs will export as an SVG <path> element. Child models will become nested <g> elements. You will not be able to use SVG fill in any satisfactory way.

You may override the default export behavior by calling makerjs.exporter.toSVG(model, options) and passing an options object. The options object has these properties:

property values / effects mode avalability
useSvgPathOnly
  • true (default) - Path-only mode
  • false - Separate mode
accuracy number - Exemplar number of decimal digits (default: .001) Both
annotate
  • true - Adds SVG <text> elements with the path id
  • false (default)
 Separate
className string - Class name Both
cssStyle string - CSS style Both
fill string - CSS color (default: none) Path-only
fillRule string - SVG fill-rule (default: "evenodd") Path-only
fontSize string - CSS font size + units (default: 9pt). For annotations and captions. Both
layerOptions object map - keys are the layer names, values are an object with these properties:
property values
className string - Class name
cssStyle string - CSS style
fill string - CSS color (default: none)
stroke string - CSS color (default: black)
strokeWidth string - SVG width + units (default: 0.25mm)
Both
origin point - offset your drawing in the SVG coordinate space (default: null) Separate
scale number - scale your drawing (default: 1) Separate
stroke string - CSS color (default: black) Both
strokeWidth string - SVG width + units (default: 0.25mm) Both
svgAttrs object map - attributes to add to the root svg tag Both
units Maker.js unit type (default - extracted from drawing. If unit system is not in drawing or not passed, it will use SVG default of pixels) Both
viewbox
  • true (default) - use SVG viewbox, stretch drawing to fill the SVG element.
  • false - do not stretch drawing
 Both

edit on GitHub

DXF

Simple export

Call makerjs.exporter.toDXF(model) passing your model. This function returns a string of DXF.

If your drawing has layers with names that match the following reserved color names, paths on that layer will have a stroke color automatically:
aqua, black, blue, fuchsia, green, gray, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

Captions

A caption will inherit the layerOptions that are applied to its model's layer name unless overridden by the anchor layer.

Advanced options

You may override the default export behavior by calling makerjs.exporter.toDXF(model, options) and passing an options object. The options object has these properties:

property values / effects
units Maker.js unit type - unit system (default: extracted from drawing. If unit system is not in drawing or not passed, it will use DXF default of inches)
fontSize number - font size of captions (default: 9). The font size is in the same unit system as the units property.
layerOptions object map - keys are the layer names, values are an object with these properties:
property values
color number - Maker.js color
fontSize number - font size of captions. The font size is in the same unit system as the units property.

edit on GitHub

OpenJScad

Simple export

Call makerjs.exporter.toOpenJsCad(model) passing your model. This function returns a string of JavaScript code executable within an OpenJsCad environment.

Advanced options

Call makerjs.exporter.toOpenJsCad(model, options) passing your model and an options object.

See the API documentation for OpenJsCad export options

edit on GitHub