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 I want to create a diagram like this:


I know that it is possible to position elements so that they look nested. However, what if I decide to re-position the parent box? I would like the rest to move with it.

What is the best way to mark up something like the above?

Would that also be the solution for text which is supposed to be inside the inner boxes?


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!

SVG setup

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"/>
        <rect id="bgRect" x="0.5" y="0.5" width="400" height="400" style="fill:none;stroke:#000;stroke-miterlimit:10"/>

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).

| improve this answer | |
  • I wouldn't say its very good. Its adequate. – joojaa Aug 4 '17 at 11:57
  • I knew this comment was coming :D I happen to think it's good. And it's definitely better than hand-coding an SVG. – PieBie Aug 4 '17 at 11:59
  • @PieBie Actually, I don’t use Adobe products at all, so this was more a question of hand coding. My goal is to generate a diagram from a scripting language. As far as I can tell, the <g> element can’t be positioned, but I can wrap this inside another <svg> element? – Manngo Aug 4 '17 at 12:12
  • @Manngo <g> elements can be positioned with transform attributes. Illustrator can not do it though. Because its not very good at making SVG, as it does not allow me to inject identifiers or attributes etc. And can not really have well nested groups, except perhaps with symbols. But teh exporter is slow and very rigid. It takes 20 minutes to write an exporter that is better. – joojaa Aug 4 '17 at 12:18
  • @Manngo - you also can create SVGs, and experiment with the code, with non-Adobe products, such as Inkscape which is free. The world is not run by Adobe, although sometimes it feels like it. – Billy Kerr Aug 4 '17 at 17:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.