Tag HTML <svg>

Definisi dan penggunaan

<svg> Tag definisikan wadah untuk grafik SVG.

SVG memiliki berbagai metode untuk menggambar jalur, kotak, lingkaran, teks dan gambar grafis.

Untuk mengelola lebih banyak tentang penggunaan SVG, baca Panduan SVG。

Lihat pula:

Panduan HTML:HTML SVG

Panduan SVG:Panduan SVG

Contoh

Contoh 1

Menggambar lingkaran:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Coba Sendiri

Contoh 2

Menggambar persegi panjang:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Coba Sendiri

Contoh 3

Menggambar persegi panjang dengan sudut yang berbentuk lingkaran:

<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" />
</svg>

Coba Sendiri

Contoh 4

Menggambar bintang:

<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;" />
</svg>

Coba Sendiri

Contoh 5

Menggambar logo SVG:

<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>
</svg>

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser yang mendukung sifat ini penuh.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1