SVG Importer

for Processing
by Michael Chang (Flux)

This library is primarily for importing SVG paths into your processing sketch. For now, you can only import paths (no lines, rects, ellipses).

For the lack of a better name at the moment, it is named SVG Importer. However, future plans do include supporting features like layers, lines, fills, and more. For an example of what you can do with SVG (Adobe's Scalar Vector Graphics), check out what I used it for in a previous app I did titled Manifest.

If you liked this library or have questions about its usage, you can email me at mflux [@] ucla [.] edu. However, please don't ask me to debug your code... :[ You can ask plenty questions on the discourse.

Much thanks to Casey Reas, Ben Fry, Aaron Koblin, Julien Gachodoat, and Zai.

--Page updated 11/30/2005
--SVG Importer currently supports Processing-0097

Version History
1.0 - Release. *crosses fingers* 11/19/05

Download SVG Importer 1.0 Library

Download complete SVG example set

Links

Instructions

First, unzip the library into your processing-xxx/libraries.

When writing a processing sketch, click sketch -> import library -> svgimport.

IMPORTANT:
You MUST use these settings in your SVG options to ensure a proper import. From Adobe Illustrator, the closest settings you can get is:

For now, only curves/paths will get imported to processing. At the moment, lines, rects, ellipses, fills, gradients, and a lot of stuff are ignored. Perhaps in future versions I will support these, depending on time/demand.

Examples

(note: Vincent the cat is a 3D model rendered in maya vector as an svg, and now... loaded into processing!).

How to load an SVG

          
          
          
          
  To view this content, you need to install Java from java.com
        
//This example shows you the basics of how to load an SVG, and how to
//  display it to screen

import svgimport.*;


//Make a new variable of type svgpath
svgpath mysvg;

void setup()
{
  size(350,350);  
  
  //initialize the svg here, with a reference pointer to the app using "this"
  //copy your svg into the datafolder, then use a string to define the 
  //filename, here "svgcat.svg"
  mysvg=new svgpath("svgcat.svg",this);  

  smooth();
}
void draw()
{
  background(255);
  
  //Use the variable method draw() to show to screen.
  //The first variable is your style of drawing. These can be found in 
  //  reference, such as LINE_STRIP, LINE_LOOP, POLYGON, etc
  //The second and third variable define where it will be draw on the 
  // screen using 0,0 of the svg as the beginning.
  mysvg.draw(LINE_STRIP,35,120);
}

Using SVGDetail

To view this content, you need to install Java from java.com


//This example shows you how to change the detail level of an svg
//Remember, as of Processing 93 curve and bezier detail levels only work 
//  in P3D and OGL


//svgDetail() can save you buttloads of CPU load, since it gives you control
//  of how fine you want your SVGs to be rendered. 


import svgimport.*;

svgpath mysvg;

void setup()
{
  size(350,350,P3D);  //<---svgDetail only works in P3D and opengGL 
  mysvg=new svgpath("svgcat.svg",this);  
}
void draw()
{
  background(255);
  
  //First, set the detail before you draw.
  //Here, we set it to mouseX/10 so it animates. This is easier to show you
  //  the effects of detail levels.
  //Note that it's actually altering bezierDetail, although each detail level 
  //  is saved for every SVG you have.
  
  mysvg.setDetail(mouseX/10);
  
  //Now draw your svg
  mysvg.draw(LINE_STRIP,35,120);
}

Using Color Override

    
    
    
    
  To view this content, you need to install Java from java.com
  
//This example shows the color override function of svg import.

import svgimport.*;
svgpath mysvg;
void setup()
{
  size(350,350);
  mysvg=new svgpath("moogle.svg",this);  
  smooth();
}
float colorShift=0;
void draw()
{
  background(255);
 
  //Usually when you draw svgs to screen, it uses the color specified in
  // the SVG file.
  mysvg.colorOverride(false);
  mysvg.draw(LINE_STRIP,40,120);
  
  //However, if you want to use your own colors, or animate the colors
  // in this case, you can use the colorOverride() function.
  
  mysvg.colorOverride(true);  
  stroke(colorShift);
  mysvg.draw(LINE_STRIP,190,120);
  
  colorShift+=2;
  if(colorShift>255)
    colorShift=0;
  
}

Reference

new svgPath(filename, this);

filename - Any string for filename of your svg located in your data folder.

this - A reference to your current applet. Just leave it as this and everything will be okay... (see reference).

eg
svgpath mySVG=new svgPath("cat.svg",this);

svg.draw(style,cornerX,cornerY);

This is the drawing function for your SVG objects. You use this to display SVGs to the drawing space.

style - Any drawing style found in processing for beginShape(). Examples include LINE_LOOP, POLYGON, TRIANGLES, etc. More examples can be found in the Processing reference for beginShape().

cornerX - X coordinate of the corner of your SVG to display. Takes floats or ints.

cornerY - Y coordinate of the corner of your SVG to display. Takes floats or ints.

eg
mySVG.draw(LINE_LOOP,mouseX,mouseY);

svg.setDetail(detailLevel);

This handy function sets what resolution the svg object in question will be drawn at.

detailLevel - Any int (or float that gets rounded) for the resolution of your svg. This is then stored into the svg object itself, so you needn't do this multiple times.

eg
mySVG.setDetail(4);

svg.colorOverride(state)

This function allows you to override the svg's stored color information. You can then use stroke() or fill() to color your SVGs instead.

state - A boolean either true or false. True, and stroke()s and fill()s will be applied (or as the case may be, noStroke()s or noFill()s). False will make the svg be drawn in the color in which it was created.

eg
mySVG.colorOverride(true);

noFill();
stroke(255,0,0);
mySVG.draw(LINE_LOOP,25,50);