Categories: Berita

Grafik Berbasis Vektor Pada Web Dengan SVG / VML – Part 1

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

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