komfik_A_2_Fajar sutejo_43660(laporan)

LAPORAN PRAKTIKUM GRAFIKA KOMPUTER SCALE VECTOR GRAPHIC

Disusun Oleh: Fajar Sutejo 15/384998/TK/43660

DEPARTEMEN TEKNIK GEODESI FAKULTAS TEKNIK UNIVERSITAS GADJAH MADA YOGYAKARTA 2016

I.

MATERI Scale Vector Graphic (SVG)

II. TUJUAN 1. Mahasiswa dapat melakukan penerapan materi SVG dalam pembuatan Peta Wonosobo. 2. Mahasiswa dapat membuat skrip SVG yang benar dan sesuai dengan koordinat Peta Wonosobo dengan menggunakan program Notepad++.

III. DASAR TEORI Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh Word Wide Web Consortium (W3C) sejak tahun 1999. SVG telah direkomendasikan oleh World Wide Web Consortium (W3C) untuk menampilkan grafik serta mendeskripsikan gambar 2 dimensi dalam pengembangan web yang berbasis XML. SVG memperbolehkan tiga tipe dari obyek grafis, yaitu bentuk vektor grafis (misalkan jalur yang terdiri dari garis lurus dan kurva), gambar dan teks. Hasil dari SVG dapat juga interaktif dan dinamis. Animasi dapat didefinisikan dan ditimbulkan secara menempelkan elemen animasi SVG pada isi SVG) atau dengan menggunakan skripting. SVG dapat digunakan untuk menghasilkan berbagai macam variasi dari objek grafis, dan juga menyediakan bentuk dasar umum seperti bujur sangkar dan elips. SVG memberikan pengendalian kualitas melalui sistem koordinat dari objek grafis yang telah didefinisikan dan transformasi yang akan digunakan selama proses render. Penyimpanan berkas (file) SVG dilakukan dengan cara memberi nama ekstensinya dengan “.svg” (memakai huruf kecil semua), dan untuk menyimpan file SVG yang terkompresi memakai ekstensi “.svgz” (semua memakai huruf kecil). Sejumlah peramban web populer seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari sudah mulai mendukung penggunakan format SVG. Untuk penggunaan gambar SVG di halaman Web yang dibutuhkan adalah sebuah editor teks seperti Notepad, atau aplikasi lain yang memiliki fitur syntax-coloring, seperti Notepad++, Notepad2, atau Sublime Text 2 IV. LANGKAH KERJA 1. Membuka Virtual stereoplotter yang sudah terinstall di komputer masing masing 2. Membuat lembaran baru pada Notepad++

3. Membuat objek garis dengan mengetikkan script sebagai berikut

4. Membuat script untuk membuat objek seperti persegi dan lingkaran

5. Meembuat script untuk membuat polylines

6. Membuat script tentang membuat objek, dengan menggunakan path

V.

HASIL DAN PEMBAHASAN

GARIS

Pendefinisian garis digunakan 2 titik(x1,y1) dan titik (x2,y2). Fungsi untuk mendefinisikan garis dalam SVG adalah “line”. Untuk memberi warna biru pada garis diberilah tag stroke=”blue” dan stroke-width=”2” untuk mendefinisikan ketebalan garis PERSEGI PANJANG DAN LINGKARAN

Persegi panjang dalam svg di definisikan dengan “rect” dan memiliki titik koordinat awal (x,y) berada pada titik kiri atas dari persegi panjang itu.Untuk Mendefinisikan persegi panjang, selain titik awal diperlukan width dan height. Yang merupakan

panjang dan lebar persegi tersebut. Digunakan juga fill untuk memberi warna persegi panjang. Warna pinggiran perseg panjang didefinisikan dengan stroke=”black” sera stroke-width untuk lebarnya. Opacity untuk menerangkan atau menggelapkan warna dari stroke maupun fill

Lingkaran didefinisikan dengan pusat lingkaran dan jari jari. Dalam svg digunakan fungsi “circle” untuk mendefinisikan lingkaran. Pusat lingkaran didefinisikan dengan cx dan cy sedangkan jari jari didefinisikan dengan r

POLYLINES

Polylines atau garis dengan titik banyak. Untuk mendefinisikan polylines digunakan fungsi polylines points. Maka dari itu pedefinisiannya harus terdiri dari banyak titik untuk membentuk polylines

PATH

Path pada umumngya digunakan untuk membentuk suatu garis atau bidang dengan cara diberi titik awal(didefinisikan dengan M).Untuk membuat garis lurus digunakan L ke koordinant titik yang diinginkan. Gambar diatas adalah suatu bidang yang dibentuk dengan path. Karena banyak garis yang melengkung , maka digunakan Q dengan 2 koordinat. Koordinat pertama adalah titik kontrol untuk lengkungan dan Koordinat kedua adalah titik akhir yang dituju.

.

VI.

KESIMPULAN

1. SVG dapat digunakan untuk pembuatan beberapa object menggunakan aplikasi tulis seperti notepad. 2. SVG mempunyai fungsinya masing masing dalam membentuk objek seperti circle,rect,lines 3. Digunakan sistem koordinat pixel dalam pendefinisian objek dengan SVG

DAFTAR PUSTAKA https://id.wikipedia.org/wiki/Scalable_Vector_Graphics http://www.kelasabil.com/kelas/tik/desain-web/svg-tutorial-gambar-vektor-web