Panduan untuk Format Gambar Scalable Vector Graphics (SVG)

Ada satu aspek internet yang tidak bisa Anda hindari: gambar. Pada hari-hari awal web, itu adalah urusan yang ketat dan hanya teks. Namun, kami sekarang memiliki format gambar khusus untuk membantu kami menampilkan visual yang tajam. Format Scalable Vector Graphics (SVG) adalah salah satu yang terbaru dan paling fleksibel yang tersedia.

Kami akan menjelaskan lebih lanjut nanti, tetapi SVG adalah kumpulan data yang ditampilkan sebagai gambar di bagian depan. Ini berarti Anda dapat menggunakan Cascading StyleSheets (CSS) untuk memanipulasi gambar. Terlebih lagi, Anda dapat mengubah ukurannya sesuai kebutuhan tanpa kehilangan kualitas.

Untuk posting ini, kita akan berbicara lebih banyak tentang Grafik Vektor Scalable dan bagaimana mereka dapat membantu Anda. Kami juga akan membahas cara memasukkannya ke situs WordPress Anda.

Panduan Singkat Tentang Format Gambar Web Paling Umum

Sebelum kita beralih ke SVG dan cara menggunakannya, ada baiknya membicarakan tentang format gambar utama yang kita gunakan untuk web. Ada tiga yang perlu diperhatikan:

• Kelompok Ahli Fotografi Bersama (JPEG). Seperti namanya, jika Anda ingin menampilkan foto yang diambil dengan kamera digital, format inilah yang cocok untuk Anda.
• Grafik Jaringan Portabel (PNG). Anda akan ingin menggunakan format PNG untuk menampilkan grafik yang dibuat, seperti dari Adobe Illustrator.
• Format Pertukaran Grafik (GIF). Hei, semua orang suka klip lucu acara TV untuk digunakan sebagai reaksi di media sosial! GIF adalah format sempurna untuk grafik animasi yang juga portabel.

Sementara beberapa akan memilih format apa pun yang mereka suka, ini tidak akan menjadi pendekatan yang optimal. Misalnya, jika Anda memilih untuk membuat setiap gambar GIF, Anda dapat melihat ukuran file yang sangat besar dan kualitas visual yang buruk. Sebaliknya, Anda tidak akan ingin menggunakan JPEGS untuk grafik, karena PNG adalah format yang lebih optimal.

Apa itu Format Grafik Vektor yang Dapat Diskalakan?

Anda akan ingin menanggung bersama kami dalam bagian ini, karena kami akan mendapatkan teknis di beberapa area. Juga, konsep SVG bisa membingungkan.

Grafik Vektor yang Dapat Diskalakan tidak ada (semacam). Faktanya, mereka sama sekali bukan grafik atau gambar, tetapi bentuk Extensible Markup Language (XML). Untuk yang tidak sadar, ini adalah saudara dekat dengan HTML tetapi tanpa beberapa aspek bahasa itu (seperti tag yang telah ditentukan sebelumnya).

Sebagai perbandingan yang mungkin sudah Anda pahami, pertimbangkan bagaimana Anda dapat membuat bentuk menggunakan CSS. Ini adalah sesuatu yang akan kita bicarakan lebih lanjut segera. Nah, bayangkan CSS ini dimasukkan ke dalam pembungkus dokumen yang Anda panggil menggunakan format dan struktur file standar ( image.svg , misalnya).

Lebih akurat untuk mengatakan bahwa karena HTML menyediakan kerangka kerja untuk mendefinisikan header, paragraf, bagian, daftar, dan banyak lagi, SVG menyediakan kerangka kerja untuk mendefinisikan bentuk seperti lingkaran dan persegi panjang. Namun, ini masih tidak menjelaskan mengapa kami memiliki (dan terkadang membutuhkan) format SVG. Kita akan membicarakan ini selanjutnya.

Mengapa Kami Memiliki SVG

Sebelum SVG, Anda akan menggunakan PNG untuk menampilkan grafik. Gambar awal di web mungkin GIF, tetapi secara umum, PNG adalah format gambar yang dominan. Pertanyaannya tidak terlalu banyak: “Mengapa kita memiliki SVG?”, Lebih lanjut “Apa kekurangan format gambar saat ini yang akan dipecahkan oleh SVG?” Jawabannya adalah: dinamisme.

