Grafik SVG HTML: Cara Membuat & Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 4, 2020

SVG berfungsi unruk mendefinisikan grafik berbasis vektor dalam format XML.

Section Artikel

1 Apa itu SVG?
2 Elemen <svg> HTML
3 Browser Support
4 Contoh penggunaan SVG
5 Perbedaan Antara SVG dan Canvas
6 Perbandingan Canvas dan SVG

Apa itu SVG?

SVG adalah singkatan dari Scalable Vector Graphics
SVG digunakan untuk menentukan grafik dalam Web
SVG direkomendasikan penggunaannya

Elemen <svg> HTML

Elemen <svg> pada HTML merupakan wadah atau penampung untuk grafik SVG.

SVG memiliki beberapa metode untuk menggambar path, kotak, lingkaran, teks, dan gambar grafik.

Browser Support

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen <svg>.

Element	Chrome	Edge	Firefox	Safari	Opera
<svg>	4.0	9.0	3.0	3.2	10.1

Contoh penggunaan SVG

Lingkaran SVG :

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
Maaf, browser Anda tidak mendukung inline SVG.
</svg>
 
</body>
</html>

Persegi Panjang SVG :

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Maaf, browser Anda tidak mendukung inline SVG.
</svg>
 
</body>
</html>

SVG Rounded Rectangle :

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Maaf, browser Anda tidak mendukung inline SVG.
</svg>

</body>
</html>

SVG Star :

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Maaf, browser Anda tidak mendukung inline SVG.
</svg>
 
</body>
</html>

SVG Logo :

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">SVG</text>
Maaf, browser Anda tidak mendukung inline SVG.
</svg>

</body>
</html>

Perbedaan Antara SVG dan Canvas

SVG adalah bahasa untuk mendeskripsikan grafik 2D dalam XML.

Sedangkan canvas berfungsi untuk menggambar grafik 2D, dengan cepat (dengan JavaScript).

SVG berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan event handler JavaScript untuk sebuah elemen.

Dalam SVG, setiap bentuk yang digambar akan diingat sebagai objek. Jika atribut objek SVG diubah, browser dapat merender ulang bentuk secara otomatis.

Canvas dirender pixel demi pixel. Di canvas, setelah grafik digambar, grafik itu akan dilupakan oleh browser. Jika posisinya harus diubah, seluruh scene juga perlu digambar ulang, termasuk objek apa pun yang mungkin telah tercakup oleh grafik.

Perbandingan Canvas dan SVG

Tabel di bawah ini menunjukan beberapa perbedaan penting antara Canvas dan SVG:

Canvas	SVG
Tergantung resolusi Tidak ada dukungan untuk event handler Kemampuan rendering teks yang buruk Dapat menyimpan gambar yang dihasilkan sebagai .png atau .jpg Sangat cocok untuk game intensif grafis	Resolusi independen Dukungan untuk event handler Paling cocok untuk aplikasi dengan area rendering besar (Google Maps) Rendering lambat jika kompleks (apa pun yang banyak menggunakan DOM akan lambat) Tidak cocok untuk aplikasi game