processing.candy
Class SVG

java.lang.Object
  processing.candy.SVG

public class SVG
extends java.lang.Object

Candy is a minimal SVG import library for Processing. Candy was written by Michael Chang, and later revised and expanded for use as a Processing core library by Ben Fry.

SVG stands for Scalable Vector Graphics, a portable graphics format. It is a vector format so it allows for infinite resolution and relatively minute file sizes. Most modern media software can view SVG files, including Firefox, Adobe products, etc. You can use something like Illustrator to edit SVG files.

We have no intention of turning this into a full-featured SVG library. The goal of this project is a basic shape importer that is small enough to be included with applets, meaning that its download size should be in the neighborhood of 25-30k. Because of this size, it is not made part of processing.core, because it would increase the download size of any applet by 20%, and it's not a feature that will be used by the majority of our audience. For more sophisticated import/export, consider the Batik library from the Apache Software Foundation. Future improvements to this library may focus on this properly supporting a specific subset of SVG, for instance the simpler SVG profiles known as SVG Tiny or Basic, although we still would not support the interactivity options.

This library was specifically tested under SVG files created with Adobe Illustrator. We can't guarantee that it will work for any SVGs created with other software. In the future we would like to improve compatibility with Open Source software such as InkScape, however initial tests show its base implementation produces more complicated files, and this will require more time.

An SVG created under Illustrator must be created in one of two ways:

• File → Save for Web (or control-alt-shift-s on a PC). Under settings, make sure the CSS properties is set to "Presentation Attributes".
• With Illustrator CS2, it is also possible to use "Save As" with "SVG" as the file setting, but the CSS properties should also be set similarly.

A minimal example program using Candy: (assuming a working moo.svg is in your data folder)

 import processing.candy.*;
 import processing.xml.*;

 SVG moo;
 void setup() {
   size(400,400);
   moo = new SVG("moo.svg",this);
 }
 void draw() {
   moo.draw();
 }
 

February 2008 revisions by fry (Processing 0136)

• Added support for quadratic curves in paths (Q, q, T, and t operators)
• Support for reading SVG font data (though not rendering it yet)

• Switch to the new processing.xml library
• Several bug fixes for parsing of shape data
• Support for linear and radial gradients
• Support for additional types of shapes
• Added compound shapes (shapes with interior points)
• Added methods to get shapes from an internal table

• Now properly supports Processing 0118
• Fixed a bunch of things for Casey's students and general buggity.
• Will now properly draw #FFFFFFFF colors (were being represented as -1)
• SVGs without tags are now properly caught and loaded
• Added a method customStyle() for overriding SVG colors/styles
• Added a method SVGStyle() to go back to using SVG colors/styles

• Rounded rectangles
• Drop shadow objects
• Typography
• Layers added for Candy 2
• Patterns
• Embedded images

width

public float width

height

public float height

SVG

public SVG(PApplet parent,
           java.lang.String filename)

Initializes a new SVG Object with the given filename.

SVG

public SVG(PApplet parent,
           XMLElement svg)

Initializes a new SVG Object with the given filename.

parseUnitSize

public float parseUnitSize(java.lang.String text)

Parse a size that may have a suffix for its units. Ignoring cases where this could also be a percentage. The units spec:

• "1pt" equals "1.25px" (and therefore 1.25 user units)
• "1pc" equals "15px" (and therefore 15 user units)
• "1mm" would be "3.543307px" (3.543307 user units)
• "1cm" equals "35.43307px" (and therefore 35.43307 user units)
• "1in" equals "90px" (and therefore 90 user units)

get

public SVG get(java.lang.String name)

Get a particular element based on its SVG ID. When editing SVG by hand, this is the id="" tag on any SVG element. When editing from Illustrator, these IDs can be edited by expanding the layers palette. The names used in the layers palette, both for the layers or the shapes and groups beneath them can be used here.

 // This code grabs "Layer 3" and the shapes beneath it.
 SVG layer3 = svg.get("Layer 3");
 

strokeGradient

public void strokeGradient(java.lang.String name,
                           float x,
                           float y,
                           float r)

strokeGradient

public void strokeGradient(java.lang.String name,
                           float x1,
                           float y1,
                           float x2,
                           float y2)

fillGradient

public void fillGradient(java.lang.String name,
                         float x,
                         float y,
                         float r)

fillGradient

public void fillGradient(java.lang.String name,
                         float x1,
                         float y1,
                         float x2,
                         float y2)

draw

public void draw()

Temporary hack for gradient handling. This is not supported and will be removed from future releases.

draw

public void draw(float x,
                 float y)

Convenience method to draw at a particular location.

draw

public void draw(float x,
                 float y,
                 float c,
                 float d)

drawImpl

public void drawImpl()

Draws the SVG document.

drawMode

public void drawMode(int which)

Set the orientation for drawn objects, similar to PImage.imageMode().

Parameters:

which - Either CORNER, CORNERS, or CENTER.

ignoreStyles

public void ignoreStyles()

Overrides SVG-set styles and uses PGraphics styles and colors. Identical to ignoreStyles(true).

ignoreStyles

public void ignoreStyles(boolean state)

Enables or disables style information (fill and stroke) set in the file.

Parameters:

state - true to use user-specified stroke/fill, false for svg version

print

public void print()

Prints out the SVG document useful for parsing