SVG ("Scalable Vector Graphic") files are text files that contain descriptions of geometry. Paths in SVG files are defined as sequences of points (though elliptical arcs and Bezier curves are also possible), which makes them very suitable for controlling pen plotters. Here is an SVG file, and its code:
<svg version="1.1"
width="400" height="400"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="lightgray" />
<circle cx="100" cy="100" r="80" fill="white" />
<path fill="none" stroke="black" stroke-width="1.0px" d="
M100 100
L300 100
L250 300
Z" />
</svg>
You could write code to directly generate SVG text files, but if you wish to preview your work, you would likely use a creative-coding toolkit. Here are some links and example projects for various toolkits for computationally generating SVG files.
- Processing v3.5.4 and v.4.0, with its SVG Library:
- p5.js v.1.3.1, with p5.js-svg library v.1.0.7 by @zenozeng:
- Lissajous demo (and at Editor.p5js.org)
- svg5.js v.0.1.4 by @MAKIO135:
- Lissajous demo (and at Editor.p5js.org)
- Rune.js v.1.1.8 by @runemadsen, with rune.save.js v.0.4.1 by @alterebro:
- canvas-sketch v.0.7.4 by @mattdesl, with
pathsToSVG()in the canvas-sketch-util v.1.10.0 utilities. - Paper.js by @lehni & @puckey, using its
exportSVG()function as demonstrated here - two.js by @jonobr1, as described here
- Processing.py for Processing v.3.5.4, with its SVG Library:
- Drawbot by Just van Rossum, "a powerful, free application for macOS that invites you to write Python scripts to generate two-dimensional graphics".
- vsketch by @abey79, with e.g. Shapely, which can be used in Google Colab notebooks
- openFrameworks, with the ofxSVG addon
- Huge list of SVG tools at Drawingbots.net
- vpype, which can
- layout vector files with precise control of position & scale
- optimize existing SVG files for faster and cleaner plots;
- create HPGL output for vintage plotters;
- create generative artwork from scratch;
- create, modify and process multi-layer vector files for multi-colour plots; etc.
- Occult, vpype plug-in to remove lines occulted by polygons from SVG files.
- Deduplicate, vpype plug-in to remove overlapping lines in SVG files.
- Shapely, a Python package for manipulation and analysis of planar geometric objects.
We will generally not be using others' "readymade" SVG generators, but it's good to be aware of the kinds of free tools that people make.
- SVG Crowbar, a Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file.
- Potrace, a NodeJS-compatible JavaScript tool for tracing bitmaps.
- Flowchart.fun, a tool that generates SVGs of flowcharts from structured text
- City Map Generator, a readymade tool by @probabletrain for creating procedural city maps in the browser
- flow-lines by @msurguy, a readymade tool for generating SVGs of flow fields
- rad-lines by @msurguy, a readymade tool for generating SVGs of rotating patterns
- Great96, a tool for generating Islamic tiling geometric patterns
- AudioPlotter, a tool for generating SVGs of audio waveforms from sound files
- DrawingBotV3 a tool to create stylised line drawings from images
These are mostly obsolete or experimental.
- cozyvec by @brubsby is "a tiny terminal program for creating plotter art" with JavaScript.
- D3.js, "A JavaScript library for manipulating documents based on data", widely used in data visualization. Can export SVG as described here.
- three.js with its SVGRenderer
- SnapSVG by Adobe Systems. "A JavaScript SVG library for the modern web", possibly no longer maintained.
- svgwrite by @mozman is "a Python library to create SVG drawings." Currently in maintenance mode.
- drawSvg, a Python 3 library for programmatically generating SVG images (vector drawings) and rendering them or displaying them in a Jupyter notebook.
- NodeBox, by Frederik De Bleser, is "an interactive Python environment where you can create two-dimensional graphics", and a fork of Drawbot. Possibly no longer maintained.