Cara Menggunakan Gambar SVG di CSS dan HTML – Tutorial untuk Pemula
Siap Ngoding.my.id - SVG adalah singkatan dari Scalable Vector Graphics (SVG). Gambar ini mempunyai format unik yang berbasis vektor yang ditulis dalam format XML (Extensible Markup Language).
Dan pada kesempatan kali ini saya akan memberikan tutorial cara menggunakan SVG ke dalam HTML dan CSS serta apa perlunya menggunakan gambar SVG tersebut.
Mari simak penjelasan berikut.
Mengapa kita perlu menggunakan gambar SVG?
Ada beberapa alasan mengapa kita perlu menggunakan gambar SVG, berikut diantaranya:
- Kualitas gambar SVG tidak akan berkurang jika kita memperbesar atau memperkecil ukurannya.
- Mudah diedit pada text editor atau IDE.
- Mempunyai ukuran yang jauh lebih kecil.
- Scalable, artinya bisa digunakan dengan ukuran sesuai kebutuhan tanpa takut gambar akan kehilangan kualitas.
- Mudah dicari, diindex, dan dikompres.
Sekarang ayo kita lihat bagaimana kita menggunakan file atau gambar SVG.
Cara Menggunakan Gambar SVG Pada HTML dan CSS
Ada beberapa cara supaya kita dapat menggunakan gambar svg ke dalam html dan css. Berikut sudah saya persiapkan 6 metode atau cara menggunakana gambar SVG pada html dan css.
1. Menggunakan Tag <img>
Kita dapat menggunakan gambar SVG dengan memasukan ke dalam atribut <img>. Metode ini merupakan metode yang paling mudah yaitu dengan menambahkan tag <img> pada dokumen html kalian dan dipanggil dengan atribut src. Lihat contoh kode dibawah ini.
<img src="gambar-svg.svg" alt="Gambar SVG" />Supaya gambar SVG dapat kita panggil dengan URL, maka gambar SVG harus terlebih dahulu dihosting (di upload pada hosting).
Jika kalian memasukan gambar SVG pada tag <img> tanpa menentukan ukurannya (height dan width), maka yang akan tampil adalah ukuran asli dari gambar SVG tersebut.
Cara di atas merupakan cara standar dan terbatas. Kalian tidak bisa memberikan style yang lebih kompleks pada gambar SVG.
2. Menggunakan Class CSS Background-Image
Secara umum sama saja dengan menambahkan gambar SVG pada tag <img> pada html, yang mmebedakan dilakukan pada css. Contoh kodenya bisa dilihat di bawah.
body {
background-image: url(gambar-svg.svg);
}Sebenarnya cara ini juga mempunyai batasan seperti halnya tag <img>, namun dengan menggunakan css sedikit lebih fleksibel dalam kostumisasi seperti pengaturan posisi, rotasi, dan jarak.
3. Menggunakan Metode Inline SVG
Gambar svg juga dapat kita masukan ke dalam dokumen html dengan menggunakan tag <svg> dan </svg>.
Caranya buka gambar SVG melalui notepad atau teks editor, salin kode gambar svg, lalu tempelkan pada elemen <body> pada dokumen html kalian.
<body>
<div>
<!--Pastekan gambar svg di sini-->
</div>
</body>Penggunaan metode inline ini akan sedikit berpengaruh pada kecepatan loading time web/blog kalian karena metode ini berfungsi sebagai HTTP Request.
Dengan metode ini pula kalian bisa lebih leluasa melakukan kostumisasi dibandingkan dengan 2 metode di atas yaitu metode tag <img> dan metode background-image.
4. Cara Menggunakan SVG sebagai <object>
Kalian juga bisa memasukan svg ke dalam dokumen html dengan memanfaatkan tag <object> dengan format penulisan sebagai berikut.
<object data='gambar-svg.svg' width='300' height='300'> </object>Atribut data untuk memasukan url gambar svg, dan atribut height serta width untuk mengatur ukuran gambar svg.
5. Menggunakan Tag <iframe>
Kalian juga dapat memasukan gambar svg dengan tag <iframe> pada dokumen html.
Namun penggunaan metode ini tidak dianjurkan karena akan berdampak buruk terhadap SEO dan SERP blog/website kalian.
Penggunaan metode ini juga menyalahi nama dari SVG itu sendiri yaitu Scalable Vector Graphics. Mengapa bisa dikatakan menyalahi? Karena dengan menggunakan tag <iframe> gambar SVG tidak akan dapat diubah ukurannya.
6. Menggunakan Tag <embed>
Metode kita yang terakhir dalam memasukan gambar svg pada html adalah dengan tag <embed> dengan format syntax sebagai berikut.
<embed src="gambar-svg.svg"/>Sebagai catatan, menurut MDN metode ini memiliki keterbatasan karena browser modern seperti sekarang sudah menghentikan dukungan untuk plugin. Ini artinya tag <embed> tidak bisa kalian pilih jika website/blog kalian ingin ditampilkan secara maksimal oleh semua browser.
Penutup
Oke jadi itulah Tutorial Memasukan Gambar SVG ke Dalam HTML Untuk Pemula.
Semoga artikel ini bermanfaat dan kalian bisa mendapatkan ilmu serta membantu kalian dalam memilih metode yang tepat dalam penggunaan gambar SVG pada website/blog kalian.
Terimakasih,
Referensi:
https://www.kuymaseh.com/2022/04/cara-menggunakan-gambar-svg-di-css-dan.html
Join the conversation