SVG
Scalable Vector Graphics
MIME type: image/svg+xml
SVG is an XML-based vector image format for 2D graphics. Unlike raster formats, SVG images can be scaled to any size without losing quality, making them perfect for logos, icons, and responsive web graphics.
Advantages
- +Infinitely scalable without quality loss
- +Tiny file sizes for simple graphics
- +Editable with any text editor
- +Supports CSS styling and JavaScript animation
Limitations
- -Not suitable for photographs
- -Complex SVGs can be large and slow to render
- -Security concerns when accepting user-uploaded SVGs
- -Inconsistent rendering across browsers for complex features
Common Use Cases
Technical Details
SVG is defined in XML and describes 2D graphics using paths, shapes, text, and embedded raster images. Paths use a compact command syntax (M, L, C, Z) for move, line, curve, and close operations. SVG supports gradients, filters, clipping, masking, and SMIL animations natively. Files can be compressed with gzip (served as .svgz) for 50-80% size reduction.
Frequently Asked Questions
When should I use SVG vs PNG?
Use SVG for logos, icons, illustrations, and any graphic that needs to look sharp at multiple sizes. Use PNG for screenshots, photographs, and complex raster images. SVGs are typically much smaller for simple graphics.