Format Gambar SVG, Pengertian dan Manfaatnya

Format Gambar SVG, Pengertian dan Manfaatnya

Format Gambar SVG – Meskipun sudah ada sejak tahun 90-an, SVG baru dikenal belakangan ini. Statistik yang dikeluarkan oleh W3Techs menunjukkan bahwa pada bulan April 2019, hanya 16.7% website yang menggunakan file SVG. Namun, persentase ini rupanya terus bertambah seiring developer dan pemilik website menginginkan loading yang cepat di website mereka.

Namun, persentase ini rupanya terus bertambah seiring developer dan pemilik website menginginkan loading yang cepat di website mereka. SVG menawarkan banyak kelebihan jika dibandingkan dengan JPEG, PNG, ataupun GIF. Terutama jika digunakan untuk menampilkan logo dan juga icon. Kenapa format gambar SVG mulai populer digunakan untuk kebutuhan web design dan responsive UI ?

Apa Itu SVG ?

Dilansir dari Hostinger, Scalable Vector Graphics atau SVG adalah format gambar vektor berbasis teks XML. Biasanya, gambar-gambar yang kita lihat di internet hadir dalam format, seperti JPG dan PNG. Kedua format ini dibuat dari sejumlah ‘kotak’ berukuran sangat kecil yang disebut piksel. Sedangkan format SVG bergantung pada XML markup untuk menggambarkan garis, bentuk, dan atribut gambar lainnya.

Keunggulan lain jika Anda memilih SVG adalah format ini didukung di banyak platform. Lihat saja bagaimana browser major, seperti Chrome, Firefox, Safari, dan Chrome untuk Android menggunakan file ini.

Hanya saja, jika saat ini Anda menggunakan IE8 atau versi Chrome dan Safari sebelum di-update, Anda mungkin akan mengalami beberapa kendala karena tiga browser tersebut tidak lagi mendukung file SVG. Seharusnya ini tidak jadi masalah karena sebagian besar orang tidak lagi sering menggunakan Internet Explorer.

Rekomendasi Scalable Vector Graphics (SVG) berasal dari W3C. Rekomendasi tersebut menjelaskan cara membuat grafik vektor menggunakan bahasa mark up. Karena SVG didasarkan pada XML, alat yang sudah tahu bagaimana menafsirkan XML akan dapat menafsirkan SVG. Memiliki standar yang mapan ini sebagai fondasi menghemat banyak pekerjaan dalam mendefinisikan bahasa.

Ini juga berarti bahwa ada banyak alat di sekitarnya yang dapat memeriksa struktur dokumen SVG atau membacanya untuk menarik informasi yang menarik. Dibangun di atas XML juga membuatnya lebih mudah untuk menghasilkan SVG secara terprogram dari sumber data XML lainnya menggunakan XSL dan XSLT.

Dokumen SVG tidak lebih dari file teks biasa yang menjelaskan garis, kurva, bentuk, warna, dan teks. Karena dapat dibaca oleh manusia, mudah dipahami dan dimodifikasi, kode SVG dapat dimanipulasi melalui CSS atau JavaScript. Ini memberi SVG fleksibilitas dan keserbagunaan yang tidak pernah bisa ditandingi oleh PNG, GIF atau JPG tradisional.

Mengapa Harus SVG ?

Harus diakui bahwa masih banyak orang yang belum familiar dengan SVG karena format ini tidak dibuat serupa grafis berbasis piksel. Namun, bukan berarti Anda lantas tidak perlu menggunakannya, kan? File SVG punya banyak kegunaan untuk website Anda.

Alasan pertama mengapa menggunakan SVG adalah skalabilitas. Karena pada dasarnya SVG berbasis vektor, kualitas gambarnya akan tetap sama meskipun resolusi layar di tiap perangkat berbeda.

Gambar JPG akan terlihat buram atau kurang jelas di perangkat tertentu karena ukurannya yang tidak terlalu besar. Namun, gambar SVG akan tetap terlihat tajam di semua jenis perangkat. Bahkan Anda bisa memperbesar (zoom in) dan memperkecil (zoom out) gambar sesuka hati tanpa khawatir kualitasnya akan ikut berkurang. Keunggulan ini sangat terasa ketika Anda hendak menawarkan user experience yang sama dan juga berkualitas tinggi kepada seluruh pengunjung website.

SVG juga diminati karena ukuran filenya yang kecil. Karena alasan inilah, ruang penyimpanan atau storage di web Anda tidak akan cepat ‘habis’. Selain itu, kecilnya ukuran format SVG juga memberi kesempatan bagi website untuk loading lebih cepat. Namun, ada satu kekurangannya – jika Anda membuat gambar yang sangat mendetail lalu mengubah atau mengkonversikannya ke SVG, ukurannya akan lebih besar dari JPG, atau PNG, atau ketika keduanya digabungkan.

Mengapa demikian? Hal ini dikarenakan ukuran file SVG bergantung pada kompleksitas gambar. Semakin mendetail suatu gambar, semakin besar ukuran filenya. Karena itulah, format SVG lebih cocok untuk gambar logo dan ikon. Jadi, bila Anda ingin menampilkan gambar beresolusi tinggi – seperti hasil foto – di situs, file JPG dan PNG lebih disarankan.

Keunggulan lainya dari SVG adalah format ini diindeks oleh Google. Semua gambar yang dibuat dengan format ini akan muncul di halaman hasil Pencarian Gambar Google. Tentu saja hal ini akan membawa pengaruh positif untuk SEO di situs Anda.

Pentingnya SVG Bagi Website

Nilai sebenarnya dari SVG adalah ia memecahkan banyak masalah yang paling menjengkelkan dalam pengembangan web modern. Mari kita lihat apa itu.

  1. Skalabilitas & Responsive

Dengan SVG, Anda dapat menggabungkan berbagai bentuk, jalur, dan elemen teks untuk membuat semua jenis visual dan memastikan bahwa mereka akan terlihat jelas dan jernih pada ukuran berapa pun.

Sebaliknya, format berbasis raster seperti GIF, JPG, dan PNG memiliki dimensi yang tetap, yang menyebabkannya menjadi pixelate ketika mereka diskalakan. Meskipun berbagai teknik gambar responsif telah terbukti berharga untuk grafis piksel, mereka tidak akan pernah bisa benar-benar bersaing dengan kemampuan SVG untuk skala secara tak terbatas.

  1. Programmability & Interaktivitas

SVG sepenuhnya dapat diedit dan skrip. Mengedit SVG semudah mengubah koordinat atau kata dalam editor teks atau mengode SVG ke halaman web Anda dan mengubahnya dengan JavaScript atau CSS. Anda juga dapat menggunakan perangkat lunak pengeditan grafik vektor seperti Adobe Illustrator, Corel Draw, dan Sketch.

Misalnya, katakanlah Anda memiliki logo sederhana dengan hanya satu warna (putih) dan Anda ingin membuat iklan banner tempat Anda ingin mengunggah logo Anda.Tetapi karena iklan banner sepenuhnya dirancang dengan warna putih, Anda perlu mengubah warna logo. Jika Anda menggunakan file SVG, akan lebih mudah bagi Anda untuk mengubah warna di aplikasi apa pun.

  1. Aksesibilitas & SEO Friendly

Menggunakan SVG hadir dengan sedikit bonus untuk perancang mesin pencari yang cerdas juga. Karena SVG menggunakan teks aktual dalam format, mesin pencari dapat membaca gambar dengan lebih baik.

Ya, Anda dapat menambahkan informasi alternatif dengan gambar lain, tetapi hanya ada begitu banyak ruang untuk kata kunci. Dengan SVG Anda dapat membuat lebih banyak gambar yang ramah-pencarian dan hanya mengunggah. Google mengindeks semua konten SVG, termasuk file mandiri dan ketika SVG tertanam langsung dalam HTML.

  1. Performa & Ukuran File

Salah satu aspek terpenting yang mempengaruhi kinerja web adalah ukuran file yang digunakan pada halaman web. Salah satu yang paling disukai pengiklan dan desainer adalah ukuran file visual mereka, setelah mereka merancang dan menyimpannya.

Karena menggunakan gambar SVG dan bukan gambar JPG atau PNG akan membantu Anda mengurangi ukuran file hingga 200% dengan tetap mempertahankan kualitas maksimum pada tampilan apa pun atau dimensi apa pun untuk spanduk Anda.

Keuntungan Utama Menggunakan Format Gambar SVG

Dari kepanjangan SVG, kita bisa mengetahui kalau SVG adalah gambar berformat Vector. Gambar Vector terdiri dari garis, stroke dan area yang di isi dengan warna. Seperti peta, logo-logo, diagram, ilustrasi dan lainnya. SVG juga dapat digunakan untuk Font. 

  1. Gambar SVG tidak akan pecah dan bisa di besarkan ukuran gambarnya sampai tak terhingga tanpa kehilangan kualitas atau resolusi. (sebagai contoh, silahkan di zoom halaman web ini dan perhatikan gambar-gambarnya) 
  2. SVG dibuat menggunakan XML, sehingga itu adalah gratis dan open. (tidak ada badan/perusahaan yang “memiliki” format SVG). Anda dapat membuat gambar SVG dengan menggunakan editor text biasa seperti Notepad. Dengan statement diatas, maka kita bisa menemukan gambar-gambar SVG digunakan dalam komunitas “open source”. Untuk contoh, semua logo dan diagram di Wikipedia menggunakan SVG. 
  3. Karena SVG adalah Vector, maka ukuran filenya itu biasanya kecil. Bahkan bisa di compress lagi menggunakan “gzip”. 
  4. Sebagai XML, maka SVG bisa di baca dan dimanipulasikan oleh JavaScript dan bahasa lainnya. Jadi bisa digunakan untuk animasi, interactive dan lainnya. 
  5. Anda bisa memanggil file SVG sama seperti tag <img/> sama seperti JPEG, GIF atau PNG. 

Contoh potongan coding untuk SVG :


format gambar svg

Hasilnya :

 

Sumber Referensi :

Leave a Reply

Your email address will not be published. Required fields are marked *