The file as XML
| Part | What it is |
|---|---|
| Byte order mark | Optional. UTF-8 (EF BB BF), UTF-16 or UTF-32. Most SVG files have none and are UTF-8. |
| XML declaration | <?xml version="1.0" encoding="UTF-8" standalone="no"?>. Optional for UTF-8 and UTF-16. When present it is the very first thing in the file. |
| Comments and processing instructions | Editors put their name in a comment (<!-- Generator: Adobe Illustrator … -->). <?xml-stylesheet href="…"?> attaches an external style sheet. |
| Document type | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">. SVG 2 has no DTD and advises leaving the line out; browsers never fetch the DTD. An internal subset may declare entities such as &ns_svg; (older Adobe Illustrator files do this). |
| Root element | svg in the namespace http://www.w3.org/2000/svg. |
The file has to be well-formed XML: a single root, every tag closed, attributes
quoted, < and & escaped. A browser shows nothing but an
error for a file that is not, and the explorer lists each well-formedness error and
still shows the file as far as it can. HTML entities such as
are not defined in XML: use  .
Names and media types
| Item | Value |
|---|---|
| Extensions | .svg; .svgz for a gzip-compressed file |
| Media type | image/svg+xml (registered with IANA). A web server must send it, or the browser may show the file as text or refuse it in <img>. |
| Compressed on the web | A server sends a .svgz with Content-Type: image/svg+xml and Content-Encoding: gzip. Without the encoding header browsers do not unpack it. |
| Magic numbers | None. A .svg begins with < or the XML declaration; a .svgz with the gzip bytes 1F 8B. |
| Apple | Uniform Type Identifier public.svg-image. |
.svgz
A .svgz file is an ordinary SVG file compressed with gzip (RFC 1952: a
header starting 1F 8B 08, Deflate data, a CRC-32 and the original size). Nothing else
is added: gunzip drawing.svgz gives drawing, which is the
SVG. The same is true of other XML formats compressed this way
(.emz, .wmz). SVG text compresses well, because it is repetitive. The explorer opens a .svgz as a gzip file, reading every gzip
field, and offers the payload as drawing.svg, which opens as an SVG with
its picture, tree, tables and problems. Several gzip members joined together are
valid and read as one SVG.
Embedded files: data URIs
A file can be written inside an attribute: href="data:image/png;base64,iVBOR…".
The form is data:[media type][;base64],data; without ;base64 the
data is percent-encoded text, which is how SVG inside SVG is often written
(data:image/svg+xml,%3Csvg …). Base64 uses the letters A to Z, a to z,
digits, + and /, with = padding, and makes the
data a third larger. White space inside is ignored.
Editors use this for photos in a drawing, for fonts in @font-face, and
when an SVG must be one self-contained file. The explorer lists each embedded image
(type and size) under Resources and its Open button decodes it and opens it as a file
of its own: a PNG shows in the PNG viewer, a JPEG in the JPEG viewer.
Showing an SVG safely
An SVG is a document that can hold script, load other files and link to anywhere. How it is displayed decides what it may do:
| Shown as | Scripts | Outside files | Animation | Interaction |
|---|---|---|---|---|
<img src>, CSS background-image, an image element, a blob in an <img> | no | no (only data: inside it) | yes (SMIL and CSS) | no: no clicks, links or hover |
| Inline in HTML | yes, as the page’s own code | yes | yes | yes |
<object>, <iframe>, <embed>, or opened as a page | yes, inside its own origin | yes | yes | yes |
The explorer’s Picture tab gives the browser the file’s bytes as an image, from a
blob address, in an <img> element. The SVG text is never put into
the page, so a script inside the file cannot run and cannot reach the page. What the
file has that would run elsewhere (script elements, event attributes,
javascript: links, foreignObject, external addresses) is
listed on the Code and Features tabs. An SVG with no xmlns is not drawn in
an <img>, which the explorer reports as a problem.
Not described
This page is partial.
- Reference: the display-mode table (what scripts, outside files and animation do in each) is from knowledge of browser behaviour and was not tested on every browser. Content security policy, MIME sniffing and server configuration are not described. Other compressed forms (
.emz,.wmz) are only named. - Viewer: a
.svgzis read as a gzip file and its payload is opened as an SVG; a gzip file with another name and an SVG inside is not recognised as one by name. Embedded images are decoded when opened, and the type given in thedata:address is trusted for the table.