# Creating SVG limited to canvas size

**URL:** <https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426>\
**Category:** Coding Questions\
**Created:** [August 20, 2022, 8:29am UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426 "2022-08-20T08:29:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 20, 2022, 8:29am UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/1 "2022-08-20T08:29:32Z")

</div>

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?

```auto
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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 20, 2022, 5:33pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/2 "2022-08-20T17:33:11Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/4/e40e4af6c77c64a6ee5b5423b993c0de26bfd1e2.png)

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 20, 2022, 9:10pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/3 "2022-08-20T21:10:18Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/1/a1de810a06c83244b7d207ac531c47238251908c.png)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 20, 2022, 9:42pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/4 "2022-08-20T21:42:53Z")

</div>

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](https://processing.org/examples/constrain.html)

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 21, 2022, 9:36am UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/5 "2022-08-21T09:36:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 21, 2022, 1:15pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/6 "2022-08-21T13:15:35Z")

</div>

> [@i-draw-monkeys](#):
>
> I am super new to this. Classes are really hard for me to understand still.

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

> **[Objects](https://processing.org/tutorials/objects/)**
>
> The basics of object-oriented programming.

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

> **[Lesson: Object-Oriented Programming Concepts (The Java™ Tutorials \>...](https://docs.oracle.com/javase/tutorial/java/concepts/index.html)**
>
> This beginner Java tutorial describes fundamentals of programming in the Java programming language

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

- [From several variables to arrays - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/8082/from-several-variables-to-arrays.html)
- [From several arrays to classes - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/8081/from-several-arrays-to-classes.html)

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 21, 2022, 4:10pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/7 "2022-08-21T16:10:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 21, 2022, 4:57pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/8 "2022-08-21T16:57:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 21, 2022, 8:15pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/9 "2022-08-21T20:15:25Z")

</div>

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

 ![crop](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/b/bb21ebf7c20384cc422fabc15304487ba9b6f246.png)

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 21, 2022, 9:42pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/10 "2022-08-21T21:42:33Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [August 21, 2022, 9:43pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/11 "2022-08-21T21:43:17Z")

</div>

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

```auto
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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 21, 2022, 11:06pm UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/12 "2022-08-21T23:06:16Z")

</div>

> [@quark](#):
>
> `clip(0, 0, width, height);`

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 🙂

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 22, 2022, 12:55am UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/13 "2022-08-22T00:55:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 25, 2022, 6:52am UTC](https://discourse.processing.org/t/creating-svg-limited-to-canvas-size/38426/14 "2022-08-25T06:52:36Z")

</div>

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.