SVG Inline HTML5

HTML5 mendukung SVG yang dilakukan secara internal

Apa itu SVG?

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

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, diskripkan atau dicompress
  • SVG dapat diukur
  • 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 serta Safari mendukung SVG inline.

Sisipkan SVG langsung ke halaman HTML

Dalam HTML5, Anda dapat menggabungkan 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, kunjungi Panduan SVG.