Scalable Vector Graphics (MIME: image/svg+xml) is an XML-based vector graphics format that renders crisply at any size, making it the standard choice for logos, icons, illustrations, and interactive web graphics.
History and Development
SVG (Scalable Vector Graphics) was developed by the W3C and first released in 2001 (SVG 1.0). SVG 1.1 (2003) became widely adopted. SVG 2.0 development began in 2016. The format gained massive adoption after all browsers achieved full support around 2012, and it became the de facto standard for responsive web graphics.
Technical Specifications
- Format type: Vector (XML text-based)
- Scalability: Infinitely scalable without quality loss
- Animation: SMIL animation, CSS animation, JavaScript
- Interactivity: Supports event handlers and scripting
- Text: Searchable, selectable text
- Filters: Blur, shadow, color manipulation
- CSS styling: Full CSS support for styling elements
Common Use Cases
SVG is essential for logos, icons, infographics, data visualizations (D3.js), maps, and UI components that must look sharp on all screen sizes. Every major design system (Material Design, Bootstrap) uses SVG icons. SVG is also used for animated illustrations and interactive diagrams.
SVG vs Similar Formats
- SVG vs PNG: SVG scales perfectly at any size; PNG becomes pixelated when enlarged. SVG files are often smaller for simple graphics but larger for complex images.
- SVG vs Icon Fonts: SVG icons offer multi-color, better accessibility, and more flexibility than icon fonts.
How to Open and Edit
All modern browsers render SVG natively. Edit with Inkscape (free), Adobe Illustrator, Figma, or Sketch. SVG files are plain text (XML), so they can also be edited in any code editor.
Frequently Asked Questions
Can SVG contain malicious code?
Yes — SVG can include JavaScript. Never embed untrusted SVGs directly in HTML. Sanitize uploaded SVGs or use them as sources, which blocks script execution.
When should I NOT use SVG?
Don't use SVG for photographs or complex raster images. A photo as SVG (auto-traced) produces huge files. Use JPEG, WebP, or AVIF for photographs.