SVG (.svg)
Scalable Vector Graphics — the web standard for icons, logos, and illustrations that stay sharp at any size.
- Extension
- .svg
- MIME Type
- image/svg+xml
Last updated
What Is an SVG File?
SVG (Scalable Vector Graphics) is an XML-based vector image format standardised by the W3C in 1999. Unlike raster formats (PNG, JPG), SVG stores images as mathematical descriptions of shapes — coordinates, curves, and fills — rather than pixels.
The key property: an SVG scales to any size with no quality loss. The same SVG file used as a 16×16 favicon and a 2000×2000 hero image looks identical in sharpness.
SVG File Structure
An SVG is plain XML text:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
<text x="50" y="55" text-anchor="middle" fill="white">Hello</text>
</svg>
This produces a blue circle with "Hello" text. Because it is text, SVGs are:
- Editable in any text editor
- Styleable with CSS
- Animatable with CSS or JavaScript
- Accessible — screen readers can read SVG text and alt attributes
- Tiny — a complex logo as SVG is often 5–50 KB; the equivalent high-res PNG might be 200 KB–2 MB
SVG vs PNG: When to Use Each
| Use Case | Best Format | Reason |
|---|---|---|
| Logo (any size) | SVG | Scales perfectly; tiny file |
| Icon set | SVG | Single file, CSS controllable |
| Illustration | SVG | If created in vector editor |
| Photograph | PNG or JPG | SVG cannot efficiently represent photos |
| Screenshot | PNG | Pixel-accurate reproduction |
| Email images | PNG | Some email clients block SVG |
Browser Support
SVG is supported in all modern browsers. Inline SVG (embedded directly in HTML) is the most powerful approach — it allows CSS styling and JavaScript interaction without an extra network request.