SVG (Scalable Vector Graphics)
SVG adalah format gambar vektor berbasis XML yang dapat diskalakan ke resolusi apa pun tanpa kehilangan kualitas. Format ini ideal untuk logo, ikon, ilustrasi, dan grafik interaktif di web. File SVG dapat diberi gaya dengan CSS, dianimasikan dengan JavaScript, dan sepenuhnya dapat dicari serta diakses.
Tipe MIME
image/svg+xml
Tipe
Teks
Kompresi
Lossless
Kelebihan
- + 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)
Kekurangan
- − Not suitable for photographs or complex raster images
- − Complex SVGs can be large and slow to render
- − Security concerns when accepting user-uploaded SVGs
Kapan Menggunakan .SVG
Gunakan SVG untuk logo, ikon, ilustrasi, bagan, dan grafik apa pun yang perlu diskalakan sempurna pada resolusi apa pun atau diberi gaya dengan CSS.
Detail Teknis
SVG menyimpan gambar sebagai teks XML yang mendeskripsikan bentuk geometris, path, dan teks. Format ini mendukung filter, gradien, clipping path, mask, dan gambar raster tertanam.
Riwayat
SVG dikembangkan oleh W3C dan pertama kali dirilis sebagai rekomendasi pada tahun 2001. SVG 1.1 menjadi standar yang diadopsi secara luas pada tahun 2003, dengan SVG 2 saat ini dalam pengembangan.
Konversi dari .SVG
Konversi ke .SVG
Format Terkait
Istilah Terkait
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, …