SVG untuk Pengembang: Memahami Dasar, Manfaat, dan Kerugian

Grafik menghadirkan ekspresi unik di situs web dan juga membantu pengembang untuk dengan mudah mengomunikasikan ide dan konsep yang mendalam kepada pengguna. Ini adalah elemen kunci di internet dan sejak 1999 menjadi scriptable, yang memungkinkan untuk presentasi gambar yang lebih kompleks di web.

Anda mungkin sangat akrab dengan penggunaan berbagai jenis file gambar raster: JPG, PNG, dan GIF. Mari kita ingat sedikit. Dengan dukungan 256 warna (8-bit), GIF (Graphic Interchange Format) adalah format yang luar biasa untuk animasi dan transparansi, tidak termasuk transparansi alfa. Format PNG (Portable Network Graphic) jauh lebih baik dengan dukungan lebih dari 16 juta warna (24-bit) dan semua jenis transparansi, asalkan Anda tidak memerlukan animasi.

Format gambar yang paling banyak digunakan di web JPG atau JPEG (Joint Photographic Experts Group), terutama karena dapat dikompresi, memiliki dukungan lebih dari 16 juta warna; 24-bit atau 8-bit per piksel untuk skala abu-abu, tetapi tidak mendukung animasi atau transparansi. Oleh karena itu, JPG adalah format grafis utama yang digunakan pengembang untuk foto statis. Saya tidak menyebutkan Bitmap (BMP) karena ini biasanya bukan format gambar untuk web. BMP menyimpan data yang tepat dari setiap piksel dalam gambar, yang membuat file menjadi sangat besar (lebih dari 150 kali ukuran JPG dengan resolusi yang sama) dan tidak ideal untuk grafik situs web.

Format grafis yang bergantung pada resolusi ini sangat bagus, sebagian besar bila digunakan dengan tepat. Namun, mereka semua memiliki kekurangan yang sama, yang menyebabkan pengenalan SVG – satu-satunya format gambar vektor untuk web.

Apa itu SVG?

Scalar Vector Graphics (SVG) adalah format gambar berbasis Extensible Markup Language (XML) yang menjelaskan grafik dua dimensi seperti jalur, garis, lingkaran, pola, warna teks, dll. Dalam definisi yang lebih sederhana, ini mengacu pada format gambar dengan dukungan untuk dua dimensi, yang seluruh perilaku dan keberadaannya dikendalikan oleh file teks XML.

Fitur menarik lainnya adalah skalabilitasnya; Anda dapat mengambil gambar SVG ke skala apa pun tanpa kehilangan resolusinya. Ini karena SVG merender gambar dengan bentuk, angka, dan koordinat, bukan dengan piksel seperti dalam format gambar raster yang merender gambar dengan menentukan warna apa yang harus dicat setiap piksel.

Mari kita lihat bagaimana Anda dapat membuat gambar SVG dan beberapa alasan mengapa Anda harus mempertimbangkan untuk menggunakan SVG dalam proyek Anda.

Cara membuat gambar SVG

Anda dapat membuat gambar SVG menggunakan editor teks apa pun, meskipun prosesnya sedikit teknis dan memerlukan beberapa pengetahuan desain dan matematika, terutama jika Anda membuat beberapa bentuk kompleks. Bayangkan menggambar pesawat di atas kanvas hanya dengan menggunakan baris kode. Ada cara yang lebih mudah, namun mari kita gunakan ini untuk memahami konsep dasar SVG.

