SVG is an XML application so it is defined using a set of elements and associated attributes conforming to the rules of XML. For example:

<text x="20" y="20">Abracadabra</text>

The SVG text element has a start and end tag written as <text> and </text> and the content of the element is the string Abracadabra. The text element has two attributes, x and y, that define the position of the text in the drawing. These are defined as part of the start tag. Being an XML application, several rules have to be obeyed:

  • There can only be one outer element that encloses the complete drawing definition and that is <svg>
  • Every start tag must have a correctly nested end tag
  • In SVG, tag names are predominantly lower case with no spaces (multi-word names like clipPath use camel case
  • Attributes must be enclosed in quotes (either single or double)

If the content of the element is null, a shorthand can be used:

<rect x="10" y="10" width="50" height="30"></rect>
<rect x="10" y="10" width="50" height="30" />

The slash before the closing > in the second line indicates that the element does not have any content. Effectively, all the content is encapsulated in the name of the element and its attributes. The two examples of the rect element given above are equivalent.

Being an XML application brings many benefits:

  • Interfaces to applications can be established by transforming an application defined in XML into SVG using XSLT.
  • Facilities required by SVG can often be achieved by using XML attributes
  • XML tools can be used to manipulate SVG
  • If SVG had a poorly defined syntax like HTML5 many of these benefits would be lost