Adding SVG support to processing-js

For the processing-js 0.9.6 release I decided to add SVG support. For those of you unfamiliar with SVG it stands for Scalable Vector Graphics, read the wiki for more info. Basically, it is a xml file format that stores information about a shape and can be generated via Adobe Illustrator.  The best thing about this is the fact that now, instead of drawing a bunch of primitives in processing-js, you can simply make a shape in Illustrator and import it. Check out some of my examples.

In order for me to get this going, I needed to implement shape() loadShape() PShape and PShapeSVG. The “behind the scenes” process is as follows:

  • The svg file is retrieved via XMLHttpRequest().
  • The xml is then parsed using the processing XMLElement.
  • PShapeSVG parseChildren() is then used to go through the XMLElement and parse it’s attributes.
  • Depending on the attributes, the shapes are then rendered using processing vertex(), bezierVertex(), or curveVertex() functions.

Due to the fact that processing-js main goal is to implement functionality that is available in its Java processing counterpart, I tried to mimic its behaviour. That being said I totally overlooked SVG standards outlined in this 3WC online documentation. Mostly, the problem with my code lies in the parsePath() and parsePoly()  functionality. Firstly my code assumes that the coordinates provided by the xml file will contain commas. Secondly,I am using a loop to go through the coordinates while manually increasing the iterator.

Take this code for example:

while (i < pathDataKeys.length) {
 c = p.trim(pathDataKeys[i].charAt(0 ));
 switch (c) {
  case 'M':  // M - move to (absolute)
  cx = parseFloat(pathDataKeys[i + 1]);
  cy = parseFloat(pathDataKeys[i + 2]);
  this.parsePathMoveto(cx, cy);
  i += 3;

Manually increasing i + 3 assumes that the next element will be a control command (M, L, C, etc) when in fact it can be another coordinate. In a couple of weeks I will be updating my code. I will be using Path Data Curve Command documentation and Path Data General information in order to perfect my parser.

Supported Features:

  • Path data instructions/control command including: “M” (move to absolute), “m” (move to relative), “L”  and “l” (line to), “H” and “h” (horizontal line to), “V” and “v” (vertical line to), “C” and “c” (curve to), “S” and “s” (shorthand/smooth curve to), “Q” and “q” (quadratic bezier curve to), “T” and “t” (shorthand/smooth quadratic bezier curve to), and “Z” and “z” (close path)
  • Basic Shapes/ Graphic Elements: line, circle, ellipse, rect, polygon, polyline, path.
  • XML attributes: opacity, stroke, stroke-width, stroke-linejoin, stroke-linecap, fill, and style.
  • Basic Colors: color format: #ffffff, rbg(255,255,255), blue.

NOT Yet Supported

  • Basic Shapes/ Graphic Elements: text, filters, masks, elliptical arc.
  • Color Gradients including Radial Gradient and Linear Gradient.

View all of my blogs on Processing.js
View all of my blogs


6 thoughts on “Adding SVG support to processing-js

  1. Pingback: Adding SVG support to processing-js « Anna on Computing – js - dowiedz się więcej!

  2. Pingback: Adding SVG support to processing-js « Anna on Computing « svg

  3. Nice blogging about SVG. I’m trying to write some extensions to Inkscape using SVG. I appreciate your “behind the scenes processing” comments. I’m learning to program at the same time as writing these extensions. So knowing what the libraries do is excellent info. Do you have any suggestions where I can get descriptive (not self-referencing SVG terms) summaries about SVG libraries?

  4. I would like to split a svg draw in sub-shapes and/or paths of svg (as with Geomerative in native Processing)…
    Can you give me a few entry points?…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s