SVG: Scalable Vector Graphics

Halo selamat datang di Identips!, Scalable Vector Graphics menjadi salah satu ekstensi grafis berbasis vektor yang paling populer dan banyak digunakan untuk keperluan desain UI web beberapa tahun terakhir. Grafis vektor sendiri merupakan gambar yang dibentuk oleh kombinasi titik dan garis berdasarkan perhitungan matematis, berbeda dengan grafis raster atau bitmap yang terbentuk dari susunan pexel.

Apa itu SVG?

Scalable Vector Graphics atau lebih dikenal dengan SVG adalah format grafik berbasis vektor yang menggunakan eXtensible Markup Language (XML) sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG menjadi standar web terbuka berbasis teks yang dirancang khusus untuk untuk menampilkan gambar yang dapat dirender dalam berbagai ukuran dengan rapi dan dapat bekerja dengan standar web yang lainnya seperti CSS, DOM, JavaScript dan SMIL. Karena menggunakan tag XML, maka SVG dapat dicari, di-index, ditulis dengan bahasa pemograman, dikompres.

{{< ads >}}

Contoh Gambar SVG

Berikut contoh kode gambar lingkaran dengan SVG.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="purple" fill="yellow">
  <circle cx="50" cy="50" r="40" />
</svg>

kode tersbut diatas akan dirender menjadi seperti ini

Kelebihan SVG

Beberapa kelebihan SVG diantaranya:

• Jika dibandingkan dengan format gambar bitmap klasik seperti JPEG atau PNG , format gambar vektor SVG dapat dirender dalam berbagai ukuran tanpa kehilangan kualitas.
• SVG dapat diedit dengan dengan mudah hanya dengan cara mengubah teks di dalamnya menggunakan aplikasi text editor apapun (termasuk Notepad) tanpa memerlukan aplikasi editor grafis.
• Ukuran file SVG lebih kecil jika dibandingkan gambar bitmap seperti JPEG atau PNG.

Lihat perbandingaan gambar bitmap dan gambar vektor pada artikel Grafis Bitmap dan Vektor.

Aplikasi/Software untuk membuat SVG

Sebenarnya kamu dapat membuat SVG hanya dengan menggunakan text editor seperti Notepad, akan tetapi kamu juga dapat menggunakan software desain grafis berbasis vektor seperti Adobe Illustrator dan Corel Draw.

Penggunaan SVG

SVG dapat digunakan untuk beberapa kasus seperti:

1. Ilustrasi dan Diagram

   Menggunakan SVG menurut saya merupakan salah satu metode terbaik dalam membuat ilustrasi maupun diagram. Dengan menambahkan CSS atau Javascript kedalam diagram dibuat menggunakan SVG akan membuat diagram tersebut menjadi lebih interaktif.

2. Logo dan Ikon

   Untuk membuat gambar yang notabennya harus tajam dan jelas seperti logo dan ikon, SVG merupakan pilihat terbaik karena sifatnya yang dapat diskalakan. Logo dan semua ikon yang ada di Identips juga dibuat menggunakan SVG.

3. Animasi

   Kamu dapat membuat Animasi SVG dengan memanfaatkan CSS, Javascript dan SMIL

4. Desain Interaktif

   Kemampuan SVG damal memplot data dan memperbaruinya secara dinamis berdasarkan tindakan pengguna atau peristiwa tertentu membuatnya sangat baik untuk membuat desain interaktif.

5. Special Effect

   SVG juga dapat digunakan untuk membuat efek khusus seperti shape morphing atau Gooey Effect

6. Membangun Interface Aplikasi

   SVG dapat digunakan untuk membangun interface aplikasi web yang canggih dan dapat diintegrasikan langsung dengan HTML5.

Cara membuat SVG

Untuk membuat SVG kamu bisa menggunakan software pengolah gambar berbasis vektor atau bisa juga menggunakan software text editor. Caranya sudah saya tulis dalam artikel yang berbeda. Silahkan klik link berikut untuk melihat.

1. Cara Membuat SVG Menggunakan Text Editor
2. Cara Membuat SVG Menggunakan Software Desain Grafis

Referensi:

1. https://www.sitepoint.com/svg-101-what-is-svg/
2. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg