: SVG: Nesting Boxes I am pretty fuzzy on many of the fine points on SVG, but as far as I can see, shapes such as the rect element cannot be directly nested, and neither can text. Suppose

@Sent7350415

Short answer: no, rectangles and polygons cannot be nested inside each other in SVG. BUT, there is a group element <g> which can be used to achieve the same effect: reposition the entire SVG.

What's useful to know is that Illustrator CC offers a very good SVG export. You can even inspect the generated code during the export process to see exactly what is going on 'under the hood'. I've learned a lot about SVG and how the code functions by inspecting how this code changes after adapting an artwork in Illustrator.

Grouping in SVG works (almost) exactly the same way it does in Illustrator. So if you want to nest things in SVG, you'd go about it the same way you do in Illustrator.



An example

Say I have the following artwork. Take special note of the groups in the layers panel. I've grouped the parent and child rectangles, then grouped the children again. A good thing to know is that Illustrator will ignore groups if they haven't been name, so naming is important!



Illustrator will export the following code. Note that our groups have been preserved, and the group names in Illustrator have become id's and that styles have been inlined (you can change both these settings in the export dialogue).

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401 401">
<g id="mainGroup">
<g id="childGroup">
<rect id="btmRect" x="25.5" y="30.5" width="350" height="150" style="fill:none;stroke:#000;stroke-miterlimit:10"/>
<rect id="topRect" x="25.5" y="220.5" width="350" height="150" style="fill:none;stroke:#000;stroke-miterlimit:10"/>
</g>
<rect id="bgRect" x="0.5" y="0.5" width="400" height="400" style="fill:none;stroke:#000;stroke-miterlimit:10"/>
</g>
</svg>


A second thing to note is that our SVG structure is ordered the reverse way as our layers panel. This makes sense if you know that in Illustrator things at the top of the layers panel are at the top of the stacking order, whereas in SVG it's the other way around (just like in HTML).

Vote Up Vote Down