In this article · 8 sections
SVG (Scalable Vector Graphics) is an image format made of shapes and paths instead of pixels. That makes SVG ideal for logos, icons, simple illustrations and charts. They stay perfectly sharp on any screen and are often just a few kilobytes. Here's a practical guide to SVG for web design.
SVG vs PNG/JPG/WebP
| SVG | PNG/JPG/WebP | |
|---|---|---|
| Made of | Vectors (shapes) | Pixels |
| Scales without blur | Yes | No |
| Best for | Logos, icons, illustrations, charts | Photos |
| Style with CSS | Yes (inline) | No |
| File size | Tiny for simple graphics | Larger for graphics |
Use SVG for graphics; use WebP/JPG for photos.
Ways to add SVG
1. As an image
<img src="/images/logo.svg" alt="Joboo Web" width="160" height="46">
Simple and cacheable. You can't change colours with CSS this way.
2. Inline SVG
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 12h18M12 3v18" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
Styleable with CSS (currentColor inherits text colour), animatable, no extra request. Best for icons.
3. SVG sprite
Many icons in one file, referenced with <use href="#icon-phone">. Efficient for icon-heavy sites.
4. CSS background
Good for decorative patterns.
Optimise your SVG files
SVGs exported from design tools often include unnecessary metadata. Run them through an optimiser like SVGO (or SVGOMG in the browser) to remove it. Typical savings are significant.
Also:
- Keep a viewBox so the SVG scales properly
- Remove fixed width/height inside the file if you size it with CSS
- Simplify complex paths where possible
Accessibility
- Meaningful SVG images:
alton<img>, orrole="img"with<title>for inline SVG - Decorative icons next to text:
aria-hidden="true"
See icons in web design.
Security note
SVG files can contain scripts. If users can upload SVGs to your website (e.g. in an admin panel or form), sanitise them or block SVG uploads. Only use SVGs from trusted sources.
Animating SVG
Inline SVG can be animated with CSS (stroke drawing effects, colour changes, rotations) for loaders and small interactions. Keep animations subtle and respect reduced motion. See CSS animation tutorial.
Logo tip
Ask your designer for an SVG version of your logo. It looks sharper in the website header and works for print, signage and vehicle branding too. See favicon size guide.
FAQs
Does Google index SVG images?
Google can index SVG files, but photos in raster formats are more common in image search. Use SVG mainly for interface graphics.
Can I convert a PNG logo to SVG?
Auto-tracing works for simple logos; complex logos are better redrawn by a designer.
Joboo Web uses lightweight SVG icons and logos in every build for crisp, fast pages. Get in touch.