Mencoba Inline SVG di peramban Opera

March 15, 2009 – 04:09 by Dani Iswara. Words count: 684.
Last updated: Monday, April 20, 2009 at 11:43.

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:
tanda stop dan palang merah

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:

Dani IswaraDenpasar, Bali Dani Iswara .Net

Gambar di atas harusnya nampak sebagai berikut:
kotak nama

Keempat teks berwarna-warni di bawah ini dirotasi sedemikian rupa. Salah satunya sebagai pranala:
Teks ini tercetak diagonalBali Blogger CommunityDani Iswara .NetDani Iswara .NetDani Iswara .Net

Gambar di atas akan nampak seperti di bawah ini:
4 teks dirotasi

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:

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Mencoba Inline SVG di peramban Opera by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

6 Responses to post titled: Mencoba Inline SVG di peramban Opera

  1. Comment by thegands on April 18, 2009 at 13:30:11
    using Mozilla Firefox 3.0.8 on Windows XP

    thats awesome. looks like i’m beginning to make that on my blog. :D

  2. Comment by thegands on April 18, 2009 at 13:33:01
    using Mozilla Firefox 3.0.8 on Windows XP

    but for the animation, i think most browser still have uncomplete feature to render this svg. cmiiw.

  3. Comment by Dani Iswara on April 18, 2009 at 13:56:18
    using Mozilla Firefox 3.0.8 on Gentoo Linux

    thegands,
    ya bang, you should do :)
    Opera is still the best for the SVG animation, or try Firefox or Safari nightly build 8)

  4. Comment by thegands on April 18, 2009 at 15:18:00
    using Mozilla 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.

  5. Comment by dani on April 18, 2009 at 18:10:32
    using Firefox-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.

Trackbacks/Pingbacks

  1. Pingback by Mencoba Total Validator - Dani Iswara .Net on September 22, 2009 at 06:14:30
    using WordPress abc

    [...] Pun belum mengenali elemen SVG. Coba tes halaman Mencoba SVG di Peramban Opera. [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Inspiring Semantic Markup Weblogs
‹‹ Newer entries: Tes Klasik 5 Detik dan Above the Fold untuk Kebergunaan Blog Dokter