4 Alasan Harus Menggunakan Gambar SVG

Apa itu SVG?

Scalable Vector Graphics atau SVG adalah bahasa untuk menggambarkan grafik dua dimensi dalam XML. Grafik ini dapat terdiri dari jalur, gambar, dan / atau teks yang dapat ditingkatkan dan diubah ukurannya tanpa kehilangan kualitas gambar. Namun sayang jika kamu menggunakan beberapa CMS, secara default kamu tidak dapat menggunakan format file SVG. Untuk mengatasinya kamu harus melakukan perubahan sendiri. Namun jika kamu menggunakan jasa pembuatan website dari Whello, hal ini sudah termasuk. Karena Whello juga menggunakan format file SVG untuk beberapa asset yang dinilai efektif.

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.

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.

2. Programabilitas & 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.

3. 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.

4. Performa & Ukuran File

Salah satu aspek terpenting yang memengaruhi 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.

Itulah keempat alasan untuk menggunakan SVG, mulai dari skalabilitas & responsive karena SVG dapat tampil baik disemua device bahkan di Retina sekalipun. Programabilitas & Interaktivitas dari kemudahan untuk mengedit dari file SVG atau bahkan menambahkan animasi didalamnya. Aksesibilitas & SEO Friendly dari SVG dapat diindex oleh search engine dengan baik. Terakhir Performa & Ukuran File dari SVG Cenderung lebih sedikit daripada penggunaan jpg, png bahkan gif.

Dengan semua orang yang menggunakan tampilan resolusi tinggi, format vektor benar-benar merupakan alternatif utama. Semuanya berskala sempurna dan Anda tidak perlu khawatir tentang pixelation.SVG membuat logo yang hebat (statis atau responsif), grafik dan latar belakang, ikon dan gambar kecil, dan animasi. File-file tersebut kecil dan memuat dengan cepat, dan tidak ada kurva belajar yang besar ketika menerapkan SVG dalam desain situs web Anda.