Why nest an <svg> element inside another <svg> element?

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/

Answer 1

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