Cara Merubah Format Alamat Path SVG Ke Alamat URL
Cara Merubah Format Alamat Path SVG Ke Alamat URL - Mungkin anda bingung tentang postingan kali ini, saya pun juga kebigungan untuk menentukan judul apa yang cocok buat postingan kali ini.Postingan kali ini kita akan membahas tentang pengalamatan ikon svg, bagaimana agar alamat ikon svg tersebut dapat kita ambil sebagai alamat url, lebih jelasnya begini.
Anda dapat mendapatkan ikon svg lengkap di situs penyedia ikon svg seperti https://materialdesignicons.com/, disitu anda dapat menemukan banyak sekali ikon svg yang dapat anda pakai. Untuk contoh, saya akan mengambil salah satu ikon, yaitu saya akan mengambil ikon diamond dengan format alamat seperti dibawah ini :
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M19,12L12,22L5,12L12,2" />
</svg>Alamat seperti ini akan berjalan dengan baik jika kita langsung pasang di HTML, karena kita tidak membutuhkan alamat dengan format url. Namun hal ini akan menjadi masalah bila kita ingin menempatkkan ikon svg ini di bagian CSS, kita tidak bisa langsung sembarangan menaruh alamat ikon svg tersebut ke CSS, kita harus merubah atau mengkonvert terlebih dahulu format alamat ikon svg tersebut ke format url atau xml.
Kadang kita membutuhkan alamat url di css biasanya untuk memasang gambar di background, misal saya akan memasang background sebuah gambar dengan alamat url:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg1n1yB17qgUm9bcSiaNuJIUD0jdCm2uI0BueYKyWBwGkMjS-XHnsIvWAGZwHBiEHQKQLzntLJrY31aUscWybi_eioT89dHpD5yS_ZRRrHX36gtLBxE2_jsRBMR7jdJRCd52lRwBVGoWM/s1600/ALPHA+AMP+IKLAN-min.jpgbackground-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg1n1yB17qgUm9bcSiaNuJIUD0jdCm2uI0BueYKyWBwGkMjS-XHnsIvWAGZwHBiEHQKQLzntLJrY31aUscWybi_eioT89dHpD5yS_ZRRrHX36gtLBxE2_jsRBMR7jdJRCd52lRwBVGoWM/s1600/ALPHA+AMP+IKLAN-min.jpg")Nah, disini kita akan menampilkan ikon svg sebagai background dengan data:image melalui css, bukan lagi melalui html, berikut caranya :
Pertama kita ambil ikon svg, anda dapat mengambil dari https://materialdesignicons.com/, berikut contoh alamat ikon svg diamond :
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M19,12L12,22L5,12L12,2" />
</svg>Berikut contoh ikon svg diamond yang sudah di convert ke format alamat url dengan data:image xml.
data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M19,12L12,22L5,12L12,2'
%3e%3c/path%3e%3c/g%3e%3c/svg%3e"Sebenarnya anda hanya tinggal memindahkan saja kode "viewbox" dan "d" pada path ikon svg ke kerangka format url ikon svg yang telah saya contohkan seperti diatas. Dengan memindahkan kode yang telah tandai diatas, maka ikon svg tersebut sudah terconvert ke alamat url xml dan siap digunakan di CSS.
Anda dapat menerapkan alamat url ikon svg tersebut sebagai background image ke dalam css seperti contoh dibawah ini :
background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e")Background image dengan ikon svg seperti ini biasanya digunakan untuk membuat ikon otomatis pada sebuah divisi (div), baik sesudah maupun sebelum, dengan menggunakan .class::after maupun .class::before. Dengan ini anda tidak perlu lagi memasang ikon svg melalui html, cukup dengan css ikon svg sudah dapat tampil.
Sekian pembahasan saya mengenai Cara Merubah Format Alamat Path SVG Ke Alamat URL semoga dapat bermanfaat bagi anda semua, tunggu totorial menarik lainya seputar perkembangan dunia blogger, selamat mencoba ^_^
Posting Komentar