Processingでイラレから出力したSVGを使う

Processingで全自動生成したいところですが、自分の気にいったパーツを使いたいというときもあるハズ。
ということで、ProcessingにSVGファイルを読み込ませて、複数個ランダムな位置・大きさ・角度にしてみました。
イラレから書き出すときに設定に気をつけないと、Processingで読み込んだときにいちばん下にあるパーツの形しか表示してくれませんでした。色も抜け落ちます。

まずはIllustrator(CC2017)から下記の設定でSVGを書き出します。

ファイル→書き出し→書き出し形式でSVGにすればOKです。背景というかアートボードを白の状態にしていても、Processingで読み込んだときにちゃんとオブジェクトのみ表示してくれます。
このことが分かりやすいように、Processingの背景を黒にしています。

実際読み込むSVGファイルがこれ。

今回の結果がこれです。

書き出した後はProcessingに移り、下記を入力します。

PShape s1;

int x,y; //位置ランダム
float r;//大きさランダム


void setup() {
  size(600, 600);
   background(0);
   noLoop();
 smooth();
 
//SVGファイル
  s1 = loadShape("test6.svg");
}


void draw() {
    background(0);
  

   for (int i = 0; i < 10; i++) {
     
       r = random(42.71,170.87);
    x = int(random(0, 600));
  y = int(random(0, 600));
  //回転
  s1.rotate(random(0,359));
  shape(s1,x,y,r,r);

}
}


void mousePressed() {
      redraw();// ボタンが押されたら再描画
}