Kami menggunakan elemen grafis SVG untuk membuat gambar SVG dalam editor teks. Prosesnya adalah dengan memasukkan elemen grafis Anda ke dalam tag <svg> dan </svg>, menentukan koordinat, dimensi, warna, dll. Misalnya, elemen <rect> dapat digunakan untuk menggambar persegi panjang seperti yang terlihat di contoh berikut.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Kode di atas akan menggambar persegi panjang biru berukuran 300x kali 300px di sudut kiri atas browser Anda jika disimpan sebagai file .svg dan dibuka dengan browser. Sekarang, Anda mungkin bertanya-tanya mengapa kami memiliki dua tinggi dan lebar dalam dokumen. Mari kita pahami seluruh kode untuk mengetahui alasannya. Seperti disebutkan sebelumnya, kode SVG Anda harus ditulis di dalam elemen root (<svg> dan </svg>) untuk memberi tahu browser Anda tentang cara menafsirkan baris tersebut.

Sama seperti di HTML, SVG membutuhkan deklarasi namespace di elemen root. Dalam contoh di atas, kami menyediakan parameter xmlns “http://www.w3.org/2000/svg” dan W3C merekomendasikan SVG versi 1.1 dalam elemen root. Dimensi di dalam elemen root disebut sudut pandang SVG, yang merupakan jendela atau kanvas tempat gambar SVG yang digambar di dalam tag root akan muncul. Sudut pandang harus memiliki setidaknya dimensi yang sama dengan seluruh objek SVG Anda sebelum dapat muncul di browser Anda.

Baris kedua lebih mudah dipahami. Elemen <rect>, yang digunakan untuk menggambar persegi panjang, mewujudkan parameter persegi panjang yang diusulkan dimulai dengan dimensi. Stroke-width menggambarkan ketebalan garis sementara dua model warna RGB menginformasikan browser warna mana yang masing-masing akan mengisi persegi panjang dan garis. Itu cukup sederhana bukan?

Sekarang, kita dapat memindahkan persegi panjang di dalam halaman dengan mendeklarasikan nilai untuk x dan y seperti ini:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Tentu saja, kami tidak akan lupa untuk meningkatkan dimensi sudut pandang untuk mengakomodasi ruang ekstra yang diperlukan.

Cara termudah untuk membuat gambar SVG adalah dengan menggunakan alat menggambar seperti Adobe Illustrator, Inskape dan Sketch. Alih-alih membangun dari awal, beberapa pustaka JavaScript seperti Bonsai.js dan D3.js adalah sumber yang baik untuk gambar SVG jika Anda mencari ikon, bentuk kompleks, dll.

Menambahkan gambar SVG

Salah satu manfaat menggunakan gambar SVG adalah kemudahan mengintegrasikannya dengan desain Anda. Anda cukup mereferensikannya di atribut src dari tag img. Ini harus merujuk ke file .svg yang disimpan di folder situs web Anda seperti ini:

<img src='example.svg'>

Atau, Anda dapat memasukkan kode SVG ke dalam dokumen HTML Anda, dengan tag <svg></svg> memulai dan mengakhiri kode seperti yang telah disebutkan sebelumnya.

Anda juga dapat merujuk ke gambar SVG di CSS Anda untuk gambar latar seperti ini:

.main-header {
background-image: url(example.svg);
}

Manfaat menggunakan SVG untuk pengembang

Kebutuhan akan SVG dalam proyek web Anda selanjutnya tidak dapat terlalu ditekankan mengingat persyaratan grafis internet saat ini. Selain perangkat baru yang tak terhitung jumlahnya dengan resolusi dan ukuran layar yang kuat, situs web sekarang menampilkan begitu banyak interaktivitas sehingga, tanpa memiliki kendali penuh atas grafik Anda, mungkin sulit untuk menghadirkan situs web kelas profesional.

Beberapa manfaatnya antara lain:

Skalabilitas dan daya tanggap

Sebagai format gambar yang tidak bergantung pada resolusi, SVG dapat diskalakan tanpa batas, tanpa menjadi piksel. Ini memungkinkan Anda, sebagai pengembang, untuk memberikan gambar grafis terbaik kepada setiap pengguna terlepas dari kekuatan resolusi dan ukuran layar perangkat mereka. Anda dapat menggabungkan jalur, bentuk, dan elemen teks yang berbeda untuk membuat visual menakjubkan yang akan tajam dan tajam di semua ukuran.

