Apa itu File SVG (Dan Bagaimana Cara Menggunakannya)?

Scalable Vector Graphic (SVG) adalah jenis format gambar yang unik. Tidak seperti varietas lain, SVG tidak bergantung pada piksel unik untuk membentuk gambar yang Anda lihat. Sebaliknya, mereka menggunakan data 'vektor'.

Dengan menggunakan SVG, Anda mendapatkan gambar yang dapat ditingkatkan ke resolusi apa pun, yang berguna untuk desain web di antara banyak kasus penggunaan lainnya. Dalam artikel ini, kami akan mengajukan pertanyaan: Apa itu file SVG? Kami kemudian akan mengajari Anda cara menggunakan format tersebut.

Mari kita lakukan!

Berlangganan Saluran Youtube Kami

Apa itu File SVG?

SVG adalah grafik yang dibuat menggunakan vektor. Untuk yang belum tahu, vektor adalah elemen dengan besar dan arah tertentu. Secara teori, Anda dapat menghasilkan hampir semua jenis grafik yang Anda inginkan menggunakan kumpulan vektor. Ambil gambar persegi panjang biru dengan batas hitam dan bayangan, misalnya:

Ini adalah jenis file gambar lain yang disebut Portable Network Graphic (PNG), digunakan untuk ilustrasi dan gambar. Jika Anda ingin mereplikasi sesuatu yang serupa menggunakan grafik vektor, Anda harus membuatnya dengan kode XML (sama dengan yang digunakan untuk peta situs.) Kode berikut dapat mencapai hasil yang sama:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

Secara teori, jika Anda mengambil kode ini dan memasukkannya ke dalam file HTML, Anda akan melihat kumpulan persegi panjang yang mirip dengan PNG – yaitu, selama browser yang Anda gunakan mendukung file SVG. Meskipun kedua gambar terlihat sama, file SVG menawarkan banyak manfaat yang tidak dimiliki format lain. Misalnya, SVG mampu mempertahankan kualitas gambar saat skalanya dinaikkan atau diturunkan.

Jika Anda terus memperbesar persegi panjang PNG, Anda akan melihat kualitasnya mulai menurun di beberapa titik. Dengan grafis berbasis piksel yang lebih kompleks, degradasi menjadi lebih cepat. Namun, SVG terlihat bagus di hampir semua resolusi.

Mengapa Menggunakan File SVG?

Banyak situs web menggunakan format seperti PNG dan JPEG hampir secara bergantian. SVG tidak begitu serbaguna. Jika Anda mencoba membuat ulang foto kompleks menggunakan vektor, biasanya Anda akan mendapatkan file SVG yang besar dan tidak dapat digunakan.

Format SVG adalah pilihan yang fantastis untuk seluruh rangkaian skenario lain, meskipun:

• Desain logo. Karena Anda mungkin akan menggunakan kembali logo di situs web dan media sosial, menggunakan SVG menyelesaikan masalah skalabilitas potensial.
• Diagram. SVG sangat cocok untuk diagram dan jenis ilustrasi lainnya yang bergantung pada garis polos.
• Elemen animasi. Anda dapat menggunakan CSS untuk menganimasikan SVG, yang menjadikannya komponen yang berguna dalam desain situs web, terutama untuk interaksi mikro.
• Bagan dan grafik. Anda dapat menggunakan SVG untuk membuat grafik skalabel dan bagan yang mendukung animasi.

Karena SVG menggunakan format XML, ini juga membuatnya dapat ditelusuri dan diindeks. Pembaca layar dapat menafsirkan file SVG selama Anda menggunakan tag aksesibilitas yang benar.

Akhirnya, file SVG cenderung jauh lebih kecil daripada resolusi tinggi yang setara dalam format lain. Di atas kertas, ini berarti Anda mungkin dapat mengurangi beberapa ukuran halaman dan mengurangi waktu pemuatan. Namun, kecuali jika Anda berencana untuk mengonversi sebagian besar gambar Anda ke SVG, peningkatan kinerja mungkin akan minimal.

Cara Membuat File SVG (2 Cara)

Ada dua pendekatan yang dapat Anda ambil dalam hal file SVG. Anda dapat membuatnya dari awal atau mengambil gambar yang ada dan mengonversinya. Mari kita mulai dengan cara manual.

1. Buat File SVG Secara Manual

Membuat file SVG biasanya tidak melibatkan Anda mengetik informasi vektor seperti yang kita lakukan sebelumnya. Itu hanya contoh untuk menunjukkan konsepnya. Sebagai gantinya, Anda membuat SVG seperti grafik lainnya – dengan menggunakan program desain dan menyimpan file sebagai SVG. Banyak alat desain grafis modern mendukung SVG di luar kotak. Beberapa opsi teratas meliputi:

