Memahami Bagaimana Cara menggunakan SVG Icon

Pahami Bagaimana cara Menggunakan SVG pada Template anda Dengan Seksama,, Ayo kita Coba pelajari Sekarang!

Memahami Pengertian SVG

Apa itu SVG?

Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh World Wide Web Consortium (W3C) sejak tahun 1999. Sebuah gambar dengan format SVG disimpan dalam bentuk file XML.

Tata Cara Menggunakan SVG

Bagaimana cara Menggunakannya

Dibawah ini dapat anda Lihat Contoh Sebagai Berikut:

<svg width="100" height="100">   <circle cx="50" cy="50" r="40" stroke="limegreen" stroke-width="4" fill="yellow" />   Sorry, your browser does not support inline SVG.</svg> 

circle : berbentuk Lingkaran
cx : "Cx" yaitu stylesheet yang serupa dengan Margin (left/right) . Jika Angka Ditambahkan maka Svg tersebut akan Menggeser Ke kanan dan begitu sebaliknya
cy : "cy" yaitu stylesheet kebalikan dari "CX" yaitu Margin (top/bottom). Jika angka ditambahkan maka svg tersebut akan menggeser dari atas Kebawah dan begitu sebaliknya
r : "r" yaitu stylesheet Yang serupa dengan Width atau di artikan sebagai Width (lebar).
stroke : yaitu stylesheet bagian Luar Svg atau bisa diartikan sebagai Border (contoh : {border:1px solid limegreen})
stroke-width : yaitu lebar dari Border tersebut.
fill adalah Stylesheet yang diserupakan dengan Background (contoh : {background:#000;})

Demo Seperti dibawah ini

https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_myfirst