SVG file format
Scalable Vector Graphics, an XML-based vector image format.
- MIME type
- image/svg+xml
- Extensions
- .svg
- Category
- Images
Magic-number signature
Plain-text XML containing a `<svg` element (often preceded by `<?xml`).
About the SVG format
SVG describes images as vector shapes in XML, so they scale to any size without blurring and can be styled and animated with CSS. Because it is plain text there is no binary magic number — it is identified by an XML declaration or a `<svg` element near the start.
Header layout, byte by byte
| Offset | Length | Field | Meaning |
|---|---|---|---|
| 0 | 3 | UTF-8 byte-order mark | EF BB BF, optional, and the only thing XML allows before the declaration. A few older parsers and some server configurations still reject it, which makes it a recurring reason an otherwise valid SVG will not render. |
| 0 | 2 | UTF-16 byte-order mark | FF FE for little-endian or FE FF for big-endian. Unlike the UTF-8 mark this one is not optional: XML requires a BOM on UTF-16 content. UTF-16 SVGs are rare and break every tool that assumes one byte per character. |
| 0 | 5 | XML declaration opener | 3C 3F 78 6D 6C, the characters that start the declaration. XML requires it, when present at all, to be the very first thing in the document — so offset 0, or offset 3 behind a UTF-8 BOM. It is optional for UTF-8 content, which is why no detector can insist on it. |
| 0 | 5 | DOCTYPE opener | 3C 21 44 4F 43. Older files from Illustrator and Inkscape open with a DOCTYPE naming the SVG 1.1 DTD. It sits at offset 0 only when there is no BOM and no declaration, and immediately after the declaration otherwise. SVG 2 dropped the DTD, so new files carry none. |
| 0 | 4 | Root element start tag | 3C 73 76 67. This lands at offset 0 only in a file with no BOM, no declaration, no DOCTYPE and no leading comment — XML permits all four in front of it, so the offset genuinely is not fixed. Detectors scan the first few hundred bytes for the string rather than testing a position. |
Telling it apart from its neighbours
| Easily confused with | How to tell |
|---|---|
| GZIP | An .svgz is a gzipped SVG, so it opens 1F 8B 08 and contains no readable markup at all. Servers send it with a gzip Content-Encoding header and browsers inflate it transparently; in a hex editor it is simply a gzip member, whose stored file name, if the writer set one, ends in .svg. |
| XML | SVG is XML, so every generic XML test passes on it and tells you nothing. The only thing that separates them is the root element name: the first tag that is not a declaration, DOCTYPE, comment or processing instruction has to be the svg element. An svg element nested inside some other root is not an SVG document. |
| HTML | HTML5 allows svg elements inline, so an HTML page can contain the exact byte string that identifies SVG. Look at what the root actually is: a leading DOCTYPE html, or an html start tag, means the file is HTML that happens to contain a drawing, and it must be served as text/html rather than image/svg+xml. |
| PNG | Not confusable at byte level — 89 50 4E 47 against readable text — but confused constantly in practice, because 'export as SVG' in several design tools emits an SVG whose entire content is one image element holding a base64 PNG. The file is a genuine SVG, the graphic inside it is still a raster, and it will not scale. |
How these files break
- A stray ampersand. XML uses draconian error handling, so one unescaped & in a URL inside an href attribute makes the whole document not well-formed and the browser renders nothing at all rather than the first 95 percent of the drawing. It has to be written as &, every time.
- Missing namespace. Drop the xmlns attribute pointing at http://www.w3.org/2000/svg from the root element and the file still parses as valid XML and still opens in a text editor, but renders as a blank page in every browser. It is the most common reason a hand-edited SVG suddenly stopped working.
- Encoding mismatch. The declaration claims UTF-8 while the file was saved as Latin-1 or Shift-JIS. Text elements come out as mojibake, or the parser aborts on the first invalid sequence — and the bytes worth inspecting are the ones inside the text elements, not anything in the header.
- Truncation. A half-written closing svg tag is a fatal well-formedness error, so unlike a truncated PNG there is no partial render to look at. The tell is at the end of the file: an intact SVG finishes with a closing svg tag and usually a newline.
- A byte-order mark where it does not belong. In front of a declaration that names a different encoding it is a conflict; inside an SVG being inlined into an HTML page the three bytes become visible whitespace and can shift the layout around them.
Where the format stands today
SVG is the only vector image format the web ever agreed on, and after twenty-five years it still has no competitor. Icons, logos, charts, diagrams and illustrations all ship as SVG because one file stays sharp at every pixel density and can be recoloured from CSS; icon fonts, which solved the same problem around 2012, have essentially disappeared. Where SVG is the wrong tool is photographic content — tracing a photo produces a file larger and slower to paint than the JPEG it came from — and artwork with many thousands of paths, where the per-element DOM cost outweighs the size win. It is also an active attack surface, because an SVG can carry script and external references, so files accepted from users have to be sanitised before they are served back.
Open SVG files on this site
Every one of these runs in your browser — the file never leaves your machine.
Related formats
Formats that are easy to confuse with SVG — compare their leading bytes.