Selama kami mengerjakan Sistem Kapta, kami akhirnya terpentok masalah penggunaan grafik di web juga akhirnya.
Untuk menampilkan suatu grafik yang dapat dengan flexibel kami modifikasi isinya seperti diperbesar atau diperkecil dan juga dapat kami ambil data-data pada grafik tersebut seperti koordinat untuk diprogram tidak dapat menggunakan tipe gambar yang biasa digunakan pada web umum (JPEG, PNG, BMP, dll). Untuk dapat menampilkan grafik yang flexibel, akhirnya kami menggunakan tipe data berbasis vektor untuk sistem yang kami buat.
SVG dan VML adalah 2 teknologi yang kami temukan yang sudah menjadi standar dalam menampilkan grafik berbasis vektod pada web atau aplikasi mobile. Untuk penjelasan panjang mengenai kedua teknologi ini dapat dilihat pada http://en.wikipedia.org/wiki/Svg dan http://en.wikipedia.org/wiki/Vml
Akan saya jelaskan secara singkat mengenai kedua teknologi tersebut, SVG dan VML adalah teknoogi yang dapat digunakan untuk mengambarkan grafik 2 dimensi berbasis vektor baik statis atau dinamis. Keduanya sama-sama merupakan turunan dari XML, oleh karena itu data-data gambar disimpan dalam bentuk teks yang terstruktur.
Yang berbeda dari kedua teknologi tersebut adalah platform yang didukung olehnya, SVG dapat digunakan pada hampir semua web browser kecuali Internet Explorer, sedangkan VML hanya dapat digunakan oleh Internet Explorer. Seperti biasa, Microsoft selalu melawan arus, oleh karena itu untuk menampilkan gambar berbasis vektor pada web yang dapat dijalankan di browser mana saja, SVG dan VML wajib untuk dipahami oleh seorang web programmer.
Disini akan saya jelaskan untuk membuat sebuah grafik SVG dengan menggunakan metode inline artinya kode grafik dituliskan didalam suatu file XHTML langsung
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG yang terintegrasi dengan XHTML</title>
</head>
<body>
<h1>SVG yang terintegrasi dengan XHTML</h1>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="100" r="50" fill="#ff0000" />
</svg>
</body>
</html>
Coba kodingan tersebut anda buat pada teks editor atau Dreamweaver lalu simpan dalam bentuk XHTML dan anda jalankan halaman tersebut pada browser selain IE. Anda akan melihat suatu grafik berbentuk lingkaran berwarna merah. Untuk contoh bisa dilihat disini
Itu adalah dasar dari menggambar grafik berbasis vektor SVG, untuk penjelasan lebih lanjut mengenai SVG dan VML bisa dilihat nanti di “Part 2”, hehe berhubung saya harus kuliah jadi tidak bisa mengetik lama-lama.
Selamat belajar