How can I merge two shapes in svg?

Question

I have two shapes: circle and rectangle. Want to convert them into one figure. Are there any ways to do that in SVG code?

Answer 1

For anyone looking for the answer to the actual question of how to combine two outlined shapes into a single outlined shape (rather than putting a drop shadow on the combined shape), here is a possible solution:

This essentially draws the circle with the rectangle shape cut out of it and draws the rectangle with the circle cut out of it. When you place these "punched out" shapes one on top of the other, you get what appears to be a single outlined shape.

Here's what the SVG actually does:

1. It defines a white rectangle called "canvas" that is the same size as the SVG.
2. It defines the two shapes that are to be combined ("shape1" and "shape2").
3. It defines a mask for each shape that combines the canvas (which has a fill of white) with the shape (which has a fill of black by default). Note that when you apply a mask to a shape, the part of the shape that corresponds to the white area of the mask is shown, while the part that corresponds with black part is hidden.
4. It draws each shape with the the mask of the other shape applied.