# How mask SVG in Processing

**URL:** <https://discourse.processing.org/t/how-mask-svg-in-processing/9888>\
**Category:** Coding Questions\
**Created:** [April 2, 2019, 5:31pm UTC](https://discourse.processing.org/t/how-mask-svg-in-processing/9888 "2019-04-02T17:31:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Misha](https://avatars.discourse-cdn.com/v4/letter/m/c6cbf5/32.png) [@Misha](https://discourse.processing.org/u/Misha)\
**Post date:** [April 2, 2019, 5:31pm UTC](https://discourse.processing.org/t/how-mask-svg-in-processing/9888/1 "2019-04-02T17:31:09Z")

</div>

Hi! I’m trying to make a SVG cutter. The goal is to upload SVG, cut it to specific shape and export back.  
Logic is → upload SVG → convert it → cut it → export it.

I’m stuck.  
I upload SVG, rebuild it with vectors in Processing, but can’t mask it.  
I tried to cut it with If statement, getChild and getVertex. This works, but leaves traces and bugs.

What am I doing wrong? Is there any way to mask SVG and export it with that mask?

If I misunderstood something or created topic in wrong category, please tell me.  
P. S. Excuse me for my English, it’s not my native language.

```auto
import processing.svg.*;

PShape test;
PShape cut;
PShape realcut;

PVector shape;

void setup() {
 size (600, 600, SVG, "110_test_2.svg");
  test = loadShape ("110 for test.svg");

int count = test.getChildCount();
  println(count);
  cut = test.getChild(0);
  smooth();

 for (int i = 0; i < cut.getChildCount(); i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      println(cut.getChild(i).getVertex(j));

 /*
Tried to make a cut shape. But can't make this work.
 realcut = createShape();
  realcut.beginShape();
  realcut.beginContour();
  realcut = createShape(TRIANGLE, width, 0, width, height, 0, height);
  realcut.noStroke();
  realcut.fill(255);
  realcut.vertex(width, 0);
  realcut.vertex(width, height);
  realcut.vertex(0, height);
  realcut.endContour();
  realcut.endShape();
*/

smooth();

 void draw() {
  background (255);
  fill(0);
  stroke(0);

// Rebuilding shape in processing
  beginShape();

// My SVG have 3 elements, so I draw one by one.
// if (cut.getChild(i).getVertex(j).y < 300) — this statement cut shape in half
  for (int i = 0; i < 1; i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      if (cut.getChild(i).getVertex(j).y < 300) {
        vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      } else {
        vertex(cut.getChild(i).getVertex(j).x, 300);
      }
    }
  }
  endShape();
  beginShape();
 
 // Second element (child)
  for (int i = 1; i < 2; i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      if (cut.getChild(i).getVertex(j).y < 300) {
        vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      } else {
        vertex(cut.getChild(i).getVertex(j).x, 300);
      }
    }
  }
  endShape();
  beginShape();
 
 // Last one
  for (int i = 2; i < 3; i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      //vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      if (cut.getChild(i).getVertex(j).y < 300) {
        vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      } else {
        vertex(cut.getChild(i).getVertex(j).x, 300);
      }
    }
  }
  endShape();
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 5, 2019, 5:12pm UTC](https://discourse.processing.org/t/how-mask-svg-in-processing/9888/2 "2019-04-05T17:12:03Z")

</div>

Can you provide an example svg file of the kind of svg you are trying to “cut”?

Processing loadShape only supports part of the SVG format.

Also, PShape encodes different for svg import and things created using createShape(with a shape argument) or just pure vertex adding. The data is not all kept in one unified way internally – this can be surprising.

---

<div class="post-metadata">

**Author:** ![Misha](https://avatars.discourse-cdn.com/v4/letter/m/c6cbf5/32.png) [@Misha](https://discourse.processing.org/u/Misha)\
**Post date:** [April 7, 2019, 7:03am UTC](https://discourse.processing.org/t/how-mask-svg-in-processing/9888/3 "2019-04-07T07:03:20Z")

</div>

Hi Jeremy!

I’d like to cut any type of SVG. No matter how much verticies or childerns it have.

For example, i want to cut this lettering in half.  
[https://drive.google.com/open?id=1VHYzwCC3Ro9PecZ4yBy9ga0K7Op8GWU6](https://drive.google.com/open?id=1VHYzwCC3Ro9PecZ4yBy9ga0K7Op8GWU6)

By cutting i mean deleting verticies, not masking it.

Is it possible in Processing?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 7, 2019, 3:17pm UTC](https://discourse.processing.org/t/how-mask-svg-in-processing/9888/4 "2019-04-07T15:17:03Z")

</div>

Well, you can cut _anything_ in half at the pixel level by using pixel-based masking, as with PImage.mask()

[https://processing.org/reference/PImage\_mask\_.html](https://processing.org/reference/PImage_mask_.html)

But deleting vertices won’t “cut” a closed shape – that will warp it, and the close point will be a ramp between the remaining ends. To cut a shape like scissors, you usually – at a minimum – need to insert new points in the path along your cut line. How you insert those points can also depend on whether the parts leading to them are curves or straight line segments.

If you want a general purpose solution, pixel-based masking is simple and robust.