Creating SVGs with Processing
I’ve been experimenting with creating SVGs programmatically, which opens up a world of possibilities. It allows patterns, shapes, and compositions that would not be easy or possible by hand. The results can then be imported into Illustrator, Sketch or your design tool of choice, augmenting their features.
Processing is a programming environment specifically tailored for code generated visuals, which makes it an ideal choice to create SVGs. It even comes with a built-in library for that exact purpose. This article is intended to be an introduction, and a companion to several open source examples I’ve created: Processing SVG experiments.
Feel free to reuse and remix the code as you see fit.
Getting started #
In addition to Processing’s standard boilerplate setup() and draw() functions, a few mandatory lines of code are required to export an SVG — importing the Processing SVG library, starting the SVG file recording with beginRecord(), drawing some shapes, then closing the SVG with endRecord(). Everything drawn after beginRecord() and before endRecord() will be sent to the canvas on screen, and to your SVG.
Make sure styling and transforms are done after beginRecord() has been called — if you don’t, styling and transforms will apply to your canvas, but not your SVG. If this is happening, you’ll probably notice Processing’s default styles being applied unexpectedly. A 1px black stroke or white fill is a sign that you’ve set your styles before beginRecord().
Oh, and while we’re talking about caveats, using pixelDensity(2) for a Retina or high DPI canvas will result in your SVG being 2× the intended size. Either don’t call pixelDensity() at all, or use pixelDensity(1).
Circle and rectangle #
The example below draws a purple circle and a blue rectangle on a transparent background. It’s not particularly exciting, but it shows the minimum needed to successfully render an SVG from Processing, and may serve as a good starting template.
👁 A blue circle and a purple rectangle
The noLoop() function tells Processing to not run the code in draw() every frame, which means it’ll just create a single file, rather than trying to create many SVGs per second. There’s a few ways you can ask Processing to only render the SVG once:
- Adding noLoop() inside setup().
- Calling exit() when you’ve finished drawing.
- Triggering the drawing some other way outside draw(), like via a keyboard event.
Calling exit() will close the running sketch, so you won’t see the result. Using noLoop() is probably the best way to go in most cases.
SVG markup #
The resulting SVG isn’t as clean as it could be. But, it gets the job done, especially if you’re importing it into a design tool rather than using it as final production code.
👁 The SVG code for a blue circle and a purple rectangle
Hex spin #
Using Processing to generate SVGs really shines when creating many objects. It can be used as a super step-and-repeat, allowing for subtle variations to size, stroke weight, rotation angle and other attributes. The example below would be reasonably difficult to create quickly and accurately in most design tools.
Random shapes and random arcs #
It can also be handy to randomly vary some properties. The Random Shapes and Random Arcs examples shuffle what’s drawn when space is pressed, and write an SVG when return is pressed.
👁 Some random shapes, with random bright colours
Sunflower pattern #
The sunflower pattern below consists of 2,500 circles of varying size and colour.
👁 A blue and purple sunflower pattern
It can take a while to set up, but once you have the code written to generate a pattern like this, it opens up even more experimentation — variables can be animated!
Pocket Casts #
I had the honour of helping the Pocket Casts team create an image using similar techniques. We used an audio file as input to alter the height of lines sweeping around a circle. The result was an SVG that could be imported into a design tool to be combined with the rest of the layout.
If you have any questions about this article, please get in touch. I’ve also created other Processing experiments you may be interested in.
Published 24 January 2019.