Jika Anda melihat kembali ke format gambar web utama, dua tidak benar-benar sesuai dengan grafik yang dibuat (JPEG dan GIF). Ini meninggalkan PNG untuk mengambil tekanan. Namun, PNG mengalami beberapa masalah yang sekarang hanya terlihat untuk web modern:

• Mereka statis, di mana Anda membuat gambar secara offline, dan mengekspornya sebagai format tertentu. Ini berarti agak tidak fleksibel.
• Dengan ekstensi, Anda tidak dapat mengubah 'makeup' gambar. Mengingat bahwa kami memiliki sejumlah perangkat untuk dibuat dan ditampilkan, terkadang Anda perlu beradaptasi dengan 'area pandang' tersebut. Lakukan upaya yang Anda perlukan untuk membuat semua ukuran logo hanya untuk desktop dan perangkat seluler utama menggunakan PNG.
• Meskipun PNG bisa ringan, itu adalah tanggung jawab perancang dan pemilik situs untuk memastikan pengoptimalan gambar terjadi. PNG bisa berat, terkadang lebih dari satu megabyte, tanpa pengoptimalan apa pun.

Selain itu, PNG mengisi sebagian celah pada saat ada beberapa opsi yang dapat memberikan kualitas gambar yang cukup tinggi. Pada saat itu, CSS masih dalam masa pertumbuhan, dan kami belum memiliki ruang lingkup desain dan pengembangan yang kami lakukan sekarang.

Misalnya, kami hanya dapat menggunakan properti border-radius sejak 2010. Ini memungkinkan Anda menentukan tepi bulat dan lingkaran genap. Anda akan sering melihatnya beraksi pada tombol:

Anda akan menggunakan CSS untuk membuat bentuk yang dapat diskalakan dan beradaptasi dengan layar, tetapi Grafik Vektor yang Dapat Diskalakan dapat melakukan lebih banyak hal. Faktanya, Anda akan beralih ke SVG sekarang daripada CSS untuk melakukan ini, meskipun mereka juga bukan peluru ajaib.

Kelebihan Grafik Vektor yang Dapat Diskalakan

Sama seperti setiap format gambar lainnya, Scalable Vector Graphics tidak sempurna. Ada banyak hal positif, tentu saja:

• SVG cocok dengan dimensi perangkat, seringkali tanpa intervensi lebih lanjut dari Anda. Ini mengurangi waktu pengembangan atau pembuatan Anda.
• File terkait untuk gambar berukuran kecil, karena Anda hanya memerlukan satu SVG. Sebaliknya, logo PNG perlu menawarkan beberapa ukuran dan dimensi yang berbeda. Ini memakan ruang server.
• Terlebih lagi, SVG lebih berperforma daripada PNG, karena Anda hanya perlu memuat satu file dengan biaya kilobyte. Paket file PNG itu bisa dalam megabyte tergantung pada kualitas, kuantitas, dan pengoptimalannya.

Secara keseluruhan, Anda dapat melakukan lebih banyak hal dengan SVG daripada format gambar lainnya. Baik pengembang dan desainer grafis dapat membuat SVG – baik melalui kode atau mengekspor kreasi khas dari aplikasi menggambar khusus. Karena mereka terikat dengan pengembangan web lebih dekat, adopsi meningkat.

Kelemahan Grafik Vektor yang Dapat Diskalakan

Namun, tidak semuanya cerah. SVG masih memiliki beberapa masalah yang perlu Anda ketahui:

• Teknologi sedang berkembang, tidak seperti kebanyakan aspek web inti lainnya. Karena banyak orang berharap banyak dari Scalable Vector Graphics, ada 'celah' antara apa yang dapat Anda lakukan dan apa yang ingin Anda lakukan.
• Meskipun dukungan SVG dasar tersedia di sebagian besar browser, set fitur lengkap masih belum tersedia tergantung pada browser yang Anda gunakan. Sekali lagi, SVG memiliki lebih banyak potensi yang belum terlihat: Kami membutuhkan dukungan browser yang lebih baik untuk fungsionalitas yang lebih canggih guna melihat kemampuan format tersebut.
• Dalam beberapa kasus, Anda mungkin menemukan gambar SVG kurang akurat atau terlihat salah. Ini karena Anda harus mengandalkan pemuatan situs seperti yang Anda harapkan. Jika Anda dapat mengingat saat Anda harus memuat ulang halaman web karena kesalahan, pencitraan ini terjadi hanya dengan gambar SVG Anda.

