# Clipping an imported SVG using arbitrary shape

**URL:** <https://discourse.processing.org/t/clipping-an-imported-svg-using-arbitrary-shape/44401>\
**Category:** Coding Questions\
**Created:** [May 7, 2024, 5:50pm UTC](https://discourse.processing.org/t/clipping-an-imported-svg-using-arbitrary-shape/44401 "2024-05-07T17:50:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![whoamikey](https://avatars.discourse-cdn.com/v4/letter/w/e9a140/32.png) [@whoamikey](https://discourse.processing.org/u/whoamikey)\
**Post date:** [May 7, 2024, 5:50pm UTC](https://discourse.processing.org/t/clipping-an-imported-svg-using-arbitrary-shape/44401/1 "2024-05-07T17:50:42Z")

</div>

Hey Folks

Scratching my head on how to clip an imported SVG file using an arbitrary shape, not a rectangle. The two shapes I’m currently playing with is an isosceles triangle and an isosceles triangle that uses a bezier as the base rather than a straight line. But I’d like to be able to use any arbitrary closed geometry to clip the imported drawing. By clipping, I mean to cut out a shape from an imported SVG. I’ve attached a screenshot of the original SVG and the result I’m aiming for.

The result will be used on a laser cutter so it needs to result in a clean vector file.

clip() seems to only work with rectangles. I’ve also played with beginCountour()/endCountour() but that seems to just work with shapes drawn with beginShape()/endShape()?

Any and all help is appreciated.

 ![Screenshot 2024-05-07 at 10.49.48 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/0/40ab3f518c2a7f89207886aef34b5cade6c596fc.png)

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [May 23, 2024, 12:50pm UTC](https://discourse.processing.org/t/clipping-an-imported-svg-using-arbitrary-shape/44401/2 "2024-05-23T12:50:07Z")

</div>

This can’t be done with any built-in Processing methods.

You’ll need to use something like (2d boolean) shape intersection from [PGS](https://github.com/micycle1/PGS?tab=readme-ov-file#2d-boolean-operations) to achieve this.

_Note PGS does not preserve bezier curve elements and will subsample them into straight-line segments._

---

<div class="post-metadata">

**Author:** ![LangdonS](https://avatars.discourse-cdn.com/v4/letter/l/ebca7d/32.png) [@LangdonS](https://discourse.processing.org/u/LangdonS)\
**Post date:** [May 24, 2024, 12:54pm UTC](https://discourse.processing.org/t/clipping-an-imported-svg-using-arbitrary-shape/44401/3 "2024-05-24T12:54:23Z")

</div>

I would recommend Java over Processing.

Export your project and copy the .java file in the source folder and copy it to a new folder.  
Copy all resources and core.jar to the new folder too.

Open the .java file in your Java editor(I recommend Intellij IDEA) and import core.jar as a Library.

Now you can use Java methods and Java tutorials.

---

<div class="post-metadata">

**Author:** ![whoamikey](https://avatars.discourse-cdn.com/v4/letter/w/e9a140/32.png) [@whoamikey](https://discourse.processing.org/u/whoamikey)\
**Post date:** [May 24, 2024, 3:45pm UTC](https://discourse.processing.org/t/clipping-an-imported-svg-using-arbitrary-shape/44401/4 "2024-05-24T15:45:43Z")

</div>

Thanks! This library looks rich. I’ll take a look.

---

<div class="post-metadata">

**Author:** ![whoamikey](https://avatars.discourse-cdn.com/v4/letter/w/e9a140/32.png) [@whoamikey](https://discourse.processing.org/u/whoamikey)\
**Post date:** [May 24, 2024, 3:46pm UTC](https://discourse.processing.org/t/clipping-an-imported-svg-using-arbitrary-shape/44401/5 "2024-05-24T15:46:36Z")

</div>

Hadn’t considered that. Thanks for the pointer.