Why nest an element inside another element?

by

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

Leave a Comment