The contents of an SVG File

> > > >

An SVG file describes a set of two-dimensional graphics. The following are examples of such graphics that could be found in an SVG file:

Images, through the image element.
Rectangles, through the rect element.
Circles and ellipses, through the circle and ellipse elements.
Lines, through the line and polyline elements.
Polygons, through the polygon element.
Arbitrary paths (curves, arcs, lines, and so on), through the path element.
Groups of other graphic elements, through the g element.
Text, through the text element.

These elements can be styled by setting XML presentation attributes on them or by linking cascading style sheets (CSS) to them.

To better understand SVG and its possibilities, see the SVG specification at the following URL: http://www.w3.org/TR/SVG. You will see that SVG provides many more features than those introduced here, such as transformations on graphic elements, filter effects, in-line animation, and scripting capabilities.

SVG file example

A typical example of an SVG file would be as follows.

<svg width="640" height="480">
  <defs>
    <!-- the style on path elements and element with id "myid" -->
    <!-- is defined through a style sheet -->
    <style type="text/css">
      path {stroke-width:3;stroke:blue;fill:none}
      .dash {stroke-dasharray:5 2}
      #myid {fill:rgb(205,5,5);fill-opacity:0.5}
    </style>
    <!-- style can be complex such as a gradient... -->
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%"
         y2="100%">
       <stop offset="0" stop-color="yellow"/>
       <stop offset="0.2" stop-color="green"/>
       <stop offset="1" stop-color="red"/>
     </linearGradient>
  </defs>
  <!-- the style on the rectangle is defined through XML -->
  <!-- attributes                                        -->
  <rect x="0" y="0" width="100%" height="100%" 
        fill="url(#grad)"/>
  <!-- paths use a particular syntax to defined their shape -->
  <path d="M0 0L640 480"/> 
  <path class="dash" d="M640 0L0 480"/>
  <!-- the style on the ellipse is defined through an inline -->
  <!-- style sheet                                           -->
  <ellipse cx="320" cy="240" rx="40" ry="30" 
       style="fill:rgb(180,10,10)"/>
  <circle id="myid" cx="320" cy="240" r="50"/>
</svg>

This SVG file will be rendered as a 640 x 480 rectangle filled with a linear green, yellow, and red gradient. On top on this gradient there will be two lines of thickness 3, one of which will be a dashed line. There will also be an ellipse and a circle; the color on the circle is semi-transparent ( fill-opacity:0.5 ) and lets you see the color of the ellipse underneath.

Current section

Scalable Vector Graphics