HTML5 SVG

by

Di artikel sebelumnya kita telah belajar tentang html5 canvas.

Sekarang, kita masih membahas tentang cara menggambar online di website. Bedanya sekarang adalah SVG.

SVG kependekan dari Scalable Vector Graphics, intinya gambar grafis berbasis vector.

Bedanya dengan canvas adalah kalau canvas berbasis pixel, sedangkan svg berbasis vector.

Daftar Isi
  1. Element SVG
  2. SVG Lingkaran
  3. SVG Kotak
  4. SVG Kotak rounded
  5. SVG Bintang

Mudahnya, svg itu seperti corel draw, sedangkan canvas seperti Photoshop.

Selain itu, svg tidak butuh javascript tidak seperti canvas yang harus menggunakan js untuk menggambar.

Saat ini SVG menjadi primadona para web developer dan designer. Karena, dengan format SVG ini website menjadi lebih ringan dan animasinya keren-keren.

Dulu, untuk buat ilustrasi harus berformat PNG yang sizenya besar sehingga buat web menjadi lemot.

Element SVG

Untuk membuat format SVG, kita hanya perlu menggunakan syntag <svg>.

Kita bisa menggambar berbagai obyek, seperti: garis, lingkaran, kotak, teks, dll.

SVG Lingkaran

Untuk membuat lingkaran tersebut, kode html:

<svg width="120" height="120">
  <circle cx="60" cy="50" r="40" stroke="#111916" stroke-width="2" fill="#31CD86" />
</svg>

Langkah-langkahnya:

  1. Buat obyek <svg> dengan ukuran panjang 120px dan tinggi 110px
  2. Bikin obyek lingkaran <circle> dengan posisi horizontal cx yaitu 60px, vertical cy yaitu 50px.
  3. Jari-jari lingkaran r adalah 40px.
  4. Ketebalan garis stroke-width sebesar 2px
  5. Fill warna lingkaran #31CD86 dengan stroke warna garis #111916

SVG Kotak

Kodenya:

<svg width="350" height="130">
  <rect width="350" height="130" style="fill:#31CD86;stroke-width:10;stroke:#111916" />
</svg>

Langkah-langkahnya:

  1. Bikin <svg> ukuran width 350px dan height 130px
  2. Buat obyek kotak <rect> dengan panjang 350px dan tinggi 130px.
  3. Diberi style fill warna kotak #31CD86 dan garis stroke-width setebal 10px, warna garis stroke yaitu #111916.

SVG Kotak rounded

Rounded disini adalah pojoknya tidak lancip.

Kodenya:

<svg width="300" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:#31CD86;stroke:#111916;stroke-width:5;" />
</svg>

Kodenya sama seperti buat kotak biasa, hanya ditambahkan radius rx dan ry, disini saya kasih nilai 20px.

SVG Bintang

Kode yang digunakan:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:#31CD86;stroke:#111916;stroke-width:5;fill-rule: evenodd;" />
</svg>

Sekian pembahasan tentang svg html 5. Jadi, kamu juga harus paham css supaya grafiknya menarik!

Leave a Comment