about

The parametric SVG editor is an online tool for construction drawings. You can create parametric SVG drawings for parts and combine existing parts into new designs. You can use the design patterns of others and contribute your own (part) designs to a template library. The parametric SVG editor was created in 2011 by Harmen G. Zijp. All code is available at git.giplt.nl under the Simple Public License. Feedback and code contributions are highly appreciated at svg [at] giplt [dot] nl.

click below to jump to help on a topic:
introduction
index
project settings
parameters
svg code
special attributes: 'joint' and 'mill'
the transform value
image

introduction

Scalable Vector Graphics (SVG) are text documents that describe how to make a drawing out of basic elements like lines, circles, rectangles etc. The document is structured in eXtendable Markup Language (XML), which defines how the elements should be written down. For example, a line from (0,0) to (2,3) should be written as
<line x1="0" y1="0" x2="2" y2="3" />
Because all coordinates are relative to each other the entire drawing can be easily manipulated, scaled, twisted etc.
The parametric SVG editor lets you write SVG code and see the resulting graph, and adds the possibility of using parameters and mathematical functions. For example, in stead of x1="0" you can define a parameter 'a' and use x1="{0.5*sin(a)}". This can be useful when your design needs to be constructed on various scales, out of different materials etc.
When you are satisfied with your design and the chosen values for the parameters you can export the design, and have all the parametric values evaluated to actual numbers.
Below you will find help on the different frames on the screen, explaning how to use the program.

index

This list is your main navigation tool. You can choose to change general project settings or parameters, or to edit the actual SVG code (lines, rectangles etc). The code can be grouped in several objects which have their own code section and can be positioned independently (through translate, rotate or scale operations) in the overall design. The index frame shows all the objects in your design. You can nest objects inside each other, and change their layer arrangement by clicking the up/down buttons. Top in the list is the front layer.

project settings

Here you can enter a name and description for the project. The document size is used to determine the size of the image viewbox. This value is also used when you export the design as a concrete (non-parametric) SVG file with actual measures for a computerized construction machine, e.g. a laser cutter, cnc-mill etc. You can use the following units for document size:

mm	Millimeters
cm	Centimeters
in	Inches
px	Pixels

The following functions are available in this screen:

new	start a new design
load	load an existing parametric design form file or from the online templae library
save	save your design as a parametric file

parameters

Here you can enter parameters, which will are available throughout all code in all objects. It is also possible to use various mathematical functions. Examples:


pi=3.14159265

r=5

theta=pi/2

You can now replace the numbers in the SVG code by variables or functions, placed within curly brackets. For example:
<line x1="0" y1="0" x2="{r*sin(theta)}" y2="{-r*cos(theta)}" />

svg code

Edit the SVG code for the currently selected object, using the following elements:

element	example code
rectangle	`<rect x="10" y="10" height="100" width="100"/>`
circle	`<circle cx="50" cy="50" r="25"/>`
ellipse	`<ellipse cx="50" cy="50" rx="20" ry="30"/>`
line	`<line x1="10" y1="10" x2="70" y2="30"/>`
polyline	`<polyline points="0,0 30,0 15,30"/>`
polygon	`<polygon points="0,0 50,0 25,50"/>`
path	`<path d="M50,50 100,50 75,75 Z"/>`

More information can be found in these SVG tutorials:
w3schools, jenkov.com, apike.ca

The following functions are available in this screen:

rename rename the current object

remove remove the current object (and all subgroups)

insert add an empty object into the current object

load load an existing object into the current object

rename	rename the current object
remove	remove the current object (and all subgroups)
insert	add an empty object into the current object
load	load an existing object into the current object

special attributes

Two optional attributes have been added to facilitate construction design: 'mill', and 'joint'.

mill

The attribute 'mill' works in conjunction with the elements 'rect', 'circle', 'ellipse', 'line', 'polyline' and 'polygon'. It converts the element into a toolpath for a cnc mill. The value given is the diameter of the mill, the sign of the value determines which side of the element will be traced.

joint

The attribute 'joint' is available only for the line element. It constructs a fingerjoint path from the points (x1,y1) to (x2,y2) with the following joint parameters:

Material thickness. The sign of this value makes the fingers point inward or outward.
Minimum finger width.
Extra spacing at the beginning of the joint.
Extra spacing at the end of the joint.

The attributes 'joint' and 'mill' can be used together. Example:
<line x1="100" y1="100" x2="300" y2="100" joint="10 30 0 0" mill="-10" style="fill:none;stroke:black;" />

transform

This string determines how the selected object is drawn. Several operations are available

operation example code

translate translate(20, 30)

rotate rotate(15)

scale scale(-1,0)

Several transformations may be combined, and parameters may be used. For example:
'translate(20, 30) rotate({angle})'

operation	example code
translate	`translate(20, 30)`
rotate	`rotate(15)`
scale	`scale(-1,0)`

image

This window shows the resulting drawing. When editing code or parameters the program will automatically refresh the drawing when you leave the edited field. You can move separate objects by clicking and dragging. When 'root element' is selected, the whole drawing is moved. You can also zoom in or out, using the '+' and '−' buttons, or return to the default viewbox pressing '⊕'.

The following functions are available in this screen:

render recalculate the results of changes in the code, transform value or parameters

export save the design as a pure SVG file, i.e. without parameters so that it can be fed to a laser cutter, cnc-mill etc. Don't forget to also save the parametric design too, if you want to work on it later on. To do this, go to 'project settings' and click 'save'

render	recalculate the results of changes in the code, transform value or parameters
export	save the design as a pure SVG file, i.e. without parameters so that it can be fed to a laser cutter, cnc-mill etc. Don't forget to also save the parametric design too, if you want to work on it later on. To do this, go to 'project settings' and click 'save'