SVG (Gambar Vektor) di HTML5

Berikut ini adalah contoh kode penulisan untuk menguji SVG / Gambar Vektor pada HTML5

Kode Javascript:

<script>
function addCircle() {
    var newCircle = document.createElementNS('http://www.w3.org/2000/svg','circle');    
    newCircle.setAttribute('r',20);
    newCircle.setAttribute('id','leftEye');
    newCircle.setAttribute('cx',50);
    newCircle.setAttribute('cy',40);
    newCircle.setAttribute('fill','green');
    newCircle.setAttribute('stroke','white');
    document.getElementById('svg1').appendChild(newCircle);
}
</script>

Kode HTML:

<svg xmlns="http://www.w3.org/2000/svg" id="svg1" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" width="300" height="300">
    <rect x="0" y="0" width="100" height="80" style="fill:white;stroke:black" />
</svg>


<input type="button" value="Tambahkan Lingkaran" onclick="addCircle()">

Hasilnya akan tampak sebagai berikut:

SVG adalah singkatan dari Scalable Vector Graphics dan ini adalah bahasa untuk menggambarkan grafis 2D dan aplikasi grafis dalam XML dan XML kemudian diterjemahkan oleh penampil SVG.
SVG sebagian besar berguna untuk diagram tipe vektor seperti diagram Pie, Grafik dua dimensi dalam sistem koordinat X, Y, dll.
SVG menjadi Rekomendasi W3C 14. Januari 2003 dan Anda dapat memeriksa spesifikasi SVG versi terbaru pada Spesifikasi SVG.
Melihat File SVG. Sebagian besar web browser dapat menampilkan SVG seperti mereka dapat menampilkan PNG, GIF, dan JPG. Pengguna Internet Explorer mungkin harus menginstal Adobe SVG Viewer agar dapat melihat SVG di browser.