Tanya Jawab SVG

Diperbarui 30 Agustus 2010 oleh Dani Iswara

Halaman ini menyajikan seputar Scalable Vector Graphic (SVG). Topik tanya jawab disadur dan dikompilasi dari beberapa sumber tercantum.

Apa itu SVG?

SVG singkatan dari Scalable Vector Graphics, sebuah format grafik (gambar; seni grafis; citra) vektor yang ditujukan terutama untuk Web. Saat ini penggunaannya meluas ke pelbagai peranti. Dalam bahasa saya, SVG adalah format gambar berstandar Web terbuka, berbasis 'Extensible Markup Language' (XML), fleksibel dan aksesibel, sebagai bagian dari konten itu sendiri, ditandai dengan tag <svg>.

Apa itu grafik vektor, dan mengapa penting?

Grafik vektor ('lines') adalah suatu cara menyajikan gambar bukan sebagai baris dan kolom piksel ('dots'), tetapi lebih sebagai suatu set instruksi bagaimana membuat sebuah gambar melalui garis atau titik yang terhubung. Sebuah gambar 'raster' seperti bitmap, PNG, JPEG, atau GIF, hanyalah sebuah seri piksel yang tidak terkoneksi ('color dots'), sedangkan sebuah gambar vektor merepresentasikan bagian yang berbeda dari suatu gambar sebagai objek yang berlainan, sehingga memungkinkan interaktivitas yang lebih baik. Jika gambar 'raster' diperbesar, akan berubah menjadi berkotak-kotak dan kabur atau tidak jelas ('pixelated'). Berbeda jika menggunakan gambar vektor yang tetap tampil baik di segala resolusi/skala layar. Gambar vektor juga umumnya memiliki ukuran berkas yang lebih kecil (terutama saat dikompresi) dibanding gambar 'raster' sejenis.
Catatan: untuk gambar fotografi, bagaimanapun, gambar 'raster' lebih dipilih. Grafik vektor lebih baik untuk seni garis, menggambar (sketsa), diagram dan grafik statistik, pemetaan, dan teks.

Di mana saya bisa belajar menggunakan SVG?

Kelompok seminat SVG di 'World Wide Web Consortium' (W3C) punya buku tentang itu yang sudah dipublikasikan, ditulis oleh Dr. David Dailey, seorang pakar SVG; buku berjudul An SVG Primer tersedia gratis. Ada juga dokumen karya Jonathan Watt berjudul SVG Authoring Guidelines yang menyampaikan cara mengatur konfigurasi server dan tipe dokumen untuk bisa menyajikan SVG. Jika Anda seorang desainer, Anda mungkin tertarik dengan karya Tavmjong Bah, Inkscape: Guide to a Vector Drawing Program, tersedia dalam versi cetak atau edisi digital gratis, yang akan mengajarkan Anda bagaimana menggunakan perkakas menggambar 'open-source' Inkscape. Ada banyak sumber tentang SVG, tetapi cara terbaik memelajarinya mungkin dengan melihat kode sumber dari suatu gambar atau aplikasi yang Anda sukai untuk melihat bagaimana itu dibuat! SVG berbasis format teks, seperti 'HyperText Markup Language' (HTML) dan 'Cascading Style Sheets' (CSS), jadi Anda dapat memelajarinya seperti Anda memelajari kedua teknologi tersebut.

Seperti apa deklarasi tipe dokumennya?

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Apa saja elemen/tag yang ada di SVG?

Untuk standar SVG 1.1, detail struktur dokumen bisa dilihat di SVG 1.1 (Second Edition) – Document structure (w3.org).

Apa perbedaan SVG dan Canvas?

