I used Processing to generate this SVG.

Original SVG drawing

As you can see, it's a series of triangles with trapezoids that gradually get smaller. It came out great, except I want to 'crop' the image to look like this.

enter image description here

Ultimately I want to laser cut this drawing. A laser cutter needs an SVG in order to work, so I can't rasterize and crop. How can I join the border shapes to form a complete SVG?

Sorry if this isn't clear, I'm new to graphic design.

  • Laser cutting isnt exactly graphic design.
    – joojaa
    Jul 8, 2016 at 7:44
  • If there's a better stack exchange I'd be happy to post there. I needed help with graphic design tools so I figured this was an appropriate place.
    – Devin
    Jul 8, 2016 at 18:15
  • Graphic design is not about tools its about the purpose you solve by graphical means. SVG is no more a graphics design tool than an excel file is a accounting agency. But yes you have the answer. Though why not use your program to cut the design?
    – joojaa
    Jul 8, 2016 at 18:17
  • I'm not sure I understand the distinction you're making. To answer your question, I was having issues programmatically solving the problem so I was turning to SVG editors.
    – Devin
    Jul 8, 2016 at 18:34
  • 1
    In my humble opinion, this is a perfectly on-topic question.
    – Vincent
    Jul 12, 2016 at 14:19

1 Answer 1


Traditionally, "crop" means to block something with something else. So is a bitmap term... pixels or edges or something else cover up something else, hence it's cropped.

The term you want is "trim" or "cut", and the tools you'll need are going to perform a slice like action to your vector (SVG) imagery.

  1. Find a vector editor you like. These are CorelDraw, Illustrator, etc...

  2. Learn how to draw a box and place it over the parts you want to "cut" away.

  3. Check out the boolean tools, they permit you to do "slicing" or "cutting" that removes what you don't want by using the box as a "cutter".

I'm using all the wrong words, so that the process can become clear, each program has its own specific terms for these actions and processes... but the principles are the same: One thing slices and then removes something else based upon the space it's taking up. Hence the programming sounding "boolean" word is often used for this stuff.

Alternative solution:

Use a vector editor to break apart your SVG, and then you can individually select each of the triangles you want to delete, and delete them. But it looks like you'll still need to do some slicing to get the straight edge results at the bottom of your image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.