Selamat hari weekend ya teman-teman bagi yang menjalankan hehe, walaupun hari weekend tapi kita tidak akan libur juga untuk belajar, oke masih seputar tentang SVG, setalah kemari kita membahas tentang teori SVG tapi sekarang kita akan coba membuat gambar dengan SVG element, gambar seperti apa, gambar yang kita akan buat yaitu masih simple aja yaitu membuat garis dulu ya teman-teman, kalau kita sudah bisa membuat sebuah garis dengan SVG maka kedepannya akan terasa mudah maka dari itu untuk artikel kali ini saya beri judul Membuat Garis Dengan SVG di HTML5 oke teman-teman jangan kemana-mana simak terus ya. Seperti yang saya tulis di atas untuk Membuat Garis Dengan SVG di HTML5, dalam dunia HTML memang masih sangat asing tentang SVG ini familiarnya masih di dalam dunia design grafis tapi dengan HTML kita bisa membuatnya, dan Membuat gambar/grafik dengan SVG jauh lebih simple jika dibandingkan dengan <canvas>. Kita tidak perlu menggunakan JavaScript. Walaupun sebenarnya SVG-pun bisa diprogram melalui JavaScript.

Membuat Garis Dengan SVG di HTML5

Untuk membuat garis, kita menggunakan tag <line>. Tag ini memiliki beberapa atribut:

  • x1 dan y1: menentukan koordinat awal garis.
  • x2 dan y2: menentukan koordinat akhir garis.
  • stroke: menentukan warna garis.

Kode diatas bisa dibaca: buat garis hitam dari titik 10,10 hingga 400,200.
Untuk menebalkan garis, bisa ditambahkan atribut
stroke-width. Nilai atribut ini berupa angka dalam satuan pixel:

 Membuat Garis Dengan SVG di HTML5

Bagaimana teman-teman seperti layaknya kita membuat sebuah gambar di paint ya, oke teman-teman saya rasa cukup sekian dulu belajar kita tentang Membuat Garis Dengan SVG di HTML5, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya. terimakash.