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

With the feMorphology filter you can grow and shrink objects (MDN). Combining them, you can create a simply reusable outline: make an increased copy of the original, paint it, and place it under the shrunk original.

If you want to have it transparent, replace the operator in the last feComposite with xor:

The only caveat: fatter strokes - ie larger dilate and erode radii - on curves may look distorted, with 1px + 1px it is still fine.