About SVG Files
SVG Vector Image
SVG is an XML-based vector image format that scales to any resolution without quality loss. It is the standard for web icons, logos, and illustrations that need to look sharp on all screen sizes.
Family
Raster & Vector Images
Extension
.svg
MIME Type
image/svg+xml
Can Use As
HOW SVG
CAME TO BE.
SVG — Scalable Vector Graphics — emerged from a 1999 W3C working group as the open answer to Adobe's proprietary Flash and SMIL. Unlike every other image format on this list, an SVG file is plain XML: a text document that describes shapes, strokes, and gradients as mathematical instructions rather than a grid of pixels. That means an SVG icon looks pin-sharp at any zoom level, from a favicon to a billboard.
The format struggled in the early 2000s due to patchy browser support, but when smartphones arrived with high-density Retina displays and responsive design became the norm, SVG was perfectly positioned. It is now the default format for logos, icons, charts, and UI illustrations across the web.
CURIOSITIES &
TRIVIA.
An SVG file is just text — you can open one in any text editor and read the shape definitions.
SVG supports animations via SMIL, CSS keyframes, or embedded JavaScript.
A single SVG icon is often smaller than a 32×32 PNG because it describes the shape, not pixels.
SVG can embed raster images inside it using base64-encoded JPEG or PNG.
Because SVG is XML, it can contain JavaScript — which has made uploaded SVGs a classic XSS vector.
STRENGTHS &
LIMITATIONS.
Strengths
- Resolution-independent — crisp at any size, from 16px icon to 4K billboard.
- Tiny file sizes for flat graphics, logos, and UI illustrations.
- Editable with any text editor; programmatically manipulable via DOM.
- Supports interactivity, CSS styling, and JavaScript inside the image.
- Accessible — text inside SVG is readable by screen readers.
Limitations
- Not suitable for photographs or complex raster imagery.
- Uploading user-provided SVG is risky — embedded scripts are an XSS vector.
- Complex SVGs with thousands of paths render more slowly than a PNG equivalent.
- Inconsistent rendering across browsers for edge-case features (filters, gradients).
- No native concept of layers or groups for design-tool round-tripping.
Typical Sizes & Weights
Simple icon
200 B – 2 KB
Company logo
2–10 KB
Complex illustration
20–100 KB
Data-visualization chart
50–500 KB
Technical Specifications
- MIME type
- image/svg+xml
- Format
- XML (text-based)
- Current version
- SVG 2 (W3C Recommendation, 2018)
- Compression
- Gzipped variant is .svgz
- Resolution
- Unlimited (vector)
- Animation
- SMIL, CSS, JavaScript
CONVERT FROM
SVG
Common Use Cases
Web icons, logos, scalable illustrations, interactive graphics.
Related Formats
Popular comparisons
SVG vs PNG
Differences, file size, and when to choose each format.
SVG vs JPG
Differences, file size, and when to choose each format.
SVG vs WEBP
Differences, file size, and when to choose each format.
SVG vs AVIF
Differences, file size, and when to choose each format.
SVG vs GIF
Differences, file size, and when to choose each format.
SVG vs BMP
Differences, file size, and when to choose each format.
Popular SVG conversions
The most-requested destinations when starting from SVG.
Frequently Asked Questions about SVG
Frequently Asked Questions
SVG (Scalable Vector Graphics) is an XML-based vector image format maintained by the W3C since 1999. Unlike raster formats, SVG images scale to any size without quality loss, making them perfect for responsive web design.
SVG files open in all web browsers, Adobe Illustrator, Inkscape (free), Figma, and most modern design tools. You can also open SVGs with any text editor since they are XML-based.
Use SVG for logos, icons, and illustrations that need to scale across different screen sizes. Use PNG for complex images like photographs where vector representation is impractical. SVG files are typically much smaller for simple graphics.