• Adobe Illustrator, Photoshop, Animate, dan InDesign
• Microsoft Visio
• Inkscape
• GIMP

Dua opsi terakhir dalam daftar ini adalah solusi open-source. Ini menjadikannya pilihan yang bagus untuk bereksperimen dengan membuat SVG tanpa membayar perangkat lunak premium. Bahkan, mereka mungkin semua yang Anda butuhkan.

Jika Anda tidak memiliki pengalaman dengan desain grafis, membuat logo Anda sendiri atau elemen lain untuk situs web Anda akan menjadi tantangan. Dalam hal ini, taruhan terbaik Anda adalah mengambil gambar yang ada dan mengubahnya menjadi SVG.

2. Konversi Gambar yang Ada Menjadi SVG

Ada banyak alat gratis yang dapat Anda gunakan untuk mengonversi gambar dari format lain menjadi SVG. Sebagian besar perangkat lunak yang kami sebutkan di bagian terakhir memungkinkan Anda membuka gambar dan menyimpannya sebagai file SVG.

Jika Anda tidak ingin mengunduh perangkat lunak apa pun, Anda juga dapat menggunakan alat konversi online – dan ada banyak layanan yang dapat Anda gunakan. Salah satu contohnya adalah Vector Magic, yang dapat Anda gunakan untuk mengonversi semua jenis file menjadi SVG:

Kami menyukai alat khusus ini karena menunjukkan pratinjau file SVG Anda sebelum Anda mengunduhnya. Anda juga dapat menggunakan editor bawaan untuk membuat perubahan dan koreksi kecil sebelum mengunduh file:

Tentu saja, ini hanya salah satu pilihan. Layanan konverter PNG dan JPG ke SVG lainnya termasuk Convertio, dan Img2Go. Anda akan ingin melakukan penelitian untuk menemukan solusi yang paling cocok untuk kebutuhan Anda.

Berdasarkan pengalaman kami, sebagian besar konverter SVG menawarkan hasil dengan kualitas yang sama. Untuk hasil terbaik, konverter yang Anda gunakan tidak terlalu berpengaruh pada gambar yang Anda pilih.

Sebagai aturan praktis, hanya masuk akal untuk menggunakan format SVG untuk gambar 'sederhana' – yaitu, gambar dengan batas yang ditentukan dan garis yang bersih. Semakin kompleks gambarnya, semakin besar kemungkinan Anda akan mendapatkan file SVG besar yang sulit untuk diedit secara manual atau dianimasikan.

Cara Menggunakan File SVG (Masuk dan Keluar dari WordPress)

SVG tidak terlalu sulit untuk digunakan. Menambahkan file SVG ke situs web Anda semudah mengambil kodenya dan menempelkannya di dalam dokumen HTML ke mana pun Anda ingin gambar itu pergi.

Jika Anda dan pengunjung situs Anda menggunakan browser yang mendukung file SVG (dan sebagian besar melakukannya akhir-akhir ini), mereka akan dapat melihat elemen tersebut. Menganimasikan SVG tentu saja lebih sulit karena memerlukan penggunaan CSS.

Prosesnya berubah jika Anda menggunakan WordPress. Sistem Manajemen Konten (CMS) tidak mendukung SVG di luar kotak. Jika Anda ingin mengaktifkan dukungan SVG sehingga Anda dapat mengunggah file langsung ke situs web Anda, Anda dapat menggunakan plugin seperti Safe SVG:

Dimungkinkan juga untuk mengaktifkan dukungan SVG di WordPress secara manual, tetapi prosesnya jauh lebih terlibat. Dalam hal ini, menggunakan plugin adalah pilihan yang lebih aman.

Kesimpulan

Mengadaptasi situs web Anda untuk menggunakan file SVG jauh lebih mudah daripada yang Anda bayangkan. Tantangan sebenarnya terletak pada merancang SVG dari awal atau memilih gambar yang tepat untuk dikonversi ke format. Untungnya, ada banyak alat yang dapat Anda gunakan untuk melakukan keduanya.

Beberapa opsi hebat termasuk Adobe Illustrator, InDesign, dan GIMP. Dengan menggunakan alat tersebut, Anda dapat membuat dan mengonversi gambar yang ada menjadi SVG. Jika Anda menggunakan WordPress, Anda dapat mengunggah SVG tersebut menggunakan plugin Safe SVG, lalu bersenang-senang menganimasikannya.

Apakah Anda memiliki pertanyaan tentang cara menggunakan file SVG? Mari kita bicara tentang mereka di bagian komentar di bawah!

Thumbnail gambar artikel oleh VectorsMarket / shutterstock.com