SnipSVG has a lot of elements that you can use, but what if you need an editable element that has a more complex shape? You can achieve this by combining two or more elements to make a single element.
The two elements on the left are combined to make the single element on the right
There are four modes for combining Elements: Add, Subtract, Intersect and XOR Combine. The easiest way to understand what they do is to just try them out, but here is the basic description:
Add Shapes
This simply merges the visible parts of the elements.
Subtract shapes
This subtracts the top shape/s from the bottom shape, removing everything covered by the upper shape/s.
Intersect shapes
This removes everything except the overlapping portion of the shapes.
XOR combine shapes
This merges the shapes and removes the overlapping part.
When you combine shapes you get a new shape that has most of the features of any shape, but with a couple of restrictions:
•If the original shapes had rounded corners they are no longer adjustable.
•Any text in any of the shapes will be removed.
•If one of the shapes was a callout, the callout pointer will just be part of the shape and will not be adjustable.
All the other attributes can still be set normally, including outline, fill, opacity and so on. The new shape can also have text, but it must be added after the combine operation.
If the bottom element is an image you can use shapes to crop the image using an overlapping shape as a "cookie cutter".
Procedure
1.Position a shape over an image.
2.Select both the shape and the image.
3.Choose Combine Shapes and then Subtract or Intersect (the other two options are not available for images).
Making the crop permanent
Initially, cropping images like this is not permanent. If you want to make it permanent and remove all the hidden parts of the image, double-click on the cropped image and then select Crop Permanently in the control panel on the right. The crop applied with Combine Elements will be preselected.
