---
title: SVG
---

<h4>Simple export</h4>

<p>
    Call <code><a href="/docs/api/modules/makerjs.exporter.html#tosvg">makerjs.exporter.toSVG</a>(model)</code> passing your model. This function returns a string of SVG.
</p>

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

<h4>Captions</h4>

<p>
    <a href="/docs/intermediate-drawing/#Captions">Captions</a> are added to an SVG group with a layer name of "captions".
    This layer name may be used to apply <code>layerOptions</code> that are common to all captions.
    In addition, a caption will inherit the <code>layerOptions</code> that are applied to its model's layer name unless overridden by the anchor layer.
</p>

<h4>Advanced options</h4>

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

<p>
    In Path-only mode, the SVG structure will have only one SVG <code>&lt;path&gt;</code> element per layer. (If you do not specify layers then you have one "null" layer).
    This SVG <code>&lt;path&gt;</code> 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.
</p>

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

<p>
    You may override the default export behavior by calling <code><a href="/docs/api/modules/makerjs.exporter.html#tosvg">makerjs.exporter.toSVG</a>(model, options)</code> and passing an options object.
    The options object has these properties:

    <table>
        <tr>
            <th>property</th>
            <th>values / effects</th>
            <th>mode avalability</th>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#usesvgpathonly">useSvgPathOnly</a></td>
            <td>
                <ul>
                    <li>true (default) - Path-only mode</li>
                    <li>false - Separate mode</li>
                </ul>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#accuracy">accuracy</a></td>
            <td>
                number - Exemplar number of decimal digits (default: .001)
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#annotate">annotate</a></td>
            <td>
                <ul>
                    <li>true - Adds SVG <code>&lt;text&gt;</code> elements with the path id</li>
                    <li>false (default)</li>
                </ul>
            </td>
            <td>Separate</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#className">className</a></td>
            <td>
                string - Class name
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#cssstyle">cssStyle</a></td>
            <td>
                string - CSS style
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#fill">fill</a></td>
            <td>
                string - CSS color (default: none)
            </td>
            <td>Path-only</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#fillrule">fillRule</a></td>
            <td>
                string - <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule">SVG fill-rule</a> (default: "evenodd")
                <ul>
                    <li>"evenodd" - Uses the <a href="https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd rule</a></li>
                    <li>"nonzero" - Uses the <a href="https://en.wikipedia.org/wiki/Nonzero-rule">non-zero rule</a> (requires more computation)</li>
                </ul>
            </td>
            <td>Path-only</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#fontsize">fontSize</a></td>
            <td>
                string - CSS font size + units (default: 9pt). For annotations and captions.
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#layeroptions">layerOptions</a></td>
            <td>
                object map - keys are the layer names, values are an object with these properties:
                <table>
                    <tr>
                        <th>property</th>
                        <th>values</th>
                    </tr>
                    <tr>
                        <td><a href="/docs/api/interfaces/makerjs.exporter.isvgelementrenderoptions.html#className">className</a></td>
                        <td>
                            string - Class name
                        </td>
                    </tr>
                    <tr>
                        <td><a href="/docs/api/interfaces/makerjs.exporter.isvgelementrenderoptions.html#cssstyle">cssStyle</a></td>
                        <td>
                            string - CSS style
                        </td>
                    </tr>
                    <tr>
                        <td><a href="/docs/api/interfaces/makerjs.exporter.isvgelementrenderoptions.html#fill">fill</a></td>
                        <td>
                            string - CSS color (default: none)
                        </td>
                    </tr>
                    <tr>
                        <td><a href="/docs/api/interfaces/makerjs.exporter.isvgelementrenderoptions.html#stroke">stroke</a></td>
                        <td>
                            string - CSS color (default: black)
                        </td>
                    </tr>
                    <tr>
                        <td><a href="/docs/api/interfaces/makerjs.exporter.isvgelementrenderoptions.html#strokewidth">strokeWidth</a></td>
                        <td>
                            string - SVG width + units (default: 0.25mm)
                        </td>
                    </tr>
                </table>
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#origin">origin</a></td>
            <td>
                point - offset your drawing in the SVG coordinate space (default: null)
            </td>
            <td>Separate</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#scale">scale</a></td>
            <td>
                number - scale your drawing (default: 1)
            </td>
            <td>Separate</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#stroke">stroke</a></td>
            <td>
                string - CSS color (default: black)
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#strokewidth">strokeWidth</a></td>
            <td>
                string - SVG width + units (default: 0.25mm)
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#svgattrs">svgAttrs</a></td>
            <td>
                object map - attributes to add to the root svg tag
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#units">units</a></td>
            <td>
                <a href="/docs/api/index.html#unittype">Maker.js unit type</a> (default - extracted from drawing. If unit system is not in drawing or not passed, it will use SVG default of pixels)
            </td>
            <td>Both</td>
        </tr>
        <tr>
            <td><a href="/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html#viewbox">viewbox</a></td>
            <td>
                <ul>
                    <li>true (default) - use SVG viewbox, stretch drawing to fill the SVG element.</li>
                    <li>false - do not stretch drawing</li>
                </ul>
            </td>
            <td>Both</td>
        </tr>
    </table>
</p>