Blog Request tutorial? klik disini!

  • Pengenalan Format Gambar SVG

    4990 kali dibaca
    06 Feb / 2014 23:57

    Kursus Website, Kursus Web Design      Kursus Website, Kursus Web Design

     

    Saya bisa bilang SVG (Scalable Vector Graphics) adalah format gambar yang "terlupakan". Dalam sejarahnya memang sangat jarang dipakai di dalam komunitas pembuatan website. Bukan salah format gambarnya dimana format ini muncul sekitar tahun 1999, tetapi lebih ke browser support yang belum mendukung. Terutama dari ( bisa coba sebutkan?) Internet Explorer. 

    Namun, IE9 akhirnya mendukung SVG dan di setiap browser lainnya, termasuk versi untuk mobile. Apakah ini berarti, saatnya SVG menunjukkan taringnya?  

    Kursus Website, Kursus Web Design

    Dari kepanjangan SVG, kita bisa mengetahui kalau SVG adalah gambar berformat Vector. Gambar Vector terdiri dari garis, stroke dan area yang di isi dengan warna. Seperti peta, logo-logo, diagram, ilustrasi dan lainnya. SVG juga dapat digunakan untuk Font. 

    Keuntungan utama dari SVG adalah: 

    1. Gambar SVG tidak akan pecah dan bisa di besarkan ukuran gambarnya sampai tak terhingga tanpa kehilangan kualitas atau resolusi. (sebagai contoh, silahkan di zoom halaman web ini dan perhatikan gambar-gambarnya

    2. SVG dibuat menggunakan XML, sehingga itu adalah gratis dan open. (tidak ada badan/perusahaan yang "memiliki" format SVG). Anda dapat membuat gambar SVG dengan menggunakan editor text biasa seperti Notepad. Dengan statement diatas, maka kita bisa menemukan gambar-gambar SVG digunakan dalam komunitas "open source". Untuk contoh, semua logo dan diagram di Wikipedia menggunakan SVG. 

    3. Karena SVG adalah Vector, maka ukuran filenya itu biasanya kecil. Bahkan bisa di compress lagi menggunakan "gzip"

    4. Sebagai XML, maka SVG bisa di baca dan dimanipuulasikan oleh JavaScript dan bahasa lainnya. Jadi bisa digunakan untuk animasi, interactive dan lainnya. 

    5. Anda bisa memanggil file SVG sama seperti tag <img/> sama seperti JPEG, GIF atau PNG. 

    Coba lihat sebuah file SVG di text editor :

    Kursus Website, Kursus Web Design

    Hasilnya adalah sebagai berikut:

    Kursus Website, Kursus Web Design

    Silahkan cari gambar SVG smiley

    Untuk contoh kode nya bisa di akses di http://jsfiddle.net/73Xf3/






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155