Tag 3 1.SVG

SVG-Dateien speichern Vektor-Grafiken, sie lassen sich bspw. aus Illustrator exportieren. SVG werden wie andere komplexe Vektorpfade in Processing als PShape-Objekt deklariert. Die Grafikdatei wird dann mit loadShape() geladen und mit dem Befehl shape() dargestellt. Die Vorgehensweise ist also analog zu jener, die wir bereits bei dem Laden und Darstellen von Bitmap-Bildern durch PImage, loadImage() und image() kennengelernt haben.

Beispiel 2-5

PShape mySVG;                          // SVGs werden als PShape-Objekt angelegt

void setup(){
  size(800,600); 
  background(255);                       // Hintergrund weiss 
}

void draw(){
  mySVG = loadShape("6irop9LbT.svg");    // Das SVG (aus dem data-Ordner) laden
  shapeMode(CENTER);
  shape(mySVG, width/2, height/2, mySVG.getWidth()/2, mySVG.getHeight()/2);        //SVG darstellen
}

Da SVG-Dateien aus Vektoren bestehen und sie über das PShape-Objekt in Processing auch als Vektor-Objekte behandelt werden, lassen sich die Einstellungen für Linien und Flächen, die wir bereits kennengelernt haben, auch auf SVGs anwenden:

Beispiel 2-6

PShape mySVG;                          // SVGs werden als PShape-Objekt angelegt
float h = 0;
float b = 255;

void setup(){
  size(1280,720); 
  background(255);                       // Hintergrund weiss
  mySVG = loadShape(„6irop9LbT.svg“);    // Das SVG (aus dem data-Ordner) laden
  colorMode(HSB);
}

void draw(){
   noLoop();      
   for(int y=1; y < height; y+= mySVG.getHeight()/10){ 
    for(int x=1; x < width; x+= mySVG.getWidth()/10){
      mySVG.disableStyle();
      //strokeWeight(h/10);
      fill(h, 200, b);
      stroke(h,255,b-50);
      //SVG darstellen
      shape(mySVG, x, y, mySVG.getWidth()/4, mySVG.getHeight()/4);        
      h += 15;
    }
    h = 0;
    b -= 25;
   }
}