Is it safe to wrap all immediate children of an svg document into <g> for zooming?

Question

In my app I load different SVG files and need to zoom them. As I see it I need to apply a transformation matrix to an element to have it zoomed, but this doesn't work on SVG element, so I need to wrap everything in a <g> and transform it instead.

So my question is is it safe to do this? Is it allowed for elements like <defs> be not immediate children of <svg>? Will the transformation on outermost <g> affect the elements inside <defs> in this case? What other issues may arise if I wrap everything in a <g>?

Answer 1

Yes you can use <defs> wherever you need it, although it's advisable to keep it as a direct child of the root element. Ask yourself if you really need to inherit style into the <defs> content. Usually the content inside <defs> is referenced by other elements, e.g <use>, so most of the time it doesn't really matter where the <defs> is placed.

The transformation on the <g> element won't affect a child <defs> directly, since the transform isn't inherited. However it may affect the return values from some SVG DOM calls, but in general if you're asking for details on elements inside a <defs> you need to be careful anyway since more context is usually needed to properly compute the result, e.g percentages and objectBoundingBox units depend on the viewport and referencing element respectively.

You may run into issues if the included SVG fragment has css stylerules that select e.g the root element, or the children of an svg element.