I have svg graphics consisting of a simple filled and stroked path with 10 - 30 bezier curve control points created with Inkscape (outlines of dolphins and octopus).  I want to use svg graphics because of their scalability (and control over color, stroke, and transparency).  I haven't learned how to use processing bezier's or to convert my svg's to beziers and it's a lot easy to create artwork as svg's.

I want to be able to rotate these svg's but not around their corner's or svg document center.  Whether I use shapeMode(CENTER); shapeMode(CORNER); or //shapeMode(CORNERS); my svg's don't rotate in place.  They also look kind of funky when rendered in P3D with smooth();

It would be nice to load them into processing as beziers ... is there a library or a processing sketch that outputs the bezier information from an svg into processing bezier() statements that could be cut and pasted into a sketch?

Sorry, codes kinda worthless w/o the svg's but couldn't figure how to add them to this post:

1. /**
2. *  wagon wheel (stroboscope) effect
3. *  see http://en.wikipedia.org/wiki/Wagon-wheel_effect
4. *  THIS IS FOR TESTING ROTATION OF SVG'S; NOT A PROJECT
   
5. */
6. // IMPORTED LIBRARIES
7. // GLOBAL VARIABLES
8. float rotoff;
9. float x,y;
10. // IMAGE, SOUND, FONT, MOVIE OBJECTS
11. PShape s;
12. PShape s2;
13. PShape s3;
14. //PShape TestRect;
15. PShape TestRect;
16. // CLASSES/OBJECTS
17. // SETUP
18. void setup(){
19. size(400,400);
20. //frameRate(12);
21. smooth();
22. //shapeMode(CENTER);
23. shapeMode(CORNER);
24. //shapeMode(CORNERS);
25. s = loadShape("dolphin.svg");
26. s2 = loadShape("outline_simple.svg");
27. s3 = loadShape("dolphin2.svg");
28. //TestRect = rect(200,200,20,60);
29. //s.rotate(180);
30. }
31. // DRAW
32. void draw() {
33.   background(0);
34.   s.enableStyle();
35.   //s.scale(.25,.25);
36.   rotoff = -PI/90;
37.   s.rotate(rotoff);
38.  
39.   x = x-1;
40.   y = sin(radians(x))*x/4 + height/2;  //  cos(2^x) +
41.  
42.   pushMatrix();
43.   //shape(s, width/2+(rotoff*(width)), height/2,s.width/8,s.height/8);
44.   //shapeMode(CORNER);
45.   shape(s, x, y,s.width/8,s.height/8);
46.   popMatrix();
47.  
48.  
49.   if (x <= 0) {
50.     x = width;
51.     //y = y * -1;
52.   }
53.  
54.   pushMatrix();
55.   //translate(x,-50);
56.   fill(#F51616);
57.   shape(s2, width/2+(rotoff*(width)+100), height/2+100,s2.width/8,s2.height/8);
58.   popMatrix();
59.   //translate(x,-50);
60.   shape(s3, width/2+(rotoff*(width)+100), height/2+100,s3.width/8,s3.height/8);
61.   //rotate(radians(1));
62.   //s.rotate(+.1);
63.   //if (random(30) <= 1) {s.rotate(-180);}
64.   //shape(TestRect,width/2,height/2);
65.   //TestRect.rotate(rotoff);
66.   //s.rotate(rotoff);
67.   s2.rotate(+1);
68.   s3.rotate(-rotoff);
69. }
70. void mousePressed() {
71.   s.rotate(rotoff);
72.  
73.   //s.rotate(PI/3.0);
74.   //rotate(radians(1));
75. }

It's really going to put a strain on my noggin if you have to translate x and y as a function of it's current rotation in order to get svg's to rotate in place.