How to Use SVG Images in CSS and HTML - SVG adalah singkatan dari Scalable Vector Graphics (SVG). Merupakan jenis format gambar yang unik berbasis vektor yang ditulis dalam format Extensible Markup Language (XML).
Dalam artikel kali ini, saya akan menjelaskan bagaimana Kalian bisa dan perlu menggunakan gambar SVG dalam CSS dan HTML.
Mengapa perlu menggunakan gambar SVG?
Ada beberapa alasan perlunya menggunakan gambar SVG, beberapa di antaranya adalah :
- Gambar SVG tidak mengalami perubahan kualitas saat diperbesar atau diubah ukurannya.
- Mudah dibuat dan diedit dengan IDE atau teks editor.
- Mudah diakses dan dianimasikan.
- Memiliki ukuran file yang kecil dan sangat scalable.
- Bisa dicari, diindeks, ditulis, dan juga dikompres.
Sekarang mari kita lihat bagaimana Kita bisa menggunakan file atau gambar SVG.
Cara mengunduh gambar SVG dari Undraw.co
Banyak sekali penyedia gambar dengan format SVG, termasuk icon dan lainya. Salah satunya adalah Undraw.co yang menyediakan gambar ilustrasi dalam format SVG dan PNG gratis.
- Buka Undraw.co.
- Ubah warna latar belakang menjadi kuning.
- Pada kolom pencarian, silahkan coba masukan kata misalnya "Happy".
- Setelah hasil keluar, silahkan klik pada gambar, contoh "happy news".
- Pada jendela pop-up, klik tombol download SVG for your project.
- Jika Kalian mengikuti langkah di atas dengan benar, gambar SVG seharusnya sudah tersimpan di komputer Kalian.
Sekarang, buka gambar SVG di IDE atau text editor favorit Kalian. Ubah namanya menjadi happy.svg atau nama apa pun yang Kalian inginkan.
Cara menggunakan gambar SVG dalam CSS dan HTML
Ada beberapa cara untuk menggunakan gambar SVG dalam CSS dan HTML. Berikut ini 6 metode cara menggunakan gambar atau file SVG.
1. Memasukan gambar SVG pada tag <img>.
Metode ini adalah cara paling mudah dalam menggunakan file SVG. Untuk menggunakan metode ini, tambahkan tag <img> ke dokumen HTML Kalian dan dan panggil url pada atribut src, seperti contoh dibawah ini :
<img src="happy.svg" alt="My Happy SVG" />
Sesuaikan nama file.svg dengan nama file yang barusan Kalian download.
Untuk bisa memanggil url SVG pada Blog, file svg sudah harus dihosting publik.
Jika Kalian menambahkan gambar SVG menggunakan tag <img> tanpa menentukan ukurannya width da nheight, maka yang akan tampil adalah ukuran asli SVG.
Untuk mengubah ukuran, Kalian bisa menentukan width danheight secara external atau secara inline (langsung dalam tag svg).
Cara diatas bisa dilakukan tapi sedikit terbatas, jika Kalian berniat memberikan style yang sedkit rumit mungkin tidak akan bekerja secara keseluruhan.
2. Menggunakan gambar SVG sebagai CSS background-image
Sama halnya seperti menambahkan SVG ke dokumen HTML menggunakan tag <img>. Tapi kali ini dilakukan didalam CSS, penggunaanya seperti pada kode di bawah ini.
body {
background-image: url(happy.svg);
}
Sama halnya dengan menggunakan metode tag <img>. Ada batasan tertentu namun menggunakan CSS lebih fleksible dalam kustomisasi.
3. Mengunakan metode inline SVG.
Gambar SVG juga dapat ditulis langsung ke dalam dokumen HTML menggunakan tag <svg> dan </svg>.
Caranya, buka file SVG menggunakan Notepad atau IDE pilihan Kalian, salin kodenya, dan tempel di dalam <body> elemen di dokumen HTML Kalian.
<div> // Paste kode SVG disini. </div>
Penggunaan inline SVG, akan sedikit berpengaruh pada loading time web Kalian karena berfungsi sebagai HTTP request.
Menggunakan metode ini memungkinkan Kalian melakukan lebih banyak penyesuaian daripada menggunakan metode <img>atau background-image.
4. Cara menggunakan SVG sebagai <object>
Kalian juga bisa menggunakan tag <object> untuk menambahkan gambar SVG ke halaman web, dwngan sintaks berikut.
<object data='happy.svg' width='300' height='300'> </object>
Gunakan atribut data untuk meenentukan nama file SVG yang dimaksud, dan gunakan atribut weight dan height untuk menentukan ukuranya.
Penggunaan tag <object> didukung di semua browser yang support penggunaan SVG.
5. Menggunakan file SVG didalam <iframe>
Metode ini tidak direkomendasikan, tapi jika memang ingin, Kalian bisa mencobanya.
Perlu diingat, bahwa penggunaan <iframe> bisa berdampak buruk terhadap SERP atau SEO situs Kalian.
Penggunaan <iframe>juga menghilangkan tujuan SVG seperti namanya "Scalable Vector Graphics" karena gambar SVG yang ditambahkan dengan format ini tidak dapat diubah ukuranya.
6. Menggunakan file SVG dalam tag <embed>
Menggunakan tag <embed> adalah cara lain untuk memasang gambar SVG pada HTML dan CSS dengan penulisan seperti berikut :
<embed src="happy.svg" />
Sebagai catatan bahwa metode ini juga memiliki keterbatasan. Menurut MDN, sebagian besar browser modern telah menghentikan dan menghapus dukungan untuk plug-in browser. Artinya penggunaan tag <embed> tidak lagi dipilih jika ingin website Kalian ditampilkan maksimal pada semua browser.
Kesimpulan
Semoga Kalian mendapatkan ilmu tentang bagaimana menggunakan gambar SVG pada HTML & CSS. Dan membantu Kalian menentukan metode terbaik dalam menggunakan gambar SVG pada website Kalian.
Metode mana yang terbaik dan sering atau akan Kalian gunakan?