Ini tidak tersedia di salah satu format gambar raster dengan dimensi tetap, hanya karena mereka tidak akan pernah memiliki cukup data untuk mengisi setiap ruang ketika mereka sangat ditingkatkan. SVG menghitung jarak antar titik untuk menjaga jalur tetap terhubung sehingga gambar akan tetap tajam pada skala apa pun.

Sangat fleksibel dan mendukung animasi

Tidak seperti gambar raster, yang memberikan salinan akhir gambar, gambar SVG dapat diedit sepenuhnya dengan menyesuaikan kode menggunakan editor teks atau alat gambar khusus. Menggunakan nama kelas atau ID elemen SVG Anda, Anda dapat menata atau menganimasikan gambar SVG Anda menggunakan CSS. Animasi gambar SVG juga dimungkinkan dengan Web Animation API, SMIL atau WebGL.

Yang terpenting, Anda dapat mengintegrasikan gambar SVG Anda dengan teknologi dan dokumen platform Web terbuka terkemuka lainnya. SVG dapat ditulis dengan JavaScript dan ditata dengan CSS seperti HTML.

SEO-friendly dan ukuran file kecil

Ada dalam format teks, gambar SVG meningkatkan aksesibilitas situs web, yang merupakan aset besar dalam peringkat halaman. Selain itu, mesin pencari dapat mengindeks teks elemen SVG dan memungkinkan pengguna menemukan situs web Anda menggunakan kata kunci dalam file SVG Anda.

SVG memuat jauh lebih cepat karena tidak memiliki file untuk diunduh dan tanpa memerlukan permintaan HTTP. Meningkatkan resolusi file gambar raster berarti meningkatkan jumlah titik (piksel). Ini akan meningkatkan ukuran gambar, yang akan menyeret waktu pemuatan situs web Anda. Ini jauh dari kasus ketika Anda menggunakan SVG. Sebagai gambar yang dibuat menggunakan serangkaian instruksi dan koordinat, ukuran file SVG sangat kecil (bila dioptimalkan) dibandingkan dengan jenis file gambar lainnya. Ini menghasilkan waktu pemuatan yang lebih cepat, peningkatan kinerja halaman, peringkat mesin pencari yang lebih tinggi sambil tetap meningkatkan pengalaman pengguna. Untuk informasi lebih lanjut tentang ini, kunjungi Konsultan SEO London

SVG memiliki Model Objek Dokumen sendiri

SVG ada sebagai dokumen terpisah, dianggap memiliki strukturnya sendiri dan diposisikan di dalam DOM normal. Reputasi ini sangat penting untuk atribut viewBox, yang memungkinkan kita membuat sudut pandang dari dimensi apa pun, menggambar gambar pada berbagai ukuran kanvas dan menampilkannya tanpa memperbarui properti SVG.

SVG adalah format file gambar masa depan

Tanpa kedatangan perangkat yang lebih kuat dengan resolusi layar yang luar biasa luar biasa, pengembang tidak akan harus berurusan dengan sakit kepala yang luar biasa untuk mengoptimalkan gambar untuk perangkat yang berbeda. Tapi ini tidak akan menjadi lebih mudah dalam beberapa tahun dari sekarang, ditambah dengan meningkatnya rasa lapar akan peningkatan interaktivitas dari situs web.

Entah bagaimana mengelola tantangan ini dengan menyajikan gambar yang berbeda agar sesuai dengan dimensi sudut pandang pengguna tidak hemat biaya. Dan demi keberlanjutan bisnis dengan menghemat bandwidth, uang, dan meningkatkan pengalaman pengguna, upaya untuk beralih ke format gambar SVG mau tidak mau menjadi prioritas utama. Ada komunitas pendukung SVG yang berkembang.

