Mencoba Inline SVG di peramban Opera

Animasi dengan inline SVG (Scalable Vector Graphics) ini hanya sempat saya coba di peramban Opera 10.00 Linux. Mungkin juga dapat tampil normal di beberapa peramban modern Anda (Opera 9.5+, Firefox 3.5+['nightly-builds'], Safari 3.x+). Maaf untuk pengguna Internet Explorer dan peramban versi ‘mobile’.

Halaman ini adalah halaman percobaan. Tidak aksesibel sepenuhnya (tidak dapat diakses multi peramban, termasuk pembaca via ‘feed reader’, dan agregator[?]). Tidak juga valid XHTML dan XML, walau hal tersebut memungkinkan dibuat. Masalah konversi XHTML pada WordPress?

SVG pada dasarnya adalah grafis yang ditampilkan dalam format XML (‘Extensible Markup Language’). Bisa juga ditampilkan sebagai objek (<object>) berformat java dengan bantuan ‘plugin’ atau semacam ‘SVG viewer’ di sisi pengguna/peramban. Objek berformat .svg dapat dibuat dengan perangkat ‘open source’ pengolah vektor, Inkscape.

Ada beberapa contoh SVG yang sempat saya coba di halaman ini, tapi respon animasinya sangat lambat dan cenderung patah-patah. Berhubungan dengan respon ’server’? Koneksi Internet? Jadi, maaf, SVG dengan efek animasi batal saya tampilkan. Saya sediakan pranala untuk mencobanya langsung dengan peramban favorit Anda.

Jika ada yang ingin mencoba, silakan buka taut berikut, efek animasi teks dan warna latar dengan SVG, memakai peramban Opera terbaru. Coba bandingkan dengan peramban kesayangan Anda lainnya.

Manfaat SVG

SVG biasanya dapat digunakan untuk:

• menggantikan format gambar berukuran besar
• memperkaya tampilan HTML
• animasi, interaksi, presentasi
• pemetaan/(GIS), diagram, permainan 3 dimensi, dll.

Contoh SVG

Gambar dapat tampil di peramban yang memahami SVG walau dalam pengaturan ‘disable images’. Teorinya, SVG masih dapat tampil baik di peramban Opera 9.5+ (bermesin Presto), Firefox 1.5+ (Gecko), Safari 3.x+ (WebKit), atau yang bermesin serupa.

SVG inline berikutnya adalah rekaan saya saja.

Gambar berikut berupa tanda stop/dilarang masuk/dilarang melintas (di sebelah kiri) dan palang merah dalam lingkaran, bergaris pinggir merah (di sisi kanan gambar sebelumnya):

Gambar di atas tidak muncul pada pengguna Internet Explorer atau peramban lawas yang belum mampu membaca SVG. Pengguna peramban Internet Explorer (suatu saat nanti; IE9?) harusnya akan melihat gambar seperti di bawah:

Di bawah ini berupa persegi panjang, latar hitam plus efek ‘opaque’, garis pinggir abu, ujung ’rounded’, di tengahnya (kiri bawah kotak) memuat teks Dani Iswara .Net berwarna putih (berfungsi sebagai pranala/dapat diklik kiri), tanpa animasi. Di bawahnya berupa bangun elips dengan latar berwarna merah muda/ungu(?), garis pinggir abu, bertuliskan Dani Iswara dan ‘Denpasar, Bali’, dengan kombinasi garis hijau lemon:

Gambar di atas harusnya nampak sebagai berikut:

Keempat teks berwarna-warni di bawah ini dirotasi sedemikian rupa. Salah satunya sebagai pranala:

Gambar di atas akan nampak seperti di bawah ini:

Jika sekadar ‘fun’ (dengan kode rumitnya itu, dimana ‘fun’-nya ya..), lihat juga anak singa yang manis, kupu-kupu yang cantik, atau permainan tetris sederhana ini. Lainnya ada di kumpulan koleksi SVG.

Kode sumber silakan dilihat via peramban masing-masing ( ctrl + u ). Selamat berkreasi…

Simak juga:

• panduan membuat SVG
• info terkini dukungan SVG di peramban (blog Codedread.com ini juga banyak memakai SVG)
• SVG dan CSS di WebKit (banyak SVG-nya juga).

Share on: Delicious™ | Digg™ | Facebook™ | Twitter™.