SVG Concepts > SVG Document

Print this Page             Close Window

SVG Document

An SVG document is a plain text containing the SVG code, similar to an HTML page.

An SVG document is defined and stored in a file with ".svg" as the file extension.

An SVG document can be compressed using gzip format for faster download. A compressed SVG file has the ".svgz" file extension.

An SVG document is, at its core, an XML document. It must adhere to the following XML rules:

  • All tags must have a start and end tag, or must be noted as an empty tag. Empty tags are closed with a backslash, as in <rect />.

  • Tags must be nested properly. If a tag is opened within another tag, it must be closed within that same tag. For example, <g><text>Hello there !</text></g> is correct, but <g><text>Hello there ! </g></text> is not.

  • The document must have a single root. Just as a single <html></html> element contains all content for an HTML page, a single <svg></svg> element contains all content for an SVG document.

  • The document should start with the XML declaration, <?xml version="1.0"?>.

  • The document should contain a DOCTYPE declaration, which points to a list of allowed elements.

An SVG document can comprise of: geometric objects (basic shapes, paths, text), styling, transformations, filters, animation and interactivity. All the elements must be contained within a <svg> outermost element.

There are three ways of defining SVG in a Web document:

  • as a standalone SVG page (with an SVG-enabled web browser or via an SVG plug-in)
  • as an embedded element within an HTML/XHTML document
  • as one component in a multi-namespace XML application with a namespace declaration - It can multiply the power of each of the namespaces used, and allow innovative new content to be created.