SVG Inline HTML5

HTML5 mendukung SVG yang diatur dalam tempat

Apa itu SVG?

  • SVG adalah Singkatan untuk Scalable Vector Graphics
  • SVG digunakan untuk mendefinikan 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 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, diskripkan atau dicompress
  • SVG dapat diukur
  • Gambar SVG dapat dicetak dengan kualitas tinggi di setiap resolusi
  • SVG dapat diperbesar tanpa menurunkan kualitas gambar

Dukungan Pemusnah

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 mengambil pengetahuan lebih lanjut tentang SVG, silakan kunjungi Panduan SVG.