SVG to STL Converter

A tool to create tactile maps for visually impaired people from a simple image. It runs entirely in your browser using javascript. As the name implies, it takes a scalable vector graphics (SVG) file as input, and produces an ASCII 3D printing (STL) file as output.

This tool is part of the tools created by the ACTIVmap project.

Demo

You can try the tool online.

There are example SVG files in example-svg/.

Pipeline explanation

The complete pipeline from SVG file to STL file is described in a separated file.

Screenshot

Options

• Specifying type height for each color (possibly negative)
• Rendering with and without a base plate
  • Round, Square and Rectangular base plates supported
  • Specifying base plate height (bypassing the size defined in the SVG)
• Optionally tune some parameters to bypass some limitations of the reconstruction algorithms

Known problems

• SVG mask are not supported. Unfortunally, Adobe Illustrator may produce SVG with such elements. If you are used to design using masks, please remove them from you files before importing it in SVG-to-STL (for example using Expand then Crop button from the Pathfinder panel).
• First implementation of the strokes (border of the shapes) is not perfect.
• SVG text elements are not supported. To render text, you need to convert the text to "outlines" or "paths" before saving the SVG file.
• Some configurations may produce non closed meshes (exemple-07.svg file). This problem is due to serveral bugs in Martinez, that will be corrected in a near future (I hope).

Requirements

This tool requires javascript support, and a browser that can handle a WebGL canvas, and the File API.

Version

0.8

Tools Used

svg-to-stl makes use of a number of other open source projects:

• three.js - For WebGL rendering of a 3D scene
• d3-threeD - For converting SVG paths into three.js geometries
• martinez - For clipping shapes preserving only visible parts
• Clipper.js - For stroke drawing
• rbush - For efficient intersections and proximity detections
• flatten.js - For applying all heirarchical transforms in an SVG to its paths
• ThreeCSG - For Constructive Solid Geometry support
• STLExporter - For converting a three.js geometry into an ASCII STL file
• Bootstrap - For User Interface
• bootstrap-colorpicker - For color selection
• bootstrap-dark - A dark theme
• Entypo - Example SVG files to play with
• jQuery