The first line is the XML declaration. Notice
the standalone attribute! This attribute specifies
whether the SVG file "stands alone", or contains
reference to an external file.
that the SVG document has a reference to an external
file, the DTD.
The second and the third line refers to the external
SVG DTD. The DTD is located in
DTD resides at the W3C and it contains all SVG
The SVG code always begins with the <svg> element, which
consists of the opening <svg> tag and the closing </svg>
tag. This is the root element. The width and height
attributes sets the width and height of the SVG document.
The version attribute defines the SVG version to be used
and the xmlns attribute define the SVG namespace.
The SVG <circle> element is used to create a circle.
The cx and cy attributes define the x and y coordinate
of the center of the circle. If cx and cy are omitted then
the circle's center is set to (0, 0). The r attribute
defines the radius of circle.
The stroke and stroke-width attributes control how
the outline of a shape appear. We set the outline of
the circle to a 2px wide, blue "border".
The fill attribute refers to color inside a
shape. We set the fill color to yellow.
The closing </svg> tag close the root SVG element
and the document.
Note: All opening tags always have closing tags