Mencoba Inline SVG di peramban Opera
Posted: March 15, 2009 at 04:09:45 by Dani Iswara. Words count: 684.
Last updated: July 31, 2010 at 12:24:00.
<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 respons animasinya sangat lambat dan cenderung patah-patah. Berhubungan dengan respons '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 tampak sebagai berikut:
Keempat teks berwarna-warni di bawah ini dirotasi sedemikian rupa. Salah satunya sebagai pranala:
Gambar di atas akan tampak 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).
Comment by thegands on April 18, 2009 at 13:30:11
using Firefox 3.0.8 on Windows XP
thats awesome. looks like i'm beginning to make that on my blog. :D
Comment by thegands on April 18, 2009 at 13:33:01
using Firefox 3.0.8 on Windows XP
but for the animation, i think most browser still have uncomplete feature to render this svg. cmiiw.
Comment by Dani Iswara on April 18, 2009 at 13:56:18
using Firefox 3.0.8 on Gentoo
thegands,
ya bang, you should do :)
Opera is still the best for the SVG animation, or try Firefox or Safari nightly build 8)
Comment by thegands on April 18, 2009 at 15:18:00
using Firefox 3.0.8 on Windows XP
yeah. but they still render the animation not so god. opera render the svg bad. opera view the animation frame by frame but have a long delayed between the frame. it make the animation bad. Not much smooth i think.
Comment by dani on April 18, 2009 at 18:10:32
using Minefield 3.6a1pre on GNU/Linux
thegands,
I think svg animation is not their (web browser's developer) priority, but securities, web standards, new features are.
At least Fx developer said that on SMIL page.