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 It 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
Loading code...Frequently Asked Questions
What is the difference between SVG and PNG?
SVG is a vector format using mathematical descriptions that scales infinitely without quality loss, while PNG is a raster format made of pixels that becomes blurry when scaled up. SVG is ideal for logos and icons; PNG is better for photographs.
Can I edit SVG files with a text editor?
Yes, SVG files are XML-based and human-readable, so you can open and edit them with any text editor. You can modify shapes, colors, paths, and add animations directly in the code.
How do I include SVG in an HTML page?
You can include SVG in HTML in several ways: inline SVG directly in the HTML, as an img src, as a CSS background-image, using the object or embed tags, or via an iframe. Inline SVG allows for CSS styling and JavaScript manipulation.
Why is my SVG file larger than expected?
SVG files can become large due to unnecessary metadata, complex paths, embedded raster images, or inefficient code from design tools. Use SVG optimization tools to remove unnecessary data and simplify paths.
Can SVG images be animated?
Yes, SVG supports animation through SMIL (Synchronized Multimedia Integration Language), CSS animations, or JavaScript. You can animate any SVG attribute including position, size, color, and path shapes.