Creating SVG limited to canvas size

Processing Coding Questions
1

I am just learning Processing to make files for the Axidraw. I have figured out my best workflow in terms of saving SVGs but just hit a snag. I am using simplified code for this example here using one line (but in the files I have problems with it is hundreds of lines), but basically if I tell the program to draw a line (or ellipse or whatever) that has coordinates outside of the designated canvas size (any negative x- or y-value), it still draws and exports all that is outside.

This is an example. If I save this SVG by pressing “e” and open it in Inkscape, I get the bounding box with an intersecting line that starts at (-50,0). Is there an easy way to have Processing save only what is inside of the canvas?

import processing.svg.*;
import java.util.*;
boolean bExportSVG = false;

void setup() {
  size(400, 400);
}

void draw () {
  background(255);

  if (bExportSVG) {
    beginRecord(SVG, "drawing.svg");
  }
  size(400, 400);
  rect(0, 0, width, height);
  line(-50, 0, 100, 100);
  if (bExportSVG)
  {
    endRecord();
    bExportSVG = false;
  }
}

void keyPressed()
{
  if (key == 'e')
  {
    bExportSVG = true;
  }
}
2

This is what I see on my system when the saved image is opened in a Chrome browser. Is this not what you would expect to see?

svg
svg806×814 3.92 KB

3

In Chrome, it may display like this.

However, in Inkscape (or I imagine if I opened in Illustrator) it looks like this (attaching the screenshot). Problem is Axidraw will plot the whole line unless of course I put it off the actual page but I like to keep stuff centered:

Screen Shot 2022-08-20 at 10.07.43 PM
Screen Shot 2022-08-20 at 10.07.43 PM1594×696 32.4 KB

4

Processing did what you asked it to do; ie line has a negative value for x1. The only solution I can think of is to constrain the value of x1 to a positive value. That might require creating a Line class, then constrain line.x1 to min >0. https://processing.org/examples/constrain.html

5

I am super new to this. Classes are really hard for me to understand still.

I don’t understand how to constrain it without shifting the entire line. If I constrain the x-value then the line start point would move to (0,0) and draw a totally different line.

6

Have you already checked out this Processing’s tutorial about classes?

There’s also a Java basic tutorial about it on the Oracle site:

Another way to view the class concept is by understanding its relationship w/ multiple arrays:

1 Like
7

Yes thanks! I have done the Processing one in Learning Processing book a few times. It is one of those chapters, I will be reading again and again. I also need to watch the videos a few times…and you also mention arrays which happen to be the other thing I struggle with! Everything made sense basically until I got to these two things. I just need more time to digest.

But I guess, with my rudimentary understanding of objects and classes, I am still unsure how it would help me in this case. What would the specific code even be?

8

In my testing Inkscape will always show the entire length of the line regardless of what is visible in the .svg image. Constraining x1 to > 0 does change the pitch of the line (as you surmised) even if you learn how to use classes, at least in the demo that I tried. If you are committed to Inkscape then there may not be a solution to your problem.

9

Alternatively, you could accept the Inkscape image as is and then crop it before sending to Axidraw: https://www.selfmadedesigner.com/cropping-inkscape/

crop
crop1820×1482 88.5 KB

10

I figured out the long version to solve my problem in Inkscape itself—basically cropping the lines in there using my bounding box that I print to the SVG.

However, cropping an SVG is not so easy ha. And I seem to only manage to do it right 1/2 times. Hopefully, this skill at least will get better.

(btw how do I delete a post on here since my duplicate one became unhidden? I really feel like an idiot that I can’t figure it out…)

thanks!

11

I found the easiest way to do this was to clip the output like this. The SVG looked good in Inkscape :smile:

import processing.svg.*;
import java.util.*;
boolean bExportSVG = false;

void setup() {
  size(400, 400);
}

void draw () {
  background(255);

  if (bExportSVG) {
    beginRecord(SVG, "drawing.svg");
  }
  clip(0, 0, width, height);
  fill(255, 255, 0);
  stroke(0);
  strokeWeight(2);
  rect(0, 0, width, height);
  line(-50, 0, 100, 100);
  if (bExportSVG) {
    endRecord();
    bExportSVG = false;
  }
}

void keyPressed() {
  if (key == 'e')
  {
    bExportSVG = true;
  }
}
1 Like
12

I just tried this. I get the same thing unfortunately, only now I get the addition of a clip path bounding box however the lines still can and do start outside of the box and the pen plotter will still print them.

I found that if I select everything I want to “crop” in Inkscape
then make sure to select “Object to Path”
then select everything not in rectangle and “combine”
then select rectangle and select “cut path” it will cut where the rectangle intersects and I can delete the outside lines

fingers still crossed for a cleaner solution :slight_smile:

13

Your described Inkscape procedure is different from the one that I used, described in the above reference as ‘Clip Using Shapes’. The author imports the .svg image into the editor first, then selects a shape to overlie it (likely a rectangle) and after selecting both objects uses menu item Object/Clip/Set to trim what you don’t want to print. It seemed to work pretty easily after explicitly following the guidelines.

14

Clipping doesn’t work for pen plotting. For many outputs, it is a great way to crop, however, for the pen plotter the paths are still there and will still be plotted. Effectively clip tells Inkscape not to display outside of the shape, but it doesn’t remove the paths. The pen plotter (or laser cutter or whatever) will plot all the paths.

In display mode, the clip works perfectly.

If you choose “outline” mode under View/Display mode it looks like nothing happened after using clip.