What is SVG?
SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics that supports interactivity and animation. Unlike raster images, SVG graphics can be scaled to any size without losing quality.
Quick Facts
| Full Name | Scalable Vector Graphics |
|---|---|
| Created | 2001 (W3C Recommendation) |
| Specification | Official Specification |
How SVG Works
SVG was developed by the W3C and became a recommendation in 2001. It defines graphics using mathematical descriptions of shapes, paths, and text rather than pixels. This makes SVG ideal for logos, icons, illustrations, and responsive web design. SVG files can be styled with CSS, manipulated with JavaScript, and include accessibility features. Modern browsers natively support SVG, and it can be embedded directly in HTML or used as an image source.
Key Characteristics
- Vector-based - scales infinitely without quality loss
- XML format - human-readable and editable as text
- Supports CSS styling and JavaScript manipulation
- Smaller file size for simple graphics compared to raster
- Native browser support without plugins
- Supports animation, interactivity, and accessibility
Common Use Cases
- Website logos and icons
- Responsive web graphics
- Data visualizations and charts
- Interactive diagrams and maps
- Print-quality illustrations
Example
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Circle -->
<circle cx="50" cy="50" r="40" fill="#3498db" />
<!-- Rectangle -->
<rect x="10" y="10" width="30" height="30" fill="#e74c3c" />
<!-- Path -->
<path d="M10 80 L50 20 L90 80 Z" fill="#2ecc71" />
<!-- Text -->
<text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
</svg>