image/svg+xml — Scalable Vector Graphics on the Web
Learn about the image/svg+xml MIME type for SVG files, inline SVG, security considerations, and when to choose SVG over raster formats.
Detailed Explanation
image/svg+xml
SVG (Scalable Vector Graphics) is an XML-based vector image format. Unlike raster formats (JPEG, PNG), SVG images are defined by mathematical paths and shapes, so they scale perfectly to any resolution.
MIME Type and Extension
MIME type: image/svg+xml
Extension: .svg
Why SVG?
- Infinite scalability — looks sharp on any screen density
- Small file size for icons and illustrations
- CSS and JS — SVG elements can be styled and animated
- Accessibility — text inside SVG is selectable and searchable
- Editable — change colors and sizes with code
Security Concerns
SVG files can contain embedded JavaScript via <script> tags or event handlers. When accepting user-uploaded SVGs:
- Sanitize — strip all script elements and event attributes
- Serve with CSP — use a strict Content-Security-Policy
- Use
<img>not<object>— browsers block scripts in SVG loaded via<img>
Serving SVG Correctly
Content-Type: image/svg+xml; charset=utf-8
Some servers incorrectly serve SVG as application/xml or text/xml. Using the correct image/svg+xml type ensures proper rendering and enables features like CSS styling of embedded SVG.
When to Use SVG vs Raster
| Content | Best Format |
|---|---|
| Icons, logos | SVG |
| UI illustrations | SVG |
| Photographs | JPEG / WebP / AVIF |
| Screenshots | PNG |
| Complex artwork | PNG or WebP |
Use Case
Use image/svg+xml for logos, icons, charts, and any illustration that needs to look crisp at every resolution. SVG is ideal for design systems and icon libraries because a single file works across all screen densities.
Try It — MIME Type Reference
Related Topics
image/jpeg vs image/png — Choosing the Right Image Format
Image Types
image/webp and image/avif — Next-Generation Image Formats
Image Types
text/plain vs text/html — When to Use Which
Common Types
application/xml vs text/xml — XML MIME Types Explained
Application Types
Font MIME Types — WOFF, WOFF2, TTF, OTF
Best Practices