Kami juga akan mengatakan bahwa lebih sulit untuk membuat SVG tanpa pengetahuan pengkodean dalam beberapa kasus juga. Ada dukungan yang jauh lebih baik dalam program grafis seperti Affinity Designer dan Adobe Illustrator. Ada juga dukungan untuk mengekspor SVG di aplikasi seperti Google Drawing:

Ini adalah area yang meningkat, tetapi masih sedikit tertinggal dibandingkan dengan format gambar lainnya.

Terlepas dari kekurangan ini, Anda dapat menguranginya. Tentu saja, untuk penggunaan dasar, Anda dapat langsung menerapkannya. Bahkan, WordPress bahkan menawarkan dukungan ini dengan beberapa langkah, dan kita akan membahasnya selanjutnya.

Cara Menggunakan SVG di Situs WordPress Anda

Berita buruknya adalah jika Anda ingin mengunggah SVG ke WordPress tanpa pekerjaan apa pun, Anda tidak akan bisa melakukannya. Satu masalah tambahan dengan dukungan Grafik Vektor Scalable saat ini adalah WordPress tidak mengizinkan Anda mengunggah gambar-gambar ini sebagai standar untuk alasan keamanan:

Alasannya berada di luar cakupan artikel ini. Singkatnya, karena format SVG adalah dokumen dan bukan gambar sebenarnya, pengguna jahat dapat membangun serangan skrip potensial. Artinya, Anda harus mencari alternatif yang lebih aman.

Di tempat lain di web, Anda akan menemukan petunjuk untuk menambahkan beberapa kode ke file functions.php Anda untuk mengaktifkan unggahan SVG. Namun, kami tidak akan melalui langkah ini karena kami tidak dapat menjamin bahwa itu aman. Sebagai gantinya, Anda dapat melakukan apa yang sering Anda lakukan dengan WordPress: beralih ke plugin. Kami merekomendasikan Dukungan SVG:

Setelah Anda menginstal dan mengaktifkan plugin, buka layar Pengaturan> Dukungan SVG di dalam WordPress. Ini akan menunjukkan kepada Anda beberapa layar, tetapi Anda hanya perlu mencentang tombol Batasi untuk Administrator? kotak centang di panel Pengaturan.

Secara default, plugin akan mengizinkan semua pengguna mengunggah SVG. Ini bisa menjadi berita buruk berdasarkan masalah keamanan yang melekat, dan itulah sebabnya WordPress tidak mengizinkan Anda mengunggah file-file itu sejak awal. Namun, jika Anda mencentang kotak ini, plugin akan membatasi unggahan ke admin situs saja, serta menjadikan penggunaan SVG lebih aman sebagai standar.

Singkatnya

Ada banyak cara untuk menampilkan gambar di web, dan kebanyakan orang tidak berpikir dua kali tentang format yang mereka gunakan. Namun, jika Anda meluangkan waktu untuk menyesuaikan format dengan kebutuhan, Anda akan mendapatkan gambar yang detail dan tajam yang terlihat memukau di semua layar.

Selama posting ini, kami telah menawarkan banyak informasi tentang Grafik Vektor Scalable. Anda akan menggunakan CSS untuk menyesuaikan gambar dengan kebutuhan Anda, dan cakupan manipulasi jauh lebih besar daripada PNG dan JPEG. Selain itu, mereka ringan – jadi, cocok untuk layar kecil dan koneksi internet yang buruk.

Apakah Anda ingin menggunakan Grafik Vektor Scalable di situs web Anda, dan jika demikian, apakah artikel ini akan membantu Anda? Beri tahu kami di bagian komentar di bawah!

Kredit gambar: GDJ.