Why nest an

Question

Why would a demo such as this: http://jsbin.com/ejorus/2/edit, have an <svg> element nested inside another <svg> element?

<svg class="graph">
    <svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <g transform="translate(30,0)">
            <!-- ... -->
        </g>
    </svg>
</svg>

The JS Bin is a modified version of the demo in this blog post: http://meloncholy.com/blog/making-responsive-svg-graphs/

Mr. Alien · Answer 1 · 2013-06-03T05:15:15.920

38

Nesting SVG elements can be useful to group SVG shapes together, and position them as a collection. All shapes nested inside an svg element will be positioned (x, y) relative to the position (x, y) of its enclosing svg element. By moving the x and y coordinates of the enclosing svg element, you move all the nested shapes too.

Here is an example where two rectangles are nested inside two svg elements. Except for the colors the two rectangles have the same definitions for x, y, height, and width. The enclosing svg elements have different x-values. Since the x-position of the rectangles are interpreted relative to their enclosing svg elements x-position, the two rectangles are displayed at different x-positions.

- By Jakob Jenkov

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#009900; fill: #00cc00"/>
  </svg>
</svg>

Credits

edited Jun 03 '13 at 05:15

answered Jun 03 '13 at 05:10

Mr. Alien

153,751
34
298
278

8

@chrmod Did you see a link which says **Credits** at the very bottom of the answer? – Mr. Alien Jan 13 '15 at 08:04
Would this be allowed, multiple SVG's? This would make positioning a lot easier if you can use a couple `svg` as a bit of a framework. – Martijn May 24 '16 at 07:10
3

@Mr.Alien Why can't we use the ``? I think the main use case for it is exactly what you have described. Incidentally, what do you think the differences are b/w grouping elements with `` and ` – Gaurav Ramanan Nov 05 '16 at 12:20
@GauravRamanan I just answered the question which was why nest svg inside svg :) – Mr. Alien Nov 05 '16 at 18:20
3

I meant doesn't the same logic apply to ? – Gaurav Ramanan Nov 05 '16 at 18:21

score 24 · Accepted Answer · edited May 23 '17 at 10:31

24

You're right (as you say in Mr. Alien's answer) that both SVG elements have the same relative positions, and indeed the graph displays fine without the outer SVG.

The reason I added it is because the JavaScript (which I needed to stop the labels getting squished) uses the SVG element's transform matrix (caused by the applied viewBox attribute) to unscale the text.

Unfortunately the returned matrix doesn't take account of transformations applied to the SVG element itself, so I needed to get the transform matrix relative to an outer element that used the initial coordinate system instead. Hope that helps.

edited May 23 '17 at 10:31

Community

1
1

answered Jun 03 '13 at 10:51

meloncholy

2,122
18
16

1

+1 This is helpful. Thanks! I am trying to come up with a resonsive SVG graphing solution for my web app. In [your article](http://meloncholy.com/blog/making-responsive-svg-graphs/) you mention [D3.js](http://d3js.org/). Would you reccommend it? I have a related question on the subject where I was trying to use [Raphaël](http://raphaeljs.com/): http://stackoverflow.com/questions/16848688/responsive-svg-line-graph-with-raphael Any advice would be much appreciated! – Web_Designer Jun 03 '13 at 17:56
D3 is great - it's really powerful and flexible, though it does have quite a steep learning curve. I'd definitely [give it a go](http://christopheviau.com/d3_tutorial/). That said, if you want something fairly common, you may well get results more quickly from other graphing libraries. I haven't used Raphael, so can't comment on that. You may also want to take a quick look at [this web stats](http://meloncholy.com/blog/using-d3-for-realtime-webserver-stats/) thing I made (not responsive unfortunately, but uses D3). There's a [demo here](http://bits.meloncholy.com/mt-stats). – meloncholy Jun 03 '13 at 22:04

score 7 · Answer 3 · answered Oct 12 '17 at 13:25

You can define a new viewport & viewbox. With this option, you can use relative positions like as css. For more information, you can see this online article.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Nested SVG</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <svg width="100%" height="100%">
        <rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" />
        <svg x="25%" y="25%" width="50%" height="50%">
            <rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" />
        </svg>
    </svg>
</body>

</html>

score 0 · Answer 4 · answered May 28 '19 at 14:42

I am about to do this for an entirely different reason: website implementation efficiency.

I have several SVG files that I insert into my web page after downloading them via AJAX. I want to consolidate them into one file because that's better for downloading. I could do this with a text file and then insert the SVG text into a web page element's innerHTML property, but .svg files offer two additional advantages over .txt files:

1) The standard .svgz format allows you to store pre-zipped files on the web server, no need for mod_deflate. SVG files zip very efficiently, I'm seeing 70-85% compression.

2) The web browser parses the SVG outside of my javascript code, hopefully more efficiently. To insert the svg element into the HTML, I use the parent element's insertBefore or appendChild method instead of innerHTML.

Why nest an

4 Answers4

Linked

Why nest an element inside another element?

4 Answers4

Linked

Why nest an