Parse SVG to Processing Shape Code

Programming Questions

Wind Up T..

Parse SVG to Processing Shape Code

in Programming Questions • 2 years ago

Hello,

I was wondering if there was an easy way that I can convert a SVG into Processing code that looks like this:

beginShape();
vertex(30, 20);
vertex(50, 90);
vertex(20, 50);
endShape();

I realize that I could load the file using loadShape("myfile.svg"); but I want to have programatic access to each individual shape within the SVG. I also realize I could do this using the Geomeratives library using code like this:

RShape mySvg = loadShape("myfile.svg");
RShape myPath = mySvg.getChild("idOfPath");

... but my sketch will eventually end up in Processing.js, so therefore I cannot use the Geomeratives library.

Thanks in advance for your help!

Replies(8)

cedrickie..

Re: Parse SVG to Processing Shape Code

2 years ago

not sure what you need the shapes in the svg for, but you can access them using getChild
http://processing.org/reference/PShape_getChild_.html

Wind Up T..

Re: Parse SVG to Processing Shape Code

2 years ago

Excellent! That's just what I needed!

But now I have another question. What if I have an SVG file with an unspecified number of shapes? I would want to use a for loop to address all of the children individually, but I do not see a function that's like "getChildren" or something like that.

Thanks!

anchnk

Re: Parse SVG to Processing Shape Code

2 years ago

PShape class has a public method name getChildCount() which isn't documented in the reference yet.
But you can find it in the Processing javadocs or in the PShape sources.

Wind Up T..

Re: Parse SVG to Processing Shape Code

2 years ago

Thank you! I didn't realize that there were undocumented methods.

greg.b

Re: Parse SVG to Processing Shape Code

1 year ago

Hey Wind Up Toy! I know this is an old thread, but I am also working on a ProcessingJS project that involves manipulating paths within an SVG. I think my questions are very similar yours, would you be so kind as to post a link to or explain the ProcessingJS project this was for? Thank you! :)

Wind Up T..

Re: Parse SVG to Processing Shape Code

1 year ago

Sorry greg.b I never did get it to work in ProcessingJS, the performance was insanely slow for me when I tried to load an SVG. Also I was unhappy with how it handled antialiasing which you'll see in my sketch, it allows you to see inbetween shapes that are right next to each other (but not overlapping).

I wasn't actually manipulating the paths, I was just translating the shapes around.

Here's a link to the zip. Move your mouse over the image to see it jiggle the shapes.

http://dl.dropbox.com/u/103936/wutlogo.zip

http://wind-up-toy.com

PhiLho

Re: Parse SVG to Processing Shape Code

1 year ago

I haven't tried, but I think it can be easier to put the SVG in the HTML, to let the browser to parse it to a Dom. Then you can use pure JavaScript to manipulate it. The performance should be much better (native speed of the browser vs. JS speed).

void.sam

Re: Parse SVG to Processing Shape Code

1 year ago

hey phi.lho,

is there any documentation out there on how to do this?

my end goal is to use the shape.contains() method, but that doesn't seem to work if there are any nested shapes, and getChildren(), which works in processing, doesn't work in processing.js...

any thoughts?

Top Reply