{"id":"image-svg-xml","mimeType":"image/svg+xml","name":"Scalable Vector Graphics","shortName":"SVG","category":"Web \u0026 Graphics","extensions":[".svg",".svgz"],"description":"Scalable Vector Graphics (SVG) is the web standard for two-dimensional, XML-based vector graphics. Because it uses mathematical formulas (points, lines, curves, and shapes) rather than a grid of pixels, it scales infinitely without losing quality. The image/svg+xml MIME type is the officially registered IANA identifier. SVGs support CSS styling, DOM manipulation, SMIL animations, and JavaScript interactivity.","seo":{"title":"image/svg+xml MIME Type | Complete Developer Reference \u0026 Magic Bytes","description":"Complete reference for the image/svg+xml MIME type: magic bytes, security risks (XSS), HTTP headers, developer snippets, and technical specifications for SVG files.","faqs":[{"question":"Why is the MIME type image/svg+xml instead of just image/svg?","answer":"The '+xml' suffix is a standardized convention in IANA MIME types indicating that the format is based on XML. This allows HTTP clients and browsers to pass the file through a generic XML parser if a specialized SVG renderer is unavailable. Serving SVGs simply as 'image/svg' violates standards and can cause strict MIME-sniffing browsers to reject the file."},{"question":"What is the magic byte for an SVG file?","answer":"Because SVG is a plain-text XML format, it lacks a traditional binary magic number. Identification relies on reading the first few bytes as ASCII/UTF-8. Files typically begin with the XML declaration (\u003c?xml version=\"1.0\"?\u003e) or the opening tag (\u003csvg\u003e). The hex for '\u003csvg' is 3C 73 76 67."},{"question":"Are there security risks when users upload SVGs?","answer":"Yes. SVG files are essentially HTML-like documents that can contain embedded \u003cscript\u003e tags. If you allow users to upload SVGs and serve them directly from your main domain, attackers can execute Stored Cross-Site Scripting (XSS) attacks. Always sanitize user-uploaded SVGs using tools like DOMPurify, or serve them from a separate, sandboxed CDN domain."}]},"index":{"compression":["Uncompressed (Plain Text XML)","Lossless (GZIP via .svgz)"],"browserSupport":{"score":5,"label":"Universal"},"commonUses":["Web Logos \u0026 UI Icons","Responsive Web Design Elements","Interactive Data Visualizations (D3.js)","CSS and SMIL Web Animations"]},"technical":{"magicBytes":{"hex":"3C 73 76 67 (for \u003csvg) / 3C 3F 78 6D 6C (for \u003c?xml)","ascii":"\u003csvg / \u003c?xml"},"container":"XML Document","compressionAlgorithm":["None (for .svg)","GZIP (for .svgz)"],"colorDepth":["Vector (Independent of bit-depth)","CSS Colors (HEX, RGB, HSL, Display-P3)"],"transparency":true,"animation":true,"metadata":{"exif":false,"xmp":true,"iccProfile":false},"alphaChannel":true,"progressiveLoading":false,"hdrSupport":true},"history":{"developer":"World Wide Web Consortium (W3C)","released":"2001","specification":"W3C SVG 1.1 / SVG 2.0"},"browserSupport":{"chrome":true,"chromeVersion":"All","firefox":true,"firefoxVersion":"All","safari":true,"safariVersion":"All","edge":true,"edgeVersion":"All","internetExplorer":true},"softwareSupport":[{"name":"Adobe Illustrator","logo":""},{"name":"Figma","logo":""},{"name":"Inkscape","logo":""},{"name":"All Modern Web Browsers","logo":""}],"conversion":{"convertTo":["png","eps","webp","jpeg"],"convertFrom":["eps","ai","png (via tracing/vectorization)"]},"developer":{"httpHeaders":[{"header":"Content-Type","value":"image/svg+xml"},{"header":"Content-Encoding","value":"gzip (Required ONLY if serving compressed .svgz files)"}],"htmlAccept":"image/svg+xml, .svg, .svgz","fileDetection":["Check the initial bytes for plain text strings like '\u003c?xml' or '\u003csvg'","Parse the XML structure to ensure the root element is \u003csvg\u003e and belongs to the 'http://www.w3.org/2000/svg' namespace"]},"prosCons":{"pros":["Provides infinite resolution scalability, looking perfectly crisp on high-DPI (Retina) displays without increasing file size","Extremely lightweight compared to raster formats for flat graphics, logos, and UI elements","Can be manipulated dynamically via the browser's CSS and JavaScript engines (DOM integration)"],"cons":["Unsuitable for complex photographic images or photorealistic textures","Poses critical security vulnerabilities (XSS and XML External Entity attacks) if user-uploaded SVGs are not heavily sanitized","Rendering performance degrades significantly if the SVG contains tens of thousands of complex nodes or deeply nested paths"]},"specifications":{"url":"https://www.w3.org/TR/SVG2/","rfc":"RFC 3023 (XML Media Types)","mimeAliases":["image/svg"]},"developerSnippets":{"python":"import magic\nprint(magic.from_file('vector.svg', mime=True)) # May output 'image/svg+xml' or occasionally 'text/xml' depending on the libmagic version","nodejs":"const isSvg = require('is-svg');\nconst fs = require('fs');\n// Binary-focused libraries (like 'file-type') often fail on SVGs. Using regex/string-based validation like 'is-svg' is recommended.\nconsole.log(isSvg(fs.readFileSync('vector.svg'))); // true","go":"import \"net/http\"\n// http.DetectContentType will often misidentify SVGs as \"text/xml; charset=utf-8\". You must write custom detection to check for the \u003csvg\u003e tag.","php":"$mime = mime_content_type('vector.svg');\necho $mime; // Standard setups will identify it as 'image/svg+xml'"},"relatedFormats":["png","webp"]}