Skip to content

Latest commit

 

History

History
140 lines (95 loc) · 9.28 KB

README.md

File metadata and controls

140 lines (95 loc) · 9.28 KB
Raw

Generating SVG Files for Plotters (2024)

Contents:

  • Introduction: What are SVG Files?
  • Recommended Toolchains
    • Finalizing Your SVGs with vpype
    • Generating SVGs with Java (Processing)
    • Generating SVGs with JavaScript (p5.js)
    • Generating SVGs with Python (Processing.py v.3.5.4)
    • Generating SVGs with Python (vsketch)
    • Other SVG Tools and Generators

Introduction: What are SVG Files?

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>

In this course, you will generally:

  1. Generate SVG files using Processing, Python, or p5.js.
  2. Use vpype to prepare and optimize your SVG files for plotting.

Recommended Toolchains

Note: After generating an SVG with one of the toolkits below, use vpype to prepare your SVG for plotting.

Finalizing Your SVGs with vpype

Heads up! No matter which programming toolkit you use to create your SVG files, you will need to prepare and optimize them for plotting using vpype, a powerful command-line tool. Doing so will help avoid damage to our machines, and will make your plots execute much faster, too.

  1. Follow these instructions (Prepping SVGs for Plotting with vpype) for installing vpype.
  2. vpype allows commands to be "stacked" into a filtering pipeline. The following vpype command loads your inputfile.svg; ensures that any line segments with coincident endpoints are merged into polylines; optimally sorts the results; and crops the image for an 11x8.5 page with a half-inch margin: vpype read inputfile.svg linemerge --tolerance 0.1mm linesort crop 0.5in 0.5in 10.0in 7.5in write outputfile.svg
  3. Some other common ready-to-use formulas for vpype can be found here. The main vpype documentation is here.

Generating SVGs with Java (Processing)

Processing is a mature toolkit for creative coding, with an extensive set of 3rd-party libraries. With its built-in SVG Export Library, Processing provides several different ways of using Java to generate SVG files (with code samples provided here), including:

  • SVG Export (No Screen Display)
  • SVG Export (With Screen Display)
  • Single Frame from an Interaction/Animation (With Screen Display)
  • SVG Files from 3D Geometry (With Screen Display)

The Processing toolkit is documented here and here. The following example sketches should help you get started. These work with both Processing 4.x and Processing 3.5.4:

Generating SVGs with JavaScript (p5.js)

p5.js is Processing's JavaScript sibling. Version 1.6.0 of p5.js, along with @zenozeng's p5.js-svg library v.1.5.1, can be used to generate SVGs. Note: As of January 2024, the current version of p5.js (v.1.9.0) is not compatible with the p5.js-svg renderer (v.1.5.1). Instead, be sure to use p5.js v.1.6.0, which is set in the index.html file of your sketch. The documentation for p5.js is here.

For alternative JavaScript-based toolkits and approaches, consider:

Generating SVGs with Python (Processing.py v.3.5.4)

Processing has a "Python Mode" that allows you to use the same SVG Export Library as the Java version. It is documented here. There are two small snags:

  • In Python Mode, the SVG Export Library is only compatible with Processing v.3.5.4, from 2020, which you can download here. As of January 2024, the SVG Export Library is not working in the Python Mode of Processing 4.x.
  • Processing's Python Mode is not compatible with other Python libraries, such as NumPy or SciPy.

Assuming you're working in Processing 3.5.4, you can install the Python Mode using the instructions here. Here are example projects:

Generating SVGs with Python (vsketch)

Other SVG Tools and Generators

  • 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.

"Readymade" SVG Generators

We will generally not be using other peoples' "readymade" SVG generators, but it's good to be aware of the kinds of free tools that people make.

  • rad-lines by @msurguy, a readymade tool for generating SVGs of rotating patterns
  • flow-lines by @msurguy, a readymade tool for generating SVGs of flow fields
  • 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
  • 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

Note: the 2021 version of this document includes additional resources which may or may not be obsolete.