SVG Inline HTML5

HTML5 mendukung SVG inline

Apa itu SVG?

  • SVG adalah Singkatan untuk Scalable Vector Graphics
  • SVG digunakan untuk mensifatkan grafik vektor yang berdasarkan jaringan
  • Gambar SVG menggunakan format XML untuk mendefinisikan grafik
  • Kualitas grafik gambar SVG tidak akan hilang saat diperbesar atau diubah ukurannya
  • SVG adalah standar Persemakmuran Web

Keunggulan SVG

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

  • Gambar SVG dapat dibuat dan diubah dengan editor teks
  • Gambar SVG dapat dicari, diindeks, diskripkan atau dicompress
  • SVG dapat diukur
  • Gambar SVG dapat dicetak dengan kualitas tinggi di semua resolusi
  • SVG dapat diperbesar tanpa menurunkan kualitas gambar

Dukungan Browser

Internet Explorer 9, Firefox, Opera, Chrome serta Safari mendukung SVG terbuka.

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:

Panduan SVG

Untuk belajar lebih banyak tentang SVG, silakan kunjungi Panduan SVG.