Sebelum W3C memperkenalkan SVG 1.1 (Edisi Kedua) pada 16 Agustus 2011, yang kemungkinan sedang ditinjau untuk versi yang lebih baru, SVG 1.0 dan 1.1 (Edisi Pertama) telah mengubah cara kami menangani gambar di internet. Ini adalah janji akan sesuatu yang lebih berharga daripada format gambar raster biasa, yang masih sangat berguna dalam keadaan pemrograman web kita saat ini. SVG bukan format gambar terbaik dalam semua kasus. Versi SVG berikutnya diharapkan dapat mengatasi beberapa kelemahan SVG; akan dibahas nanti dalam artikel ini.

Kapan menggunakan format gambar SVG

Tentu saja, format gambar yang bergantung pada resolusi masih merupakan yang terbaik untuk foto dan gambar detail lainnya. Berikut adalah daftar kasus umum di mana format gambar SVG adalah yang terbaik.

1. Logo dan ikon
2. Gambar interaktif seperti bagan, grafik, peta, infografis
3. animasi
4. Antarmuka aplikasi
5. Diagram dan ilustrasi polos
6. Efek khusus seperti lengket atau bentuk morphing
7. Karya seni berintensitas rendah dan grafik sederhana

Kekurangan SVG untuk pengembang

SVG tidak didukung oleh semua browser: Browser lama memperlakukan SVG dengan cara yang sama seperti Windows XP yang ketinggalan jaman akan memperlakukan flash drive atau Canon EOS 5DSr Anda saat Anda mencoba menghubungkannya. Singkatnya, SVG tidak bekerja pada browser lama; IE8 dan lebih rendah. Namun, mengingat browser lawas sebenarnya bukan bagian dari tujuan masa depan apa pun, ditambah dengan fakta bahwa hanya segelintir orang yang masih menggunakannya, itu bukan alasan utama untuk tidak menggunakan SVG.

SVG tidak mendukung begitu banyak detail: Menjadi perpaduan jalur dan titik, SVG tidak memiliki kerangka kerja untuk menampilkan detail sebanyak format gambar raster berbasis piksel. SVG tidak berfungsi dengan apa pun yang diambil dengan kamera. Oleh karena itu, foto dan bentuk grafik lainnya dengan begitu banyak detail paling baik ditampilkan menggunakan format gambar raster karena mendukung kepadatan warna yang lebih tinggi.

Memahami kode SVG: Sementara pengembang mungkin dianggap mengetahui cara menggunakan beberapa bahasa pemrograman web, meningkatkan beban ini terbukti menjadi tantangan. Pola kode SVG sebenarnya tidak sulit atau sama sekali berbeda dengan bahasa pemrograman web. Tetapi membuat atau memanipulasi gambar yang menarik membutuhkan beberapa usaha. Ini bukanlah apa yang setiap pengembang ingin menginvestasikan banyak waktu untuk melakukannya ketika gambar bitmap berguna dan tidak memerlukan usaha untuk disematkan.

Kesimpulan

Perilaku grafik di situs web dalam menanggapi berbagai penggunanya merupakan aspek penting dari pengembangan web saat ini. Dan format gambar SVG adalah solusi utama, alih-alih merender beberapa ukuran gambar, seperti yang biasanya terlihat dalam desain kami saat ini. Ini karena browser menghitung bagaimana gambar harus dirender menggunakan serangkaian instruksi yang memastikan gambar yang jelas dan tajam pada skala apa pun.

Gambar bitmap tetap yang terbaik untuk gambar yang sangat detail seperti foto, sedangkan gambar SVG digunakan untuk gambar yang kurang detail seperti ikon, logo, bagan, infografis, dll. Saya sarankan Anda tetap menggunakan alat menggambar seperti Illustrator atau Sketch untuk membuat gambar SVG dan perpustakaan online untuk ikon dan bentuk populer. Pengkodean seharusnya hanya diperlukan saat Anda ingin memanipulasi gambar SVG Anda.

Beri tahu kami bagaimana Anda menggunakan SVG dan tentang kiat keren lainnya yang tidak dibagikan di sini.