Apa itu SVG? – Scalable Vector Graphics atau biasa disebut dengan SVG adalah sebuah format gambar vektor berbasis teks XML. SVG merupakan format gambar yang sudah ada sejak tahun 1990-an, namun pada umumnya format gambar yang terkenal adalah JPG, PNG dan GIF.
SVG di ciptakan oleh W3C (World Wide Web Consortium) dikembangkan sejak tahun 1999 dan mulai di rilis pada tanggal 4 September 2001 dengan versi SVG 1.0 dilanjutkan pada SVG 1.1 dirilis pada 14 Januari 2003 dan SVG 1.1 edisi kedua dirilis pada 16 Agustus 2011.
SVG memiliki banyak kelebihan dibandingkan dengan format gambar yang terkenal saat ini. Terutama jika digunakan untuk menampilkan logo dan ikon pada website. SVG saat ini mulai terkenal digunakan khususnya pada kebutuhan web design, UI dan UX.
Format gambar SVG mampu menjaga kestabilan kualitas dan dapat menyesuaikan ukuran layar. Tidak akan pecah atau blur meskipun sudah kita zoom dan perbesar ataupun perkecil resolusi sampai ke ukuran maksimal.
SVG menggunakan XML untuk mendeskripsikan sebuah gambar berbasis vector. Anda dapat menambahkan beberapa informasi metadata ke dalam gambar SVG, seperti mencantumkan pembuat gambar, deskripsi, tanggal pembuatan dan lain sebagainya.
SVG mulai populer pada tahun 2020 di karenakan beberapa web browser seperti Edge, Safari, Firefox, Opera dan Internet explorer sudah mendukung format gambar SVG.
Keunggulan SVG
Jika dibandingkan dengan format gambar lainnya SVG memiliki keunggulan dan keunikan tersendiri seperti :
- Ketika Anda Zoom tidak akan pecah ataupun blur
- Kualitas gambar akan tetap terjaga
- Memiliki ukuran file yang lebih kecil
- Dapat menyesuaikan layar, dengan kata lain gambar akan selalu presisi ukurannya meski berbeda ukuran layar
- Mampu meningkatkan kecepatan loading website.
Perbandingan ukuran file gambar SVG dengan JPG, PNG dan GIF
Seperti telah di sebutkan pada penjelasan tadi, gambar dengan format SVG memiliki ukuran file yang lebih kecil di bandingkan dengan JPG, PNG maupun GIF. Berikut perbandingan ukuran file SVG dengan ukuran file format gambar lainnya:
Download file untuk melihat perbandingan ukuran file lebih jelas:
Kekurangan SVG
Banyak kelebihan pada SVG bukan berarti tanpa kekurangan, SVG berbasis teks dengan format XML maka terdapat beberapa celah keamanan di dalamnya. File SVG dapat di susupi kode javascript di dalamnya. Tentunya sangat memungkinkan serangan Cross Site Scripting (XSS Vulnerability) pada website yang menyimpan file tersebut. Sebagai contoh file yang sudah disusupi oleh javascript untuk menampilkan pesan tertentu di web browser.
Demikian penjelasan mengenai apa itu SVG? perbandingan, kelebihan dan kekurangannya. Apabila ada pertanyaan dan masukan, silahkan ajukan pada kolom komentar setelah artikel ini. Semoga bermanfaat dan terimakasih!
6 Comments