Menggambarkan Grafik Vektor (SVG/VML) Secara Cross Browser Dengan Menggunakan JavaScript

Sebelum memulai membaca artikel ini, sebelumnya baca terlebih dahulu artikel dibawa ini:
1. Grafik Berbasis Vektor Pada Web Dengan SVG / VML – Part 1
2. Grafik Berbasis Vektor Pada Web Dengan SVG / VML – Part 2

Dua artikel diatas berkaitan dengan apa yang akan dibahas pada artikel ini. Pada kedua artikel tersebut telah dijelaskan mengenai cara menggambar suatu grafik vektor dengan SVG dan VML. SVG digunakan untuk menggambarkan vektor pada borwser Firefox, Opera, Safari dan lainnya kecuali Internet Explorer, dan VML digunakan pada Internet Explorer.

Bagi seorang web developer, tidaklah efisien untuk membuat 2 halaman yang berbeda hanya untuk menampilkan isi yang sama. Kedua contoh diatas sama-sama menggambarkan grafik vektor berbentuk lingkaran yang mirip. Lebih efisien dan optimal jika hanya diperlukan 1 halaman saja untuk menggambarkan suatu grafik vektor yang dapat dijalankan pada browser apa saja.

Untuk dapat menampilkan sebuah grafik vektor yang dapat dijalankan pada browser apa saja, maka JavaScript menjadi kunci untuk mengatasi hal ini. Klik link ini untuk penjelasan mengenai JavaScript dalam membuat halaman web yang cross browser.

Sekarang mari kita lanjut untuk membuat grafik vektor yang cross browser. Lihatlah kodingan dibawah ini, penjelasan akan dijelaskan dibawahnya.

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script language=”javascript”>
var grfHandler = new Object(); //Deklarasi variabel untuk pengkonstruksi vektor
var layerVector; //Dekalarasi variabel untuk menyimpan layer <div> yang akan dijadikan tempat untuk menggambar vektor
window.onload = init; //Menjadikan fungsi init() sebagai fungsi yang dijalankan ketika web diload

function init()
{
//Memasukkan layer div HTML ke dalam variabel
layerVector = document.getElementById(“canvas”);
//Fungsi pengecekan apakah browser adalah IE atau bukan
if (document.createElementNS != null && typeof document.createElementNS(“http://www.w3.org/2000/svg”, “svg”).width != “undefined”)
{
grfHandler.format = “svg”;
}
else if (document.namespaces && document.createStyleSheet) // bad test
{
grfHandler.format = “vml”;
//Tambahkan namespace dan peraturan CSS jika IE
document.namespaces.add(“v”, “urn:schemas-microsoft-com:vml”);
document.createStyleSheet().addRule(“v\\:*”, “behavior:url(#default#VML)”);
}

if (grfHandler.format)
{
initGraphics();
grfHandler.createGraphic();
}
}

//Fungsi untuk menggambar grafik
function initGraphics()
{
if (grfHandler.format == “svg”)
{
grfHandler.createGraphic = function()
{
layerVector.innerHTML = “Menggambarkan Vektor Untuk Browser Firefox, Opera, Safari, dan yang lainnya kecuali Internet Explorer”;

var newSvg = document.createElementNS(“http://www.w3.org/2000/svg”, “svg”);
layerVector.appendChild(newSvg);

var objCircle = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
objCircle.setAttribute(“cx”, “150”);
objCircle.setAttribute(“cy”, “100”);
objCircle.setAttribute(“r”, “50”);
objCircle.setAttribute(“fill”, “#ff0000”);
layerVector.getElementsByTagName(“svg”)[0].appendChild(objCircle);
}
}
else if (grfHandler.format == “vml”)
{
grfHandler.createGraphic = function()
{
layerVector.innerHTML = “Menggambarkan Vektor Untuk Internet Explorer <br>”;

var objCircle = document.createElement(“v:arc”);
objCircle.setAttribute(“stroked”, “false”);
objCircle.setAttribute(“startangle”, “0”);
objCircle.setAttribute(“endangle”, “360”);
objCircle.setAttribute(“fillcolor”,”red”);
objCircle.style.width = “100”;
objCircle.style.height = “100”;
layerVector.appendChild(objCircle);
}
}
}

</script>
</head>

<body>
<div id=”canvas”>
</div>
</body>
</html>

Seperti yang dapat dilihat pada kodingan diatas, grafik vektor tidak dituliskan langsung ke dalam HTML, melainkan dengan menggunakan JavaScript. Kodingan HTML untuk membuat grafik vektor dikonversikan ke dalam JavaScript. Dengan fungsi “setAttribute”, kita dapat mengeset attribut dari vektor tersebut, beberapa style css juga dapat digunakan pada vektor. Untuk melihat attibut-attribut dan style yang dapat digunakan pada Vektor baik SVG atau VML, dapat dilihat pada link dibawah ini:
1. Dokumentasi SVG
2. Dokumentasi VML

Untuk contoh dari kodingan diatas, dapat anda klik di sini. Cobalah contoh tersebut pada berbagai macam browser.