SVG dan Canvas keduanya punya skrip API grafik vektor untuk menggambar di kanvas peramban Web. SVG memproduksi DOM (sebuah 'scene graph'), sedangkan Canvas menggambar ke layar secara langsung dan tidak 'menyimpan instruksi' menggambar. Ini berarti, kadang-kadang, Canvas dapat menggunakan memori yang lebih sedikit dan diurai lebih cepat. Format akhir SVG tetap berbasis vektor dan akan menyesuaikan dengan dimensi/ukuran yang dibutuhkan secara otomatis, sedangkan format akhir Canvas berbasis piksel, dan tidak dapat diubah dimensinya tanpa menghasilkan distorsi/penyimpangan meskipun skrip gambar diunduh ulang. SVG menyediakan fungsi pembantu, seperti deteksi 'bounding-box' dan 'hit-testing' untuk aksi tetikus, sedangkan Canvas adalah API dengan level yang lebih rendah, tetapi keduanya, SVG dan Canvas mengizinkan penyaji untuk meambahkan fungsionalitas dengan memanfaatkan pustaka skrip ('JavaScript'). Keduanya adalah teknologi yang saling melengkapi, dan kami merekomendasikan Anda menggunakannya sesuai kekuatan masing-masing teknologi…atau gunakan keduanya bersamaan!

Apakah SVG berbasis VML atau PostScript? Bagaimana riwayat SVG?

SVG dipengaruhi oleh beberapa format, tapi tidak berbasis salah satu format tersebut. Selengkapnya lihat Secret Origin of SVG. Anda dapat membaca riwayat pelbagai spesifikasi dan kabar tebaru SVG.

Apa saja contoh dan manfaat penerapan SVG?

SVG bisa dipakai sebagai elemen grafis di Web seperti dekoratif, logo, navigasi bergambar, dan gambar penunjang konten. Untuk alikasi interaktif, SVG dipakai pada penyajian tabel, diagram, dan grafik statistik beranimasi, presentasi dokumen, pemetaan dalam jaringan (daring), sistem informasi geografis (SIG/GIS), bahkan permainan/'games' 3 dimensi.

Di mana saya bisa melihat contoh nyata SVG?

Koleksi contoh gambar dan animasi SVG dapat dilihat di Mozilla SVG samples (croczilla.com). Salah satu yang terkenal adalah gambar macan. Kombinasinya dengan JavaScript bisa dilihat di RaphaelJS. Situs unessential side pernah menampilkan beberapa format statis SVG. Silakan cek di tag SVG.

Sejauh mana dukungan peramban Web terhadap SVG?

Jeff Schiller masih rutin memutakhirkan informasi ini di SVG support (codedread.com). Dukungan terbaik ditempati berurutan oleh peramban Web bermesin Presto (Opera), WebKit (Google Chrome, Safari), dan Gecko (Firefox).

Bagaimana peramban Web yang tidak/belum kompatibel bisa membaca SVG?

Peramban lain seperti Internet Explorer lawas membutuhkan 'plugin' untuk bisa membaca konten SVG. Bisa juga dengan memakai Raphael JavaScript yang mengonversi SVG jadi VML untuk Internet Explorer.

Bagaimana menyajikan SVG dengan tag object untuk HTML 4?

<object type="image/svg+xml" data="gambar.svg">
<img src="gambar-alternatif.jpg" alt="deskripsi gambar">
</object>

Bagaimana menyajikan SVG di (X)HTML5?

Menyajikan SVG di dokumen XHTML membutuhkan konfigurasi server. HTML5 menjanjikan penyajian SVG lebih mudah. Silakan baca tulisan saya berjudul XHTML5 Poliglot plus SVG dan MathML (Dani Iswara .com).

Referensi

• Scalable Vector Graphics (SVG) 1.1 (Second Edition) (w3.org).
• W3C SVG Working Groups (w3.org).
• SVG FAQ (w3.org).
• SVG HomePage – Mozilla (wiki.mozilla.org).
• SVG Articles – Opera (dev.opera.com).
• WebKit SVG Status (webkit.org).
• SVG Solutions for Internet Explorer (planetsvg.com).