(Scalable) Vector Graphics
  • Formalistic description of graphics
  • Can be scaled unlimited
  • Very well suited to drive bots, plotters or CNC cutters
  • opposite of pixel images (GIF, JPG, PNG)
SVG is for the web NOT for CNC cutters. It looks like:
<path id="glass_s" d="M 1000.000 689.258 c 18 0 18 0 120.030 11.312 20.406 2.262 43.880 4.205 42.573 -4.700 -163.910 -15.517 -143.910 -15.517 -162.603 -15.517 -18.693 0 1.307 0 -162.603 15.517 -1.307 8.905 22.167 6.962 42.573 4.700 102.030 -11.312 102.030 -11.312 120.030 -11.312 M 1000.000 680.354 c 20 0 0 0 162.603 15.517 l 1.307 8.905 14.841 -2.178 c 2.375 -0.348 8.047 -0.261 8.576 3.339 0.528 3.600 -4.880 5.313 -7.255 5.661 l -14.841 2.178 1.321 9 14.841 -2.178 c 2.375 -0.348 8.047 -0.261 8.576 3.339 0.528 3.600 -4.880 5.313 -7.255 5.661 l -14.841 2.178 1.321 9 14.841 -2.178 c 2.375 -0.348 8.047 -0.261 8.576 3.339 0.528 3.600 -4.880 5.313 -7.255 5.661 l -14.841 2.178 c -4.452 0.653 -43 66.290 -50 66.290 l -120.513 10 m 0 -116.065 c 18.600 0 2.604 0 132.115 12.481 38.853 3.744 10 27 0 27 -60 0 5 45.519 -89.615 53.019 l -42.500 5 -42.500 -5 c -94.615 -7.500 -29.615 -53.019 -89.615 -53.019 -10 0 -38.853 -23.256 0 -27 129.511 -12.481 113.515 -12.481 132.115 -12.481 18.600 0 2.604 0 132.115 12.481 38.853 3.744 10 27 0 27 -60 0 5 45.519 -89.615 53.019 l -42.500 5 -42.500 -5 c -94.615 -7.500 -29.615 -53.019 -89.615 -53.019 -10 0 -38.853 -23.256 0 -27 129.511 -12.481 113.515 -12.481 132.115 -12.481 m 0 116.065 l -120.513 -10 c -7 0 -45.548 -65.637 -50 -66.290 l -14.841 -2.178 c -2.375 -0.348 -7.783 -2.061 -7.255 -5.661 0.528 -3.600 6.201 -3.687 8.576 -3.339 l 14.841 2.178 1.321 -9 -14.841 -2.178 c -2.375 -0.348 -7.783 -2.061 -7.255 -5.661 0.528 -3.600 6.201 -3.687 8.576 -3.339 l 14.841 2.178 1.321 -9 -14.841 -2.178 c -2.375 -0.348 -7.783 -2.061 -7.255 -5.661 0.528 -3.600 6.201 -3.687 8.576 -3.339 l 14.841 2.178 1.307 -8.905 c 162.603 -15.517 142.603 -15.517 162.603 -15.517">
A Computer Numerical Controlled cutter (flatbed milling machine) looks like:
DXF is for CNC devices.

And not suitable for the web. It looks like:

  0
SECTION
  2
HEADER
  9
$ACADVER
  1
AC1009
  9
$EXTMIN
 10
0.0
 20
0.0
 30
0.0
  9
$EXTMAX
 10
100.0
 20
100.0
 30
0.0
  9
$INSBASE
 10
0.0
 20
0.0
 30
0.0
  9
$INSUNITS
 70
4
0
ENDSEC
  0
SECTION
  2
TABLES
  0
TABLE
  2
LTYPE
 70
19
  0
ENDTAB
  0
TABLE
  2
LAYER
 70
6
  0
LAYER
  2
DIMENSIONS
 70
0
 62
1
  6
CONTINUOUS
  0
LAYER
  2
TABLECONTENT
 70
0
 62
1
  6
CONTINUOUS
  0
LAYER
  2
jeroen
 70
0
 62
5
  6
CONTINUOUS
  0
LAYER
  2
up
 70
0
 62
6
  6
CONTINUOUS
  0
LAYER
  2
down
 70
0
 62
6
  6
CONTINUOUS
  0
LAYER
  2
seat
 70
0
 62
6
  6
CONTINUOUS
  0
LAYER
  2
TABLEBACKGROUND
 70
0
 62
1
  6
CONTINUOUS
  0
LAYER
  2
TABLEGRID
 70
0
 62
1
  6
CONTINUOUS
  0
LAYER
  2
VIEWPORTS
 70
0
 62
7
  6
CONTINUOUS
  0
ENDTAB
  0
TABLE
  2
STYLE
 70
12
  0
ENDTAB
  0
TABLE
  2
VIEW
 70
0
  0
ENDTAB
  0
TABLE
  2
APPID
 70
1
  0
APPID
  2
DXFWRITE
 70
0
  0
ENDTAB
  0
TABLE
  2
VPORT
 70
0
  0
ENDTAB
  0
TABLE
  2
UCS
 70
0
  0
ENDTAB
  0
ENDSEC
  0
SECTION
  2
BLOCKS
iPath (© Jeroen Dijkmeijer) to the rescue
A Javascript library for scripting format agnostic grahics
an iPath object can currently be rendered into SVG & DXF.
myPath = new iPath().. svg: document.querySelector('path').setAttribute("d", myPath.dPath() dxf: myPath.dxf(...) myPath.pdf(..), myPath.eps(..) myPath.sew(..), myPath.gCode(..), myPath...???
Think of iPath as way to script a pen (laser, milling bit) on sheet.
var length=15;
var pan = new iPath().line(15,0).line(pan.length,0).line(0,pan.length)
  .line(-pan.length,0).line(0, -pan.length)
  .move(0.45*pan.length,-5).line(0.1*pan.length,0);
document.querySelector("svg g .this")
  .setAttribute("d", pan.dPath(3, 0.5));
Also use polar coordinates with repitition,
like turtle graphics:
var length=150;
var gear = new iPath().turtleLine({a: Math.PI/2
  , r: length,0)}.repeat(4);
iPath can partially render SVG very easy
When generating a "d-path" use a partial parameter:
var partial=0.56;
var gear = new iPath()
  .turtleLine({a:Math.PI/2,r:length,0}).repeat(4);
document.querySelector("svg g .gear").setAttribute("d",
  gear.dPath(3, partial));
Arcs(circle segments)
  • Are problematic in SVG
  • ♥ by CNC.
  • Can be used in iPath to round line joints.
SVG: a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
iPath: new iPath().line(50,0).fillet(radius).line(0,50);
In combination with polar coordinates and repitition
Creating gears becomes quite simple
Beziers
  • are troublesome (to say the least) for CNC devices
    Most CNC devices or software can not handle (well)
  • are translated to linesegments by iPath
SVG's bezier continuation reflects the last controlpoint
iPath allows the same with a weight parameter
var weight=0.7;
wave = new iPath().bezier(450,0,-100, -350,300,-350)
  .smooth(weight, 0,350,350,350);
Very handy when constructing a handwriting font!
words.e= new iPath().bezier(10, 0, 30, 5, 30, -30)
  .smooth(0.15, -10, -35, -20, 20).smooth(0.6, 0, 35, 20, 20);
words.h= new iPath().bezier(6, -10, 23, 0, 32, -50).smooth(2.5, -10, -41, -12, 70)
  .smooth(-0.6, 27, -45, 22, -10).smooth(0.65,3,4,3,1);
Mirroring or Reflection
  • Lots of forms and figures are symmetric
  • Waist of time to code out symmetric parts
  • Pen continuation is king so reflection is mirroring and reversing
  • Default reflection line is from current pen position to origin
    • var mirror = new iPath().line(50,50).fillet(2).line(-100,100)...;
    document.querySelector("svg g .mirror").setAttribute("d"
      , mirror.reflect().dPath(3, partial));
Mirroring & reflection part 2
Optional argument is reflection vector
var mirror = new iPath().line(50,50).fillet(2).line(-100,100)...;
document.querySelector("svg g .mirror").setAttribute("d"
  , mirror.reflect({x:0,y:1}).dPath(3, partial));
Transforming
iPath's transform operations are equal to SVG's
  • Transfer
  • Rotation
  • Skewing
var heart = new iPath().bezier(-20, -20, -5, -40, 0,-20).mirror()
var rotation, dx, skew = 0; document.querySelector("svg g .transform").setAttribute("d"
  , heart.rotate(Math.PI * rotation).skew(sew).dPath({x:dx,y:0}), 3);
CNC: Overcut aka dogbone
Because of radius milling bit, free fillet
But possibly unfit, for pen & hole connections
CNC: Overcut2 aka dogbone
Because of radius milling bit, free fillet
But possibly unfit for pen & hole connections among others
var overcut = new iPath().line(-10,0).overcut(bitradius).line(0,-20).overcut(bitradius).line(10,-20).overcut(bitradius).line(10,20)..overcut(bitradius).line(0,20).overcut(bitradius).line(-10,0); document.querySelector("svg g .overcut2").setAttribute("d"
  , heart.rotate(Math.PI * rotation).skew(sew).dPath({x:dx,y:0}), 3);
iPath compared to SVG
  • Is better readable
  • has cartesian and polar coordinate system
  • Is waaaay more flexible with variables and expression
  • Is extensible with third party made add ons
Thank you!
More information on www.stretchsketch.com
More presentation www.stretchsketch.com/presentation
iPath on www.github.com/dr-jerry/iPath