SVG
Definition
Scalable Vector Graphics – an image format that uses code instead of pixels. SVGs stay perfectly sharp at any size, ideal for logos and icons.
What is SVG?
SVG (Scalable Vector Graphics) is an image format based on mathematical descriptions rather than pixels. Instead of storing colour values for each pixel, SVG describes shapes using coordinates and paths.
The result: images that scale infinitely without losing quality. A logo looks perfect whether it's 20 pixels or 2000 pixels wide.
SVG vs Pixel-Based Images
| Factor | SVG | JPEG/PNG |
|---|---|---|
| Scalability | Infinite | Fixed resolution |
| File size | Small for simple graphics | Depends on resolution |
| Best for | Logos, icons, illustrations | Photos, complex images |
| Animation | Yes (with code) | Limited |
| Editing | Text editor or design software | Image editor only |
| Transparency | Yes | PNG only |
When to Use SVG
Perfect For
- Logos – stay sharp in headers, footers, favicons
- Icons – consistent quality at any size
- Simple illustrations – graphics with flat colours
- Infographics – charts and diagrams
- Animated elements – interactive graphics
Not Suitable For
- Photographs – photos need pixel-based formats
- Complex images – images with many colours and gradients
- Highly detailed artwork – file sizes can balloon
Advantages of SVG
Retina-Ready
No need for 2x images for high-density displays. SVGs are automatically sharp.
Small File Size
Simple SVGs are often just a few kilobytes – smaller than equivalent PNGs.
Styleable with CSS
Change colours, add hover effects, and animate SVGs with CSS – no new file needed.
Accessible
SVGs can include title and description elements for screen readers.
Using SVGs
SVGs can be:
- Embedded directly in HTML
- Used as image sources
- Applied as CSS backgrounds
- Animated with JavaScript
Most design tools export SVG, and online converters can help optimise them.