Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya mengubah warna svg menggunakan kode CSS diblogger
Info: Baiklah sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Disclaimer
Sebelum saya benar benar membahas mengenai bagaimana caranya mengubah warna svg menggunakan CSS saya akan memberikan disclaimer dulu bahwa setiap artikel yang kami tuliskan disini adalah murni tulisan admin, jadi jika kamu ingin mengcopy paste harap sertakan link sumber oke
Ketika kamu sedang membaca artikel disini kemudian ada penjelasan yang tidak kamu pahami kamu bisa menyampaikannya dikolom komentar oke agar admin bisa memperbaiki penulisan didalam artikel ini
Peringatan: Artikel ini khusus untuk orang yang paham aja, atau orang yang sedang memerlukan artikel seperti ini untuk pengetahuannya, bagi kamu yang tidak paham sama sekali menjauh aja karena mungkin disini mungkin bukan tempat kamu untuk mendapatkan informasi
Warna SVG
Warna pada tag kode svg menggunakan format warna HTML dan biasanya tag svg digunakan untuk menampilkan gambar ataupun icon pada suatu tampilan semisal diblogger
Dua Metode
Karena kita hanya khusus membahas megenai bagaimana caranya mengubah warna svg maka sebenarnya dalam mengubah warna svg bisa dilakukan dengan melalui dua metode yakni bisa dilakukan menggunakan kode CSS dan juga bisa dilakukan melalui kode HTML, nah untuk kali ini admin bakalan membahas bagaimana caranya mengubah warna svg menggunakan kode CSS terutama diblogger
Properti Fill
Properti fill sama seperti properti color, yang mana sama sama menentukan warna dari suatu tampilan namun properti fill dikhususkan untuk penggunaan svg, semisal fill:#000 atau fill:red
Cara Lengkap
Baiklah saatnya admin bakalan menjabarkan kode lengkap bagaimana caranya mengubah warna svg menggunakan kode CSS dan admin juga bakalan menjabarkan cara penerapan pada tag kode svg
Kode CSS
Dalam menggunakan kode CSS untuk mengubah warna svg kamu harus terlebih dahulu menentukan class kemudian gunakan properti fill untuk menentukan warna svgnya, sebagai contoh kode CSS tersebut kamu bisa melihatnya seperti kode berikut ini
.redSVG{
fill:red;
}Info: Nah sobat juga bisa menggunakan nama class yang berbeda beda sesuai keinginan kalian
Cara penerapan
Nah setelah membuat kode CSS nya sekarang kita akan terapkan class CSS yang sudah kita buat tadi kedalam tag kode SVG nya tersebut, semisal kamu bisa tambahkanclass="redSVG" setelah tag kode <svg, atau jika masih bingung lihat contoh kode berikut ini
<svg class='redSVG' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path d='M7.775 0a1.8 1.8 0 0 0-1.273.527L.528 6.503A1.8 1.8 0 0 0 0 7.775v8.45c0 .478.19.936.528 1.274l5.974 5.974A1.8 1.8 0 0 0 7.775 24h8.45a1.8 1.8 0 0 0 1.273-.527l5.975-5.974A1.8 1.8 0 0 0 24 16.225v-8.45a1.8 1.8 0 0 0-.527-1.272L17.498.527A1.8 1.8 0 0 0 16.225 0zm4.427 3c1.02 0 .958 1.108.958 1.108v6.784s-.009.218.16.218c.188 0 .175-.226.175-.226l-.002-5.63s-.05-.986.959-.986c1.01 0 .97.983.97.983v7.621s.014.158.141.158c.127 0 .944-2.122.944-2.122s.451-1.497 2.576-1.1c.038.008-.167.688-.167.688l-2.283 6.556S15.69 20.7 11.714 20.7c-5.044 0-4.808-5.407-4.814-5.405V7.562s-.016-.99.897-.99c.858 0 .849.99.849.99l.007 3.583s-.004.172.167.172c.16 0 .141-.172.141-.172l.01-5.926s-.055-1.162.966-1.162c1.04 0 .983 1.142.983 1.142v5.611s-.005.204.152.204c.168 0 .154-.206.154-.206l.01-6.693S11.18 3 12.202 3Z'>
</path>
</svg>Info: Letakkan class kode sebagaimana yang tertera pada kode diatas
