Mengapa Menggunakan File SVG daripada JPG

Keuntungan dari SVG

Ketika Anda membangun sebuah situs web dan menambahkan gambar ke situs itu, salah satu hal terpenting yang harus Anda tentukan adalah format file mana yang benar untuk digunakan. Bergantung pada grafik, satu format mungkin jauh lebih baik daripada yang lain.

Banyak desainer web merasa nyaman dengan format file JPG, dan format ini sangat cocok untuk gambar yang memiliki kedalaman warna yang mendalam, seperti foto. Meskipun format ini juga berfungsi untuk grafik sederhana, seperti ikon bergambar, ini bukan format terbaik untuk digunakan dalam instance itu. Untuk ikon-ikon itu, SVG akan menjadi pilihan yang lebih baik. Mari kita lihat mengapa tepatnya:

SVG Adalah Teknologi Vektor

Ini berarti itu bukan teknologi raster. Gambar vektor adalah kombinasi garis yang dibuat menggunakan matematika. File raster menggunakan piksel atau kotak kecil warna. Ini adalah salah satu alasan mengapa SVG dapat diukur dan sempurna untuk situs web responsif yang harus berskala bersama dengan ukuran layar perangkat. Karena grafik vektor ada di dunia matematika, untuk mengubah ukuran, Anda cukup mengubah angka. File raster sering membutuhkan perbaikan yang signifikan ketika menyangkut ukuran. Ketika Anda ingin memperbesar gambar vektor, tidak ada distorsi karena sistemnya matematis dan peramban hanya menghitung ulang matematika itu dan menjadikan garisnya semulus sebelumnya. Ketika Anda memperbesar gambar raster, Anda kehilangan kualitas gambar dan file mulai kabur saat Anda mulai melihat piksel warna tersebut. Matematika memperluas dan kontrak, piksel tidak. Jika Anda ingin gambar Anda menjadi independen, SVG akan memberi Anda kemampuan itu.

SVG Berbasis Teks

Saat Anda menggunakan editor grafis untuk menghasilkan gambar, program ini mengambil gambar karya seni yang Anda selesaikan. SVG bekerja secara berbeda. Anda masih dapat menggunakan beberapa program perangkat lunak dan merasa seperti Anda menggambar gambar, tetapi produk akhir adalah kumpulan garis vektor atau bahkan kata-kata (yang benar-benar hanya vektor di halaman). Mesin pencari melihat kata-kata, khususnya kata kunci. Jika Anda mengunggah JPG , Anda membatasi diri pada judul grafik Anda dan mungkin frase teks alt . Dengan pengkodean SVG, Anda memperluas kemungkinan dan membuat gambar yang lebih ramah mesin pencari.

SVG Adalah XML dan Bekerja Dalam Format Bahasa Lain

Ini kembali ke kode berbasis teks. Anda dapat membuat gambar dasar Anda di SVG dan menggunakan CSS untuk memolesnya. Ya, Anda dapat memiliki gambar yang sebenarnya adalah file SVG, tetapi Anda juga dapat kode SVG langsung ke halaman dan mengeditnya di masa depan. Anda dapat mengubahnya dengan CSS dengan cara yang sama seperti Anda mengubah teks halaman, dll. Ini sangat kuat dan membuat pengeditan mudah.

SVG Mudah Diedit

Ini mungkin merupakan keuntungan terbesar. Ketika Anda mengambil gambar persegi, itu adalah apa itu. Untuk membuat perubahan, Anda harus mengatur ulang adegan dan mengambil gambar baru. Sebelum Anda menyadarinya, Anda memiliki 40 gambar kotak dan masih belum memilikinya. Dengan SVG, jika Anda membuat kesalahan, ubah koordinat atau kata dalam editor teks, dan Anda selesai. Saya dapat mengaitkannya dengan ini karena saya menggambar lingkaran SVG yang tidak diposisikan dengan benar. Yang harus saya lakukan hanyalah menyesuaikan koordinat.

Gambar JPG Bisa Berat

Jika Anda ingin gambar Anda tumbuh dalam ukuran fisik, itu juga akan tumbuh dalam ukuran file. Dengan SVG, satu pon masih satu pon tidak peduli seberapa besar Anda membuatnya. Persegi yang lebarnya 2 inci akan memiliki berat yang sama dengan persegi yang lebarnya 100 inci. Ukuran file tidak berubah, yang sangat baik dari sudut pandang kinerja halaman!

Jadi Mana Yang Lebih Baik?

Jadi apa format yang lebih baik - SVG atau JPG? Itu tergantung pada gambar itu sendiri. Ini seperti bertanya "apa yang lebih baik, palu atau obeng?" Itu tergantung pada apa yang perlu Anda capai! Hal yang sama berlaku untuk format gambar ini. Jika Anda perlu menampilkan foto, maka JPG adalah pilihan terbaik untuk Anda. Jika Anda menambahkan ikon, maka SVG kemungkinan adalah pilihan yang lebih baik. Anda dapat mempelajari lebih lanjut tentang kapan sebaiknya menggunakan file SVG di sini .

Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 6/6/17