SVG (not always vector format?)

Processing Libraries
1

hi there -

i’m using processing’s SVG library to export SVG files from still images. i’ve noticed that this output is somewhat erratic, though.

while it more-or-less always exports the image as i expect, different drawings seem to produce different results in terms of the vector formatting. since my end goal is bring my SVG vector drawings into other softwares, it’s important to me that the vector formatting is correct.

my assumption is that it has something to do with this disclaimer:

  • Many methods, particularly pixel-based methods, don’t make sense for SVG renderers. This includes: loadPixels, updatePixels, get, set, mask, filter, copy, blend, save, and image

Assuming this is the case and I am just doing my drawings with too many pixel-based methods, can anyone suggest an introduction to still, 2d-based vector-based methods in Processing?

Can anyone help direct me towards more information on this issue, in general?

Thanks

2

Hi @bdon – could you provide an example of the erratic output? I assume you’re using bezier(), curve(), beginShape(), endShape(), etc. a lot in your sketches (as opposed to pixel methods)?

3

Sure. One thing I’m noticing is that pop/push doesn’t translate well to Vectors - not sure if there’s a way around that. I have run into some challenges with textMode(shape) also…

import processing.svg.*;

void setup() {
  size(700, 800);
  beginRecord(SVG, "svg/output.svg");     // Start recording the SVG before setting the fill and stroke.
  noFill();
  smooth(30);
  stroke(255);
  noLoop(); 

}

  void draw() {
    int numberOfHexes = 2;
    background(0);
    for (int g = 1; g < 10; g++) {
      translate(70, 0);
       push();
       for (int h = 1; h<10; h++){
         translate(0, 50);
        for (int i = 1; i < numberOfHexes; i++) {
          strokeWeight(1);
          quadro(width / 48, height / 8, 30+1, random(0, PI));
      }
        } pop();
          }

  endRecord();
}

void quadro (float x, float y, float radius, float angle) {
  beginShape();
  for (float a = 0; a < TAU; a += TAU / 4) {
    vertex(x + cos(a + angle) * radius, y + sin(a + angle) * radius);
  }
  endShape(CLOSE);
}
4

No one has any thoughts on this?
I’m new to Processing and vector-based graphics - so anyone who is knowledgeable about these things or could direct me towards more information would be greatly helpful.
Thanks.