Introduction: 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.
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: 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
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
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
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.