SVG (Scalable Vector Graphics)
SVG is an XML-based vector image format that scales to any resolution without quality loss. It is ideal for logos, icons, illustrations, and interactive graphics on the web. SVG files can be styled with CSS, animated with JavaScript, and are fully searchable and accessible.
MIME Type
image/svg+xml
Type
Text
Compression
Lossless
Advantages
- + Infinite scalability without quality loss
- + Tiny file sizes for simple graphics
- + Styleable with CSS and scriptable with JS
- + Accessible and SEO-friendly (text is selectable)
Disadvantages
- − Not suitable for photographs or complex raster images
- − Complex SVGs can be large and slow to render
- − Security concerns when accepting user-uploaded SVGs
When to Use .SVG
Use SVG for logos, icons, illustrations, charts, and any graphic that needs to scale perfectly at any resolution or be styled with CSS.
Technical Details
SVG stores images as XML text describing geometric shapes, paths, and text. It supports filters, gradients, clipping paths, masks, and embedded raster images.
History
SVG was developed by the W3C and first released as a recommendation in 2001. SVG 1.1 became the widely adopted standard in 2003, with SVG 2 currently in development.
Convert from .SVG
Convert to .SVG
Related Formats
Related Terms
Learn More
Color Theory for Digital Design: A Practical Guide
Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility …
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units …
Image Format Guide: JPEG vs PNG vs WebP vs AVIF
Choosing the right image format affects file size, quality, and browser compatibility. This comparison covers the strengths of JPEG, PNG, …
QR Code Generation: Best Practices for Print and Digital
QR codes bridge physical and digital experiences, but poorly generated codes fail to scan. This guide covers sizing, error correction, …
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and …
How to Convert Images Between Formats
A practical guide to converting between image formats like JPEG, PNG, WebP, SVG, and HEIC. Learn which conversions are lossless, …