.svg — Scalable Vector Graphics
A text-based vector image format for icons, diagrams, logos, and scalable artwork.
About this format
SVG describes graphics as XML: paths, shapes, gradients, text, filters, and metadata instead of pixels. That makes it ideal for icons, logos, diagrams, and maps that must stay sharp at any size.
SVG is powerful because it is both an image and a document. That also means untrusted SVG can contain scripts, external references, and complex filters. Production workflows should optimize and sanitize SVG before publishing.
Real-world samples & file sizes
Three externally sourced SVG files stored locally: a small icon, a square logo, and a wide badge. SVG renders natively in the browser and can also be downloaded as the original vector file.
Public Domain Symbol
A tiny vector icon that stays sharp at any display scale.
Public Domain Map Logo
A medium-size vector logo that remains sharp at any rendered size.
No Rights Reserved Mark
A wider vector badge sample with text and simple geometry.
Attribution metadata is mirrored in public/samples/svg/attribution.json.
Pros
- +Scales without pixelation
- +Great for icons, logos, diagrams, and maps
- +Can be styled, compressed, and inspected as text
- +Browser-native and usually tiny for simple artwork
Cons
- −Bad fit for photos
- −Complex SVGs can be huge and slow
- −Untrusted SVG needs sanitizing before use
- −Fonts and filters may render differently between apps
Where it works
- macOS ✅
- Windows ✅
- Linux ✅
- iOS ✅
- Android ✅
- Chrome ✅
- Firefox ✅
- Edge ✅
- Safari ✅
- Figma ✅
- Illustrator ✅
- Inkscape ✅
- Sketch ✅
- Most CMS uploaders ⚠️
Related tools
Frequently asked questions
- Is SVG an image or code?
- Both. SVG is an XML document that browsers render as an image, which is why SVG is easy to edit but should be sanitized when it comes from untrusted sources.
- Should I use SVG for photos?
- No. Use raster formats such as AVIF, WebP, JPG, or PNG for photos. SVG is best for shapes, icons, diagrams, and maps.