Introduction: Creating a Vector Graphics File From Data

Picture of Creating a Vector Graphics File From Data

This Instructable describes how to generate a vector image (in SVG format) from a set of data, which could then be imported into a vector graphics editor like Inkscape or Adobe Illustrator, or used with a laser cut or CNC. Automatic generation of a vector file is useful whenever you have a set of numbers that describe an image, like a graph of a large dataset, the cross sections of a model, or a math generated image. Or if you have a pattern for a design that you want to quickly change dimensions or scale. The Insctuctable will describe the way the SVG file works, how to create lines from sets of coordinates, and will provide a sample Excel script that will generate lines from a series of points.

Step 1: the SVG Format

Picture of  the SVG Format

The SVG file can be edited by hand by any text editor, like Notepad. The important features are shown above. Most important are the Header, in red, and the list of path commands, one of which is shown in blue. The numbers in green will set the document size in points. At 72 points for inch, the size shown below will give you 18x24 inches. The End Tag in purple closes the '

Step 2: The Header

Picture of The Header

The simplest way to create the header is to save a file in SVG format from the vector program you use, and then to copy this text into your other SVG files. One thing to watch for is the document size. With Illustrator, if you open an SVG file, it will default to the Artboard size of the last document you worked with. To make life easy, I suggest opening a new document of the desired Artboard size (24x18” in my example), and set the document size in SVG to match (multiply by 72 to get the correct number of points, 1728 x 1296 in my example), otherwise there could be a mismatch between the SVG units and AI’s units.

Step 3: Path Commands

Picture of Path Commands

There are many different path commands to create curves, shapes, points, and lines. The line command is one of the most simple, and only needs a start point (x1, y1), an end point (x2, y2), and stroke width. The stroke width sets the line thickness. I use .0005 (5.0e-004) because this value works well with my laser cutter. A great resource for SVG commands can be found here:


Step 4: Sample Program

Picture of Sample Program

Attached is a sample program that will accept a list of points and will create an SVG file that will draw lines between each consecutive point, once the button is pushed. If you want to start a new line, leave a blank row between points. You can set the input file, change the Header, or set the stroke width. You will need to enable macros: File => Options => Trust Center => Trust Center Settings => turn on ‘disable all macros with notification'. This will give you a prompt when opening the file, allowing you to enable this content.

Check out the sample work sheet, which has the equation for a rose. Play around with values for a to change the scale, k to change the number of leaves, and dt to change the resolution.


amberrayh (author)2015-08-13

This is cool. Thanks for sharing!

About This Instructable




Bio: Michael Koehle is the CNC shop assistant. His background is in engineering and in art. He combines these to make work using drawing, painting, CNC ... More »
More by mkoehle:Paper TyhpoonHow to CNC a Photograph in Full Color (Relief in CMY)Relief in Shadow
Add instructable to: