ABSTRAK
Perkembangan teknologi terutama di bidang pengembangan website akhir-akhir ini mengalami kemajuan yang cukup pesat. Bahasa pemerograman yang dipergunakan untuk membuat grafik-grafik dalam website sudah semakin beragam. Salah satu cara untuk membuat website yang penuh dengan grafik-grafik yang menarik, yaitu dengan SVG yaitu singkatan dari Scalable Vector Graphics. Pada dasarnya SVG adalah pengimplementasian objek vektor dalam web dengan menggunakan XML, digunakan untuk membuat tiga jenis objek grafik, yaitu: path, gambar dan text. SVG memberikan sebuah alternatif baru untuk penganimasian objek dan juga pembuatan web yang dinamis dan interaktif. Penulis tertarik untuk mencoba mengeksplorasi Scalable Vector Graphics yang akan penulis gunakan untuk pembuatan grafik dalam website dengan study kasus: pembuatan grafik batang pada pilkada jawa barat periode 2008-2013. Penulis mencoba untuk membuat grafik batang pada pilkada jawa barat periode 2008-2013. dan untuk menguji SVG didalam pembuatannya apakah berjalan sesuai yang diharapkan atau tidak.
Kata Kunci: SVG, Grafik.
.
i
KATA PENGANTAR
Dengan mengucapkan Puji dan syukur ke Hadirat ALLAH SWT, yang telah melimpahkan rahmat dan hidayahnya kepada kami sehingga dapat menyelesaikan penyusunan Laporan Tugas Akhir ini dengan judul, “Scalable Vector Graphics Dalam Pengembangan Web Yang Berbasis XML ” Penyusunan
laporan
tugas
akhir
ini
dibuat
untuk
menyelesaikan pendidikan strata 1 (S1) dijurusan Teknik Informatika Universitas Pasundan Bandung. Dalam Penyusunan Laporan Tugas akhir ini penulis banyak dibantu oleh berbagai pihak baik secara langsung maupun tidak langsung. Untuk itu penulis mengucapkan terimakasih yang sebesarbesarnya kepada: 1.
Ibu Hj.Ririn Dwi Agustin, IR, MT. selaku ketua jurusan teknik informatika Unpas, dan juga selaku pembimbing I. Bapak Sali Alas Majapahit, S.ST selaku Pembimbing II, atas semua bimbingannya.
2.
Kedua Orangtua saya (bapak Kusbiyanto dan Ibu Rohmah) yang tercinta, atas kasih sayang dan doa restunya dengan dukungan moril dan materil yang sangat tak ternilai.
3.
Seluruh Dosen dan Staf Tata usaha Jurusan Teknik Informatika Universitas pasundan
4.
Semua teman-teman yang telah membantu semuanya, terima kasih
5.
Lia
Oktaviani.
Si
DIA
semangat....
ii
yang
selalu
memberikan
Penulis sadar masih banyak terdapat kesalahan dan kekurangan dalam pembuatan laporan tugas akhir ini, untuk itu penulis sangat mengharapkan sekali atas saran dan kritik membangun untuk menjadi lebih baik dikemudian hari. Semoga dorongan dan bantuan yang telah diberikan mendapat balasan dari ALLAH SWT. Dan Akhir kata Penulis Ucapkan Alhamdulillah Hirrabbil Alamin”. Wassalam
Bandung
Juni 2008
Penulis
iii
DAFTAR ISI ABSTRAK ..........................................................................i KATA PENGANTAR ..........................................................ii DAFTAR ISI .......................................................................iv DAFTAR TABEL ................................................................vi DAFTAR GAMBAR ............................................................vii Bab I PENDAHULUAN 1.1 Latar Belakang Masalah ............................................... I-1 1.2 Identifikasi Masalah ...................................................... I-2 1.3 Tujuan Pembuatan ....................................................... I-2 1.4 Maksud dan Tujuan ...................................................... I-3 1.5 Metode Penelitian ......................................................... I-3 1.6 Sistematika Penulisan Laporan .................................... I-3
Bab II LANDASAN TEORI 2.1 Komputer grafis ............................................................ II-1 2.1.1 Manipulasi grafik ............................................... II-3 2.1.2 Warna Web ....................................................... II-5 2.2 SVG ............................................................................ II-12 2.2.1 Sejarah SVG ...................................................... II-15 2.2.2 Struktur SVG ..................................................... II-16 2.2.3 Syntak SVG ....................................................... II-18 2.3.4 Tags SVG .......................................................... II-18 2.3.5 SVG viewer......................................................... II-19 2.3.6 Instalasi SVG viewer ........................................... II-20 2.3 XML ............................................................................ II-21 2.3.1 Syntak XML ...................................................... II-22 2.3.2 Document Type Definition (DTD) ............... II-23
iv
Bab III EKSPLORASI 3.1 Penerapan Grafik dengan SVG .................................... III-1 3.2 Warna dalam Grafik SVG ............................................. III-2 3.3 Fungsi dan Manipulasi .................................................. III-3 3.3.1 Path ................................................................. III-3 3.3.1.1 Manipulasi Path ................................. III-3 3.3.2 Shapes ............................................................ III-7 3.3.2.1 Manipulasi Shapes ............................ III-7 3.3.2.2 Susunan Shapes di Layar ................. III-15 3.3.3 Text .................................................................. III-16 3.4 Animasi ....................................................................... III-18 3.4.1 Grafik SVG dengan Animasi ............................ III-19 3.5 Kebutuhan Perangkat Lunak ........................................ III-26 3.6 Kebutuhan Perangkat Keras ........................................ III-27
BAB IV STUDI KASUS 4.1 Deskripsi Kasus ............................................................ IV-1 4.2 Komponen Grafik Yang Dibutuhkan ............................. IV-2 4.3 Implementasi ................................................................ IV-2
BAB V Kesimpulan dan Saran 5.1 Kesimpulan .................................................................. V-1 5.2 Saran ........................................................................... V-2
DAFTAR PUSTAKA LAMPIR
v
DAFTAR TABEL
2.1 Warna-warna Merah ............................................................. II-6 2.2 Warna-warna Pink ................................................................ II-6 2.3 Warna-warna jingga ............................................................. II-6 2.4 Warna-warna Kuning ............................................................ II-7 2.5 Warna-warna ungu ............................................................... II-7 2.6 Warna-warna hijau .............................................................. II-8 2.7 Warna-warna Biru ................................................................ II-9 2.8 Warna-warna coklat ............................................................. II-10 2.9 Warna-warna Putih .............................................................. II-10 2.10 Warna-warna abu-abu ....................................................... II-11
vi
DAFTAR GAMBAR
2.1 Kualitas format .gif ................................................................ II-13 2.2 Kualitas format .svg ............................................................. II-13 2.3 hello world dalamSVG ......................................................... II-16 2.4 Instalasi SVG viewer ............................................................ II-20 3.1 Merah ................................................................................... III-2 3.2 Path dengan SVG ................................................................ III-4 3.3 Kurva .................................................................................... III-6 3.4 Segiempat dengan SVG ....................................................... III-8 3.5 Lingkaran dengan SVG ........................................................ III-10 3.6 Elips dengan SVG ................................................................ III-11 3.7 Line dengan SVG ................................................................. III-12 3.8 polyline dengan SVG ............................................................ III-13 3.9 polygone dengan SVG ......................................................... III-15 3.10 Text .................................................................................... III-17 3.11 Animasi ............................................................................... III-20 3.12 Animasi motion ................................................................... III-22 3.13 Animasi perubahan warna .................................................. III-23 3.14 Animasi transformasi .......................................................... III-25 4.1 Sebelum animasi berjalan .................................................... IV-9 4.2 Pertengahan animasi ........................................................... IV-9 4.3 Selesai animasi .................................................................... IV-9
vii
