Oke pada kesempatan kali ini kita akan belajar membuat langsung contoh study kasus di dalam mempelajari SVG element yang terdapat di HTML5, pada kesempatan kali ini kita akan belajarĀ Cara Membuat Persegi Dengan SVG di HTML5, persegi yang di maksud adalah bangun ruang yang terdapat pelajaran matematika yang kita pelajari dulu ya teman-teman, jika teman-teman sekarang masih ada yang sekolah dan masih mempelajari tentang penghitungan bangun ruang pasti sungguh sangat kebetulan dan tidak asing lagi ketika kita mempelajari artikel kali ini ya teman-teman. Oke jangan kemana-mana simak terus ya teman-teman.

Untuk artikel kali ini dengan judul Cara Membuat Persegi Dengan SVG di HTML5, harus sudah bisa menguasai atau sudah pernah belajar tentang pengertian apa itu SVG element di HTML ya teman-teman, jika teman-teman belum teman-teman bisa liat artikel saya sebelumnya, jika sudah mari kita lanjutkan. Oke teman-teman langsung saja kita masuk dalam contoh pembuatannya. Untuk membuat kotak persegi, SVG menyediakan tag <rect>, yakni singkatan dari rectangular. Berikut contoh penggunaannya:

Teman-teman perhatikan tag rect ya, dimana tag rect itu sendiri mempunyai beberapa atribut Berikut penjelasan dari atribut yang digunakan:

  • x dan y: koordinat titik awal persegi (titik kanan atas).
  • width: lebar persegi.
  • heigth: tinggi persegi.
  • stroke: warna garis tepi (border).
  • stroke-width: lebar garis tepi.
  • fill: warna dari isi persegi.

Dan bagaiaman hasilnya, maka hasilnya seperti ini:

Cara Membuat Persegi Dengan SVG di HTML5

Bagaimana teman-teman apakah hasilnya sudah sama dengan gambar yang terdapat di atas, sekarang kita bisa membuat persegi dengan salah satu tag HTML yang terdapat di SVG element, tanpa menggunakan bantuan photoshop, corel draw, maupun Paint, sangat menarik ya teman-teman untuk di coba, dan saya rasa cukup sampai disini dulu belajar kita tengang Cara Membuat Persegi Dengan SVG di HTML5, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya terimakasih.