jQuery SVG vs Raphael [ditutup]

Saya sedang mengerjakan antarmuka interaktif menggunakan SVG dan JavaScript / jQuery, dan saya mencoba untuk memutuskan antara Raphael dan jQuery SVG . Saya ingin tahu

1. Apa kompromi antara keduanya
2. Di mana momentum pembangunan tampaknya berada.

Saya tidak memerlukan dukungan VML / IE di Raphael, atau kemampuan merencanakan jQuery SVG. Saya terutama tertarik pada cara paling elegan untuk membuat, menghidupkan, dan memanipulasi item individual pada kanvas SVG.

Saya baru-baru ini menggunakan Raphael dan jQuery SVG - dan inilah pemikiran saya:

Raphael

Pro: perpustakaan pemula yang baik, mudah untuk melakukan banyak hal dengan SVG dengan cepat. Ditulis dan didokumentasikan dengan baik. Banyak contoh dan Demo. Arsitektur yang sangat luas. Sangat hebat dengan animasi.

Kontra: adalah lapisan di atas markup SVG yang sebenarnya, membuatnya sulit untuk melakukan hal-hal yang lebih kompleks dengan SVG - seperti pengelompokan (mendukung Set, tetapi bukan grup). Tidak bagus jika mengedit elemen yang sudah ada.

jQuery SVG

Pro: plugin jquery, jika Anda sudah menggunakan jQuery. Ditulis dan didokumentasikan dengan baik. Banyak contoh dan demo. Mendukung sebagian besar elemen SVG, memungkinkan akses asli ke elemen dengan mudah

Cons: arsitektur tidak bisa diperluas seperti Raphael. Beberapa hal dapat didokumentasikan dengan lebih baik (seperti mengkonfigurasi elemen SVG). Tidak bagus jika mengedit elemen yang sudah ada. Bergantung pada semantik SVG untuk animasi - yang tidak terlalu bagus.

SnapSVG sebagai versi SVG murni dari Raphael

SnapSVG adalah penerus Raphael. Ini didukung hanya di browser yang diaktifkan SVG dan mendukung hampir semua fitur SVG.

Kesimpulan

Jika Anda melakukan sesuatu yang cepat dan mudah, Raphael adalah pilihan yang mudah. Jika Anda akan melakukan sesuatu yang lebih kompleks, saya memilih untuk menggunakan jQuery SVG karena saya dapat memanipulasi markup yang sebenarnya secara signifikan lebih mudah daripada dengan Raphael. Dan jika Anda menginginkan solusi non-jQuery maka SnapSVG adalah pilihan yang baik.

Untuk anak cucu, saya ingin mencatat bahwa saya akhirnya memilih Raphael, karena API bersih dan dukungan IE "gratis", dan juga karena pengembangan aktif terlihat menjanjikan (dukungan acara baru saja ditambahkan dalam 0,7, misalnya). Namun, saya akan meninggalkan pertanyaan yang belum terjawab, dan saya masih tertarik untuk mendengar tentang pengalaman orang lain menggunakan perpustakaan Javascript + SVG.

Saya penggemar berat Raphael dan momentum pengembangan tampaknya kuat (versi 0.85 dirilis akhir pekan lalu). Nilai tambah besar lainnya adalah bahwa pengembangnya, Dmitry Baranovskiy , saat ini sedang mengerjakan plugin charting Raphael, g.raphael , yang sepertinya akan menjadi sangat apik (ada beberapa sampel output dari versi awal di Flickr ) .

Namun, hanya untuk melemparkan pesaing lain yang mungkin ke dalam campuran perpustakaan SVG, SVG Web Google memang terlihat sangat menjanjikan (meskipun saya bukan penggemar besar Flash, yang digunakannya untuk merender dalam browser yang tidak sesuai dengan SVG). Mungkin satu untuk menonton, terutama dengan konferensi Terbuka SVG mendatang .

Raphael jelas lebih mudah untuk diatur dan dijalankan, tetapi perhatikan bahwa ada cara untuk mengekspresikan hal-hal dalam SVG yang tidak mungkin di Raphael. Seperti disebutkan di atas tidak ada "grup". Ini menyiratkan bahwa Anda tidak dapat menerapkan lapisan Transfomasi Koordinat. Sebaliknya hanya ada satu transformasi koordinat yang tersedia.

Jika desain Anda bergantung pada transformasi koordinat bersarang, Raphael bukan untuk Anda.

Oh Raphael telah pindah secara signifikan sejak Juni. Ada perpustakaan charting baru yang dapat bekerja dengannya dan ini sangat menarik. Raphael juga mendukung sintaks jalur SVG lengkap dan menggabungkan metode jalur yang sangat canggih. Ayo lihat 1.2.8+ di situs saya (plug Shameless) dan kemudian bangkit ke situs Dmitry dari sana. http://www.irunmywebsite.com/raphael/raphaelsource.html

Saya pikir itu tidak sepenuhnya terkait tetapi apakah Anda menganggap kanvas? sesuatu seperti Proses JS dapat membuatnya lebih sederhana.

Anda juga harus melihat pada svgweb. Ini menggunakan flash untuk membuat svg di IE, dan secara opsional di browser lain (dalam kasus di mana ia mendukung lebih dari browser itu sendiri).

http://code.google.com/p/svgweb/

Saya akan memberikan suara saya di belakang Raphael - dukungan lintas-browser, API bersih, dan pembaruan yang konsisten (sejauh ini) menjadikannya menyenangkan untuk digunakan. Ini bermain sangat baik dengan jQuery juga. Pemrosesan itu keren, tetapi lebih berguna sebagai demo untuk hal-hal yang berdarah saat ini.

Sebagai seorang pemula Javascript, saya menemukan sampel Rapahel tidak begitu mudah, saya sarankan http://cancerbero.mbarreneche.com/raphaeltut , yang merupakan tutorial langkah demi langkah yang nyata.

Bagi mereka yang tidak peduli tentang IE6 / IE7, orang yang sama yang menulis Raphael membangun mesin svg khusus untuk browser modern: Snap.svg .. mereka memiliki situs yang sangat bagus dengan dokumen yang bagus: http://snapsvg.io

snap.svg tidak dapat lebih mudah digunakan langsung dari kotak dan dapat memanipulasi / memperbarui SVG yang ada atau membuat yang baru. Anda dapat membaca hal-hal ini di snap.io tentang halaman tetapi ini adalah langkah cepatnya:

Cons

• Untuk memanfaatkan fitur jepretan, Anda harus melupakan dukungan untuk browser lama. Raphael mendukung browser seperti IE6 / IE7, fitur jepret hanya didukung oleh IE9 ke atas, Safari, Chrome, Firefox, dan Opera.

Pro

• Menerapkan fitur lengkap SVG seperti masking, kliping, pola, gradien penuh, grup, dan banyak lagi.

• Kemampuan untuk bekerja dengan SVG yang ada: konten tidak harus dibuat dengan Snap agar dapat bekerja dengan Snap, memungkinkan Anda untuk membuat konten dengan alat desain umum apa pun.

• Dukungan animasi penuh menggunakan JavaScript API yang langsung dan mudah diimplementasikan

• Bekerja dengan string SVG (misalnya, file SVG dimuat melalui Ajax) tanpa harus benar-benar membuatnya terlebih dahulu, mirip dengan wadah sumber daya atau sprite sheet.

lihatlah jika Anda tertarik: http://snapsvg.io

Karena belum disebutkan di sini: Anda juga harus melihat Dojox.drawing , yang juga menyediakan kemampuan menggambar SVG yang baik. Ini memiliki serangkaian fitur yang cukup mengesankan. Saya baru saja memulai sebuah proyek dengan itu, tetapi menurut saya itu jauh lebih unggul (setidaknya dalam hal fitur) untuk Raphael dan JQuerySVG.

Presentasi ini meyakinkan saya untuk menggunakannya daripada Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

Referensi: http://dojotoolkit.org/reference-guide/dojox/index.html

Referensi tentang Dojocampus: http://docs.dojocampus.org/dojox/drawing

Unduh Dojo (termasuk Dojox): http://dojotoolkit.org/download/

Pustaka javascript svg lain yang mungkin ingin Anda lihat adalah d3.js. http://d3js.org/

Saya lebih suka menggunakan RaphaelJS karena memiliki kemampuan lintas-browser yang hebat. Namun, beberapa efek SVG & VML tidak dapat dicapai dengan RaphaelJS (gradien kompleks ...).

Google juga telah mengembangkan perpustakaannya sendiri untuk mengaktifkan dukungan SVG di IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

Jika Anda tidak memerlukan dukungan VML dan IE8 maka gunakan Canvas (PaperJS misalnya). Lihatlah demo IE10 terbaru untuk Windows 7. Mereka memiliki animasi luar biasa di Canvas. SVG tidak mampu melakukan apa pun yang dekat dengan mereka. Kanvas keseluruhan tersedia di semua browser seluler. SVG tidak bekerja di Android 2.0- 2.3 versi awal (seperti yang saya tahu)

Ya, Canvas tidak dapat diskalakan, tetapi sangat cepat sehingga Anda dapat menggambar ulang seluruh kanvas lebih cepat dari browser yang mampu menggulir port tampilan.

Dari perspektif saya, optimasi Microsoft menyediakan sarana untuk menggunakan Canvas sebagai mesin GDI biasa dan mengimplementasikan aplikasi grafis seperti yang kami lakukan untuk Windows sekarang.