The first two lines of code establish the basic information for the browser. The first line shows that SVG is an application of XML. The second line of code (spread over two lines) is the Document Type Declaration and indicates where the Document Type Definition (DTD) are to be found.

The <svg> tag creates the window in which the graphics are displayed. The dimension may be in centimeters, inches or pixels. The <desc> </desc> tag pair encloses a description of file content. The comment tag pair <!-- --> may also be used for comments for the programmer.

The line of code
<rect style="fill:blue;" x="0.5cm" y="0.5cm" width="2cm" height="1.5cm"/>

creates a rectangle. The x and y values locate the upper left corner. The values can be given in centimeters, as above, or in pixels. The style attribute of the <rect> tag has a string for a value, in this case, "fill:blue;" but it may be several values such as "fill:cyan; stroke:black" as in the case of the second rectangle.

The above code produces the display shown below:

In addition to the graphic primitives of rectangles and ellipses SVG handles polygons. The tag for a polygon has the following form:

<polygon style="fill:red; stroke:blue; stroke-width:3"
points="51,208  56,204   60,203  55,199  62,195  67,181 67,178
50,222  50,221  51,217  51,209" />

The number pairs are the x,y coordinates of the corners of the location of a city can be identified with an ellipse tag and the name of that city displayed by means of a text tag; i.e.,

<ellipse style="fill:cyan;" cx="249" cy="198" rx="10" ry="10"/>
<text style="stroke:black; stroke-width:1" x="220" y="220">Kabul</text>

Below is an example of simple map created with SVG take this code (with an expanded version of the set of points):

The roads are created with lines of code of the form
style="fill:none; stroke:red; stroke-width:2" />

where M 79,293 means move to the point (79,293) and L 84,285 means draw a line from the previous point (79,293) to the point (84,285). The L's after the first are not needed because the browser presumes the previous operation as a default.

The circles for the cities' locations are put over the roads and are made translucent by setting the opacity of 0.5, as in the following line of code:

<ellipse style="fill:cyan; opacity:0.5" cx="249" cy="198" rx="10" ry="10"/>

SVG provides for gradient fills, both linear and radial. An example is shown below.

The gradient fill in the above example is created by first defining a radial gradient, which is named "MapGradient," by means of the following code:

<g>
<defs>
<radialGradient id="MapGradient"
gradientUnits="userSpaceOnUse"
cx="249" cy="198" r="150" fx="249" fy="198">
<stop offset="0%" style="stop-color:#00FF00"/>
<stop offset="20%" style="stop-color:#777777"/>
<stop offset="100%" style="stop-color:#FFFFFF"/>
</radialGradient>
</defs>

When the polygon is filled the following code

<polygon style="fill:url(#MapGradient); stroke:blue; stroke-width:3"

calls for the browser to use the predefine MapGradient for filling the polygon.

The above shows only a tiny bit of the capabilities of SVG but it is enough to show the nature of the code of the language.