Embed SVG in SVG?

Answer 1

It is worth mentioning that when you embed SVGs into another SVG with:

then the embedded SVG takes a rectangular shape with given dimensions.

That is to say, if your embedded SVG is a circle or some shape other than a square, then it becomes a square with transparency. Therefore, mouse events get trapped into that embeded square and do not reach the parent SVG. Watch out for that.

A better approach is using a pattern. To fill a shape, either a circle, a square or even a path.

Then use the pattern like this:

Now your mouse events do not get stuck into transparent image squares!