image/svg+xml SVG Flagship

What it's for

image/svg+xml identifies SVG (Scalable Vector Graphics) images — a fundamentally different kind of image format from JPEG/PNG/GIF, since SVG describes an image as a set of mathematical shapes, paths, and text rather than a grid of pixels. This makes SVG infinitely scalable with no quality loss at any size or zoom level, and is why it's the standard choice for icons, logos, and diagrams that need to look crisp on any screen resolution.

Being XML-based (hence the +xml in the MIME type, following the same convention as other XML-based formats), SVG files are also human-readable text, can be styled with CSS, animated, and even embedded directly inline in HTML — capabilities no raster image format offers.

Format & syntax

Content-Type: image/svg+xml

SVG is XML, so it inherits XML's strict well-formedness rules — matched tags, quoted attributes, escaped special characters. A minimal SVG looks like:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

SVG can be referenced as an external file (<img src="icon.svg">), embedded inline directly in HTML (giving you CSS/JS access to individual SVG elements), or used as a CSS background-image.

How it's used in practice

• Icons and logos — the standard modern choice for icon systems and logos specifically because they scale perfectly across any display density (including high-DPI/retina screens) without needing multiple raster image sizes.
• Inline embedded graphics with CSS/JS interactivity — embedding SVG directly in HTML (rather than as an external <img> reference) lets you target individual SVG elements with CSS for styling/hover states, or manipulate them with JavaScript for interactive graphics and data visualizations.
• Data visualizations and charts — many charting libraries render output as SVG specifically to get crisp, scalable, stylable graphics with built-in interactivity hooks.
• Favicons and responsive image assets — modern favicon setups and responsive image strategies increasingly include an SVG variant alongside raster fallbacks, since one SVG file can replace an entire set of differently-sized raster assets.

Common mistakes & gotchas

• SVG's XSS/security risk when accepting user-uploaded SVGs — because SVG can contain embedded JavaScript (<script> tags) and event handlers, allowing arbitrary user-uploaded SVG files to be served or rendered directly is a genuine, well-documented XSS attack vector. User-uploaded SVGs should be sanitized (stripping scripts and dangerous attributes) before being served, or converted to a raster format entirely if that risk isn't worth managing.
• Malformed XML breaking the entire image — like any XML document, a single unclosed tag or unescaped special character in an SVG can cause the whole image to fail to render, unlike raster formats which typically degrade more gracefully (or not at all) with minor corruption.
• Confusing viewBox and width/height attributes — SVG's scaling behavior is controlled by the viewBox attribute (defining the internal coordinate system) versus the width/height attributes (defining the rendered display size); mixing these up is one of the most common sources of unexpectedly cropped, stretched, or oddly-scaled SVG rendering.
• Assuming SVG is always the better choice regardless of content — SVG is excellent for simple shapes, icons, and diagrams, but poorly suited for photographic or highly complex, painterly imagery — trying to represent a photograph as vector paths produces enormous, impractical file sizes compared to a raster format.

Comparison & FAQ

Is it safe to let users upload SVG files directly?

Not without sanitization — SVG can contain embedded scripts and event handlers, making unsanitized user-uploaded SVG a real XSS attack vector. Strip dangerous content server-side before serving user-uploaded SVGs, or convert them to a raster format if you want to avoid the risk entirely.

Why does my SVG look cropped or stretched when I resize it?

Almost always a viewBox vs. width/height mismatch — the viewBox defines the internal coordinate system the shapes are drawn in, while width/height control the actual rendered size; getting these out of sync causes unexpected scaling or cropping.

Should I use SVG or PNG for my app's icon set?

SVG, in almost every modern case — it scales perfectly across any display density with a single file, versus needing multiple PNG sizes for different resolutions. PNG remains preferable only for icons requiring genuinely photographic or highly complex detail that doesn't translate well to vector shapes.

Can SVG files contain JavaScript?

Yes — SVG supports <script> tags and event handler attributes, which is powerful for interactive graphics but also exactly why unsanitized user-uploaded SVG files are a security risk if served or rendered without stripping that capability first.