SVG Inline HTML5

HTML5 mendukung SVG yang disertakan

Apa itu SVG?

  • SVG adalah singkatan untuk Scalable Vector Graphics
  • SVG digunakan untuk mendefinisikan grafik vektor yang berdasarkan jaringan
  • Gambar SVG menggunakan format XML untuk mendefinisikan grafik
  • Kualitas grafik gambar SVG tidak akan hilang saat diperbesar atau mengganti ukuran
  • SVG adalah standar World Wide Web Consortium

Keunggulan SVG

Dibandingkan dengan format gambar lainnya (seperti JPEG dan GIF), keunggulan penggunaan SVG adalah:

  • Gambar SVG dapat dibuat dan diubah melalui editor teks
  • Gambar SVG dapat dicari, diindeks, diskrip, atau dikompresi
  • SVG dapat discahaya
  • Gambar SVG dapat dicetak dengan kualitas tinggi di setiap resolusi
  • SVG dapat diperbesar tanpa menurunkan kualitas gambar

Dukungan Peramban

Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung SVG inline.

Sisipkan SVG langsung ke halaman HTML

Dalam HTML5, Anda dapat mengekspos elemen SVG langsung ke halaman HTML:

Contoh

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Coba Sendiri

Hasil:

Tutorial SVG

Untuk mengetahui lebih banyak tentang SVG, kunjungi Tutorial SVG.