Jenkov.com
Tutorials About




SVG svg element


Last updated: 2015-01-03

The root element of all SVG images is the <svg> element. Here is how it looks:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

</svg>

Remember the two namespace declarations, or Firefox will not render the SVG file as an image, but rather interpret it as any other XML file.

SVG Element Video

Here is a video version of this SVG element tutorial:

Nesting SVG Elements

SVG elements can be nested inside each other, like this:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

    <svg >
    </svg >

</svg>

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.

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

Notice how namespace attributes are only necessary on the root svg element. All nested elements are assumed to be within the default namespace (set in the root svg element) if no namespace is set.

Here is the resulting SVG image:



Connect with me: Newsletter - Get all my free tips!
     



Close TOC
This website uses cookies to improve the user experience and gather statistics. Our advertisers use cookies too (3rd party cookies), to provide more relevant ads. Continued use of this website implies that you accept the use of cookies on this website. We do not share our cookies with our advertisers, and our advertisers do not share cookies with us.
OK