5 Alasan Kenapa Anda Harus Menggunakan SVG Dibandingkan PNG

  • by

Untuk beberapa alasan, file PNG (format file grafik raster) masih banyak terlihat di web, bahkan di situs web baru yang dibuat pada tahun 2016! Hal-hal seperti logo dan ikon tampaknya menjadi penyebab utamanya. Saya kira pertanyaannya adalah mengapa? Mengapa kita masih menggunakannya? Kecuali jika Anda menggunakannya sebagai pengganti di browser kuno.

Kami telah mengumpulkan 5 alasan utama untuk menggunakan SVG dibandingkan PNG. SVG adalah Grafik Vektor yang Dapat Diskalakan, format gambar berbasis XML untuk grafik dua dimensi. SVG didukung di semua browser, kecuali IE 9 dan yang lebih rendah serta Android lama (V3).

Sekarang, setelah kita mengetahui perbedaannya, mari kita bahas alasan Anda harus menggunakan SVG.

1. Resolusi

Tidak masalah tentang ukuran layar Anda, tingkat zoom, resolusi atau apakah Anda memiliki tampilan ‘retina’ atau tidak. SVG berbasis vektor, jalur, bentuk, dan isian. Ini memungkinkan resolusi tak terbatas, seperti saat membuat karya seni untuk dicetak dan menggunakan bentuk, prinsip yang sama berlaku!

Menggunakan PNG berarti Anda dibatasi untuk piksel. Selain itu, banyak waktu yang Anda butuhkan untuk memenuhi perangkat ‘retina’, yang berarti Anda memiliki dua PNG, satu dengan ukuran file yang hampir selalu tidak masuk akal juga.

2. Kecepatan

PNG dapat menimbang dalam ukuran file besar, biasanya saat melayani tampilan HDPI. Seperti yang Anda ketahui, semakin besar ukuran file, semakin lambat proses render / pemuatannya. Orang cenderung menggunakan PNG ketika mereka membutuhkan transparansi dalam gambar mereka, transparansi dalam gambar = stupid file size. Stupid file size = Waktu pemuatan lebih lama. Nah jika SVG,  hanyalah memakai kode, yang berarti ukuran file sangat kecil. Ada beberapa contoh ketika SVG membutuhkan waktu lama untuk dimuat, misalnya, jika Anda telah menjadikan Menara Eiffel sebagai grafik vektor dengan jutaan jalur dan isian, sebaiknya gunakan JPEG… atau PNG.

Request HTTP: Menggunakan PNG tradisional berarti, kecuali Anda menyandikan base64, gambar harus direferensikan sebagai sumber daya eksternal. Semua PNG tersebut berarti meningkatkan permintaan http dan dengan demikian situs menjadi lebih lambat. SVG tidak hanya lebih kecil dalam ukuran file, tetapi XML dapat disematkan sebaris ke HTML Anda, menghilangkan permintaan http dan mempercepat situs Anda.

3. Animasi

SVG dapat dianimasikan dan ditata dengan CSS. Animasi (transformasi / transisi) yang Anda gunakan pada elemen HTML juga dapat digunakan pada elemen SVG. Ada beberapa contoh di mana Anda tidak dapat menggunakan CSS untuk menganimasikan SVG tetapi contoh ini biasanya dapat ditutupi dengan JavaScript, lihat snap.svg (Pustaka SVG JavaScript untuk web modern.)

Berikut contoh animasi SVG untuk memberi Anda gambaran tentang apa yang mungkin:

4. Kepraktisan

Ada banyak cara bagaimana SVG dapat digunakan di web, dari menampilkan logo hingga penuh di mesin fisika dalam browser. Saya berada di kamp sebelumnya, kebutuhan saya umumnya membutuhkan logo, ikon, dan animasi sederhana dalam format SVG.

Logo: Logo biasanya berbasis vektor. Keindahan di sini adalah, Anda dapat menentukan dokumen SVG sebagai logo Anda dan kemudian menggunakannya di mana pun Anda suka tanpa mengkhawatirkan ukuran, resolusi, atau waktu muat. Faktor yang sama juga berlaku untuk ikon. Juga, membuat logo responsif.

5. Aksesibilitas dan SEO

SVG di indeks Google, konten SVG baik dalam file mandiri atau tertanam langsung di HTML akan diindeks.

Kekurangan:

Selain dari banyaknya kelebihan, pasti SVG juga mempunyai kekurangan, berikut beberapa hal yang perlu dipertimbangkan saat menggunakan SVG.

Anda akan mengalami masalah saat mencoba menggunakan SVG dengan browser lama, karena itu, Anda dapat menggunakan fallback seperti penggantian PNG.

Karya seni yang rumit dengan ribuan node mungkin paling cocok untuk JPEG, browser yang mencoba membuat SVG yang rumit dapat mengalami kehancuran.

Secara keseluruhan, SVG paling baik digunakan untuk karya seni intensitas rendah; logo, ikon, dan grafik sederhana.