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.