Jenkov.com
Tutorials Books About
Svg

1 SVG Tutorial
2 SVG Examples
3 A Simple SVG Example
4 Displaying SVG in Web Browsers
5 SVG Coordinate System
6 SVG svg element
7 SVG g element
8 SVG rect element
9 SVG circle element
10 SVG ellipse element
11 SVG line element
12 SVG polyline element
13 SVG polygon element
14 SVG path element
15 SVG marker element
16 SVG text element
17 SVG tspan element
18 SVG tref element
19 SVG textpath element
20 SVG switch element
21 SVG image element
22 SVG a element
23 SVG defs Elements
24 SVG symbol Element
25 SVG use Element
26 SVG and CSS - Cascading Style Sheets
27 SVG Stroke
28 SVG Fill
29 SVG Viewport and View Box
30 SVG Animation
31 SVG Scripting
32 SVG Transformation
33 SVG Gradients
34 SVG Fill Patterns
35 SVG Clip Path
36 SVG Masks
37 SVG Filters




SVG svg element


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.

Video Version

Here is a video version of this 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!