jQuery SVG vs Raphael [ditutup]


254

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.

Jawaban:


194

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.


15
Dokumentasi RaphaelJS tidak terlalu bagus, itu terbatas dan Anda kadang-kadang harus masuk ke dokumentasi SVG atau jQuery untuk mendapatkan semua informasi. Yang mengatakan, dengan demo (kode sumber) tersedia serta forum dan banyak pengguna, saya berhasil mendapatkan jawaban yang saya butuhkan.
Roalt

11
Saya baru saja mulai menggunakan Raphael dan menemukan dokumentasi sebagai beberapa yang terbaik yang pernah saya temui untuk API javascript, dengan contoh yang sangat jelas di sebelah spesifikasi yang lebih formal
wheresrhys

71
Jangan lupa bahwa RaphaelJS memiliki kompatibilitas ke belakang ke VML untuk Internet Explorer. Itu SANGAT BESAR karena SVG tidak berfungsi pada peramban yang lebih lama.
Strongriley

3
Pertanyaan khusus tentang SVG, bukan kompatibilitas ke belakang. Jika keinginan adalah grafik vektor lintas browser, Anda benar.
Anatoly G

4
Kon jQuery SVG lain adalah bahwa proyek meskipun proyek ini adalah opensoucer (GPL dan MIT) tampaknya ditinggalkan oleh pengembangnya (versi 1.4.5 pembaruan terakhir 28 April 2012). jquery.svg.dom menyebabkan beberapa konflik dengan jQuery 1.8. Idealnya saya akan menunggu seseorang untuk mengambil alih proyek dan mudah-mudahan memasukkannya ke github
Hoffmann

53

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.


1
Dukungan IE yang bagus untuk Raphael sangat bagus. Kotak dengan sudut bulat di IE? ... tidak masalah;)
Peter Ajtai

26

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 .


1
Raphael v. 1.5.2 saat ini.
toped gamedev

3
itu bukan masalah besar untuk memperhatikan bahwa versi saat ini 2.1.2. Komentar ini menunggu untuk dikoreksi oleh beberapa lelaki lain dalam beberapa tahun ...
Tebe

Kopat 'Sho Ya Nashel, Beberapa tahun kemudian ... Sekarang Raphael v2.2.1 sekarang
Nathangrad

12

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.


11

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


6

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


12
Saya telah melihat kanvas secara umum dan Pemrosesan pada khususnya. Masalahnya adalah (sejauh yang saya tahu) acara mouse tidak dapat dengan mudah dilampirkan ke item individual di kanvas, untuk fitur seperti drag and drop, tidak seperti SVG, yang sepenuhnya terpapar ke DOM.
Luke Dennis

1
Saya belum melakukan pekerjaan yang luas dengan kanvas tetapi melihat Flot - jquery plugin yang menggunakan kanvas untuk bagan. Ini menangani mouseclicks dengan cukup baik.
Bharani

4
Mouseclicks ya, tapi bukan acara dom pada item di kanvas. Bahkan, untuk Canvas Anda tidak bisa meletakkan event handler di atas kanvas (karena IE), meskipun Anda bisa meletakkannya di div yang memegang kanvas.
Nosredna

3
kanvas sangat bagus untuk bitmap, SVG bagus untuk grafis vektor. Kemampuan SVG untuk skala luar biasa untuk itu. Saya pikir kanvas dan SVG adalah teknologi yang saling melengkapi.
Anatoly G

Mengenai acara mouse untuk kanvas, lihat Easel.js yang menangani semua ini untuk Anda.
Neil

6

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/


5

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.



5

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


3

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/




0

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.


1
Untuk rendering grafik murni, saya sangat setuju. Satu hal yang ditawarkan SVG / VML yang kanvasnya tidak adalah DOM dan hirarki peristiwa, karena elemen yang ditarik adalah objek DOM penuh daripada bitmap mentah. Dengan kanvas, X / Y klik coords adalah yang terbaik dari yang bisa dilakukan. Bagaimanapun, proyek ini sudah lama berlalu, jadi saat ini tidak relevan, tetapi terima kasih atas jawaban Anda. :)
Luke Dennis
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.