Categories: Panduan

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.

Share
Published by
Firman Nugraha

Recent Posts

Cisco Peringkatkan Kerentanan Kritis Dalam Cisco Data Center Network Manager

Cisco mengungkapkan tiga kerentanan dalam layanannya. Ini dia penanganannya!

January 7, 2020

Optimal idM Meluncurkan OptimalCloud Partner Platform

Ini ulasan mengenai keuntungan OptimalCloud Partner Platform, platform baru milik Optimal idM!

January 6, 2020

Google Siapkan Coral Accelerator Module dan Coral Dev Board Mini untuk Tahun 2020

Google kenalkan dua koleksi baru dari Coral. Dua koleksi baru ini bakal menambah kemampuan pengembangan…

January 3, 2020

Google Kembangkan Model Kecerdasan Buatan Untuk Deteksi Kanker Payudara

Raksasa Google baru saja mengembangkan sistem pemindaian kanker payudara berbasis kecerdasan buatan. Bagaimana hasilnya, berikut…

January 3, 2020

Google Dorong Fitur Bubbles Notifications Ke Versi Stabil

Meski dikenalkan bersamaan dengan Android 10 Beta, sampai kini Bubbles Notifications masih dalam tahap pengembangan.…

December 31, 2019

Samsung Siapkan Lima Proyek dan Empat Startup C-Lab Untuk CES 2020

Samsung akan kembali memamerkan hasil program C-Lab ke ajang CES 2020. Ini dia proyek dan…

December 30, 2019