SVG - Ikhtisar

Apa SVG?

SVG, Scalable Vector Graphics adalah bahasa berbasis XML untuk mendefinisikan grafik berbasis vektor.
SVG dimaksudkan untuk menampilkan gambar melalui web.
Menjadi gambar vektor, gambar SVG tidak pernah kehilangan kualitas tidak peduli bagaimana mereka diperbesar atau diubah ukurannya.
Gambar SVG mendukung interaktivitas dan animasi.
SVG adalah standar W3C.
Format gambar lainnya seperti gambar raster juga dapat dipukul dengan gambar SVG.
SVG terintegrasi dengan baik dengan XSLT dan DOM HTML.

Keuntungan

Gunakan editor teks apa saja untuk membuat dan mengedit gambar SVG.
Berbasis XML, gambar SVG dapat dicari, dapat diindeks dan dapat dibuat skrip dan dikompresi.
Gambar SVG sangat dapat diskalakan karena tidak pernah kehilangan kualitasnya, tidak peduli bagaimana diperbesar atau diubah ukurannya
Kualitas pencetakan bagus pada resolusi apapun
SVG adalah Standar Terbuka

Kekurangan

Sedang ukuran format teks lebih besar dibandingkan dengan gambar raster berformat biner.
Ukuran bisa menjadi besar bahkan untuk gambar kecil.

Contoh

Potongan XML berikut dapat digunakan untuk menggambar lingkaran di browser web.

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

Sematkan XML SVG langsung di halaman HTML.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Keluaran

Buka textSVG.htm di browser web Chrome. Anda dapat menggunakan Chrome / Firefox / Opera untuk melihat gambar SVG secara langsung tanpa plugin apa pun. Di Internet Explorer, kontrol activeX diperlukan untuk melihat gambar SVG.

Bagaimana SVG terintegrasi dengan HTML

Elemen <svg> menunjukkan awal gambar SVG.
Atribut lebar dan tinggi elemen <svg> mendefinisikan tinggi dan lebar gambar SVG.
Dalam contoh di atas, kami telah menggunakan elemen <circle> untuk menggambar lingkaran.
Atribut cx dan cy merepresentasikan pusat lingkaran. Nilai defaultnya adalah (0,0). Atribut r mewakili jari-jari lingkaran.
Atribut lain stroke dan stroke-width mengontrol garis luar lingkaran.
atribut isian mendefinisikan warna isian lingkaran.
Tag penutup </svg> menunjukkan akhir dari gambar SVG.