Tech and Media Labs
This site uses cookies to improve the user experience.




SVG svg element

Jakob Jenkov
Last update: 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:

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC