XML Prologs and Document Types

Standalone SVG (.svg files) uses the XML syntax. XML is rather out of fashion in web development today, so many web developers switching to SVG can get tripped up by the differences between XML and the more forgiving HTML parser.

We cover the two most important aspects of SVG-as-XML in the book:

XML namespaces, which must be declared in your markup using xmlns and xmlns:xlink attributes, and must be used in the namespace-sensitive DOM methods like createElementNS().
Strict syntax parsing, such as always closing your elements and quoting your attributes.

But there are other features of XML which can sometimes show up in your SVG files.

Although it is not required, an SVG file may start with an XML declaration, indicating the XML version used and the character encoding. The following explicitly declares the default (version 1.0) XML syntax in a file with a UTF-8 Unicode character set:

<?xml version="1.0" encoding="UTF-8" ?>

The XML declaration is only required if you are using a non-Unicode character encoding (technically, anything other than UTF-8 or UTF-16). We always use UTF-8, so we don’t often use an XML declaration. If used, the declaration should always appear on the first line of the file.

You may also include an SGML DOCTYPE declaration, but it is no longer recommended for SVG. The DOCTYPE points to the document type definition of the SVG file format, and is used by some validators and code editing tools. However, some of these validation tools will not recognize perfectly valid XML content from non-SVG namespaces.

Note

SGML is the Standard Generalized Markup Language, the parent language for both HTML and XML. It created the idea of elements defined by angle brackets (< and >), with attributes defining their properties.

SGML document type definitions (DTD files) are machine-readable files that define what elements are allowed for that document, what attributes they can have, and whether they have start and end tags, and if so what other types of elements can be included in-between. The DOCTYPE declaration indicates which DTD files to use.

If you do include the DOCTYPE, it should appear on a line in between the XML declaration and the starting <svg>, and should exactly match the following (except that the amount of whitespace is flexible):

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Tip

If you copy SVG code into another file, such as an HTML 5 document, don’t include the document type or the XML declaration. They are only valid at the start of a file.

The DOCTYPE and the XML declaration are part of the XML prolog, which includes all parts of the file before the root (<svg>) element.

The XML prolog can also include comments (many software programs add a “created by” comment) and other XML processing instructions before the opening <svg>.

As we discuss in Chapter 3, one XML processing instruction you might use is a link to an external stylesheet:

<?xml-stylesheet href="style.css" type="text/css"?>

You will sometimes also see a longer DOCTYPE declaration, which defines extra XML entities (like &custom;) for use as variables in the rest of the code, or even extra element and attribute definitions.

Adobe Illustrator SVG files sometimes use custom XML entities to represent Adobe’s custom XML namespaces. The start of the file looks like this (with extra line-breaks added):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In .
     SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;"
     xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="108px" height="71.931px"
	 viewBox="0 0 108 71.931"
     enable-background="new 0 0 108 71.931" xml:space="preserve">

XML-supporting software will reach the xmlns:x attribute on the <svg>, and will substitute the full namespace URI for the &ns_extend; entity—and so on, for all the other entities.

The SVGO optimizer tool currently can’t handle this type of file. Which is unfortunate, because an Illustrator file that is using these features has obviously not been optimized for the web. You’ll need to either re-export it from Illustrator (using the export for web option), or edit the code directly to remove all the custom entities, and then optimize with SVGO.