SVG Tutorial
SVG Introduction
SVG Examples
SVG Simple Example
SVG in Web Browsers
SVG Coordinate System
 
SVG svg
SVG g
SVG rect
SVG circle
SVG ellipse
SVG line
SVG polyline
SVG polygon
SVG path
SVG marker
SVG text
SVG tspan
SVG tref
SVG textpath
SVG switch
SVG image
SVG a
SVG defs
SVG symbol
SVG use
 
SVG and CSS
SVG Stroke
SVG Fill
SVG Viewport and View Box
SVG Animation
SVG Scripting
SVG Transformation
SVG Gradients
SVG Fill Patterns
SVG Clip Path
SVG Mask
SVG Filters
 
 


SVG svg element

Connect with me:  
  Jenkov.com - News

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.

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:


NextNext : SVG g

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