jQuery SVG vs. Raphael [zamknięte]


254

Pracuję nad interaktywnym interfejsem przy użyciu SVG i JavaScript / jQuery i próbuję zdecydować między Raphaelem a jQuery SVG . chciałbym wiedzieć

  1. Jakie są kompromisy między nimi
  2. Gdzie wydaje się być impet rozwoju.

Nie potrzebuję wsparcia VML / IE w Raphaelu ani umiejętności kreślenia jQuery SVG. Interesuje mnie przede wszystkim najbardziej elegancki sposób tworzenia, animowania i manipulowania poszczególnymi elementami na płótnie SVG.

Odpowiedzi:


194

Ostatnio użyłem zarówno Raphaela, jak i jQuery SVG - i oto moje przemyślenia:

Raphael

Plusy: dobra biblioteka początkowa, łatwa do zrobienia DUŻO rzeczy za pomocą SVG. Dobrze napisane i udokumentowane. Wiele przykładów i demonstracji. Bardzo rozszerzalna architektura. Świetne z animacją.

Wady: jest warstwą nad faktycznym znacznikiem SVG, utrudnia wykonywanie bardziej złożonych rzeczy za pomocą SVG - takich jak grupowanie (obsługuje zestawy, ale nie grupy). Nie radzi sobie świetnie z edycją już istniejących elementów.

jQuery SVG

Plusy: wtyczka jquery, jeśli już używasz jQuery. Dobrze napisane i udokumentowane. Wiele przykładów i wersji demonstracyjnych. Obsługuje większość elementów SVG, umożliwia łatwy natywny dostęp do elementów

Minusy: architektura nie jest tak rozszerzalna jak Raphael. Niektóre rzeczy mogą być lepiej udokumentowane (np. Konfiguracja elementu SVG). Nie radzi sobie świetnie z edycją już istniejących elementów. Do animacji wykorzystuje semantykę SVG - co nie jest takie świetne.

SnapSVG jako czysta wersja SVG Raphaela

SnapSVG jest następcą Raphaela. Jest obsługiwany tylko w przeglądarkach obsługujących SVG i obsługuje prawie wszystkie funkcje SVG.

Wniosek

Jeśli robisz coś szybko i łatwo, Raphael jest łatwym wyborem. Jeśli masz zamiar zrobić coś bardziej złożonego, wybrałem jQuery SVG, ponieważ mogę znacznie łatwiej manipulować znacznikami niż w przypadku Raphaela. A jeśli potrzebujesz rozwiązania innego niż jQuery, SnapSVG jest dobrym rozwiązaniem.


15
Dokumentacja RaphaelJS również nie jest świetna, jest ograniczona i czasami trzeba przejść do dokumentacji SVG lub jQuery, aby uzyskać wszystkie informacje. To powiedziawszy, z dostępnym demem (kodem źródłowym), a także forum i wieloma użytkownikami, udaje mi się uzyskać odpowiedzi, których potrzebuję.
Roalt

11
Właśnie zacząłem używać Rafaela i odkryłem, że dokumentacja jest jedną z najlepszych, jakie spotkałem dla interfejsu API javascript, z bardzo jasnymi przykładami obok bardziej formalnych specyfikacji
wheresrhys

71
Nie zapominaj, że RaphaelJS ma wsteczną kompatybilność z VML dla Internet Explorera. To OGROMNE, ponieważ SVG nie działa na starszych przeglądarkach.
strongriley,

3
Pytanie dotyczyło konkretnie SVG, a nie kompatybilności wstecznej. Jeśli pożądaniem jest grafika wektorowa dla różnych przeglądarek, masz rację.
Anatolij G,

4
Kolejnym oszustwem jQuery SVG jest to, że chociaż projekt jest openoucer (GPL i MIT), jego twórca wydaje się porzucony (wersja 1.4.5, ostatnia aktualizacja 28 kwietnia 2012). jquery.svg.dom powoduje niektóre konflikty z jQuery 1.8. Idealnie czekałbym, aż ktoś przejmie projekt i mam nadzieję, że wprowadzę go do github
Hoffmann,

53

Dla potomnych chciałbym zauważyć, że ostatecznie wybrałem Raphaela ze względu na czysty interfejs API i „bezpłatną” obsługę IE, a także dlatego, że aktywny rozwój wygląda obiecująco (obsługa zdarzeń została właśnie dodana w wersji 0.7). Pozostawiam jednak pytanie bez odpowiedzi i nadal chciałbym usłyszeć o doświadczeniach innych osób korzystających z bibliotek Javascript + SVG.


1
Ładne wsparcie IE dla Rafaela jest świetne. Kwadraty z zaokrąglonymi narożnikami w IE? ... nie ma problemu;)
Peter Ajtai

26

Jestem wielkim fanem Rafaela, a tempo rozwoju wydaje się rosnąć (wersja 0.85 została wydana pod koniec ubiegłego tygodnia). Kolejnym dużym plusem jest to, że jego programista, Dmitry Baranovskiy , pracuje obecnie nad wtyczką do tworzenia wykresów Raphaela, g.raphael , która wygląda, jakby kształtowała się dość gładko (jest kilka próbek wyników z wczesnych wersji na Flickr ) .

Jednak, aby wrzucić innego możliwego kandydata do biblioteki SVG, sieć SVG firmy Google wygląda naprawdę bardzo obiecująco (chociaż nie jestem wielkim fanem Flasha, którego używa do renderowania w przeglądarkach niezgodnych z SVG). Prawdopodobnie jeden do obejrzenia, zwłaszcza podczas zbliżającej się konferencji SVG Open .


1
W tej chwili jest to Raphael v. 1.5.2.
topright gamedev

3
nie jest wielkim problemem zauważyć, że obecna wersja to 2.1.2. Ten komentarz czeka na korektę przez innego faceta za kilka lat ...
Tebe

Kopat 'Sho Ya Nashel, Kilka lat później ... Teraz jest Raphael v2.2.1
Nathangrad

12

Raphael jest zdecydowanie łatwiejszy do skonfigurowania i rozpoczęcia, ale pamiętaj, że istnieją sposoby wyrażania rzeczy w SVG, które nie są możliwe w Raphael. Jak wspomniano powyżej, nie ma „grup”. Oznacza to, że nie można zaimplementować warstw Transfomacji współrzędnych. Zamiast tego dostępna jest tylko jedna transformacja współrzędnych.

Jeśli twój projekt zależy od zagnieżdżonych transformacji współrzędnych, Raphael nie jest dla ciebie.


11

Oh Raphael przeniósł się znacznie od czerwca. Dostępna jest nowa biblioteka wykresów, która może z nią współpracować i są bardzo przyciągające wzrok. Raphael obsługuje także pełną składnię ścieżki SVG i wprowadza naprawdę zaawansowane metody ścieżki. Przyjdź do mojej witryny w wersji 1.2.8+ (wtyczka Shameless), a następnie przejdź do strony Dmitry. http://www.irunmywebsite.com/raphael/raphaelsource.html


6

Myślę, że to nie jest całkowicie niezwiązane, ale czy zastanawiałeś się nad płótnem? coś takiego jak Process JS może to uprościć.


12
Patrzyłem zarówno na płótno w ogóle, jak i na Przetwarzanie w szczególności. Problem polega na tym, że (o ile wiem) zdarzenia myszy nie mogą być łatwo dołączane do poszczególnych elementów na płótnie, w przypadku funkcji takich jak przeciąganie i upuszczanie, w przeciwieństwie do SVG, który jest w pełni narażony na DOM.
Luke Dennis

1
Nie wykonywałem obszernej pracy z płótnem, ale spójrz na Flot - wtyczkę jquery, która używa płótna do wykresów. Całkiem dobrze radzi sobie z kliknięciami myszy.
Bharani,

4
Kliknięcia myszką tak, ale nie zdarzenia domowe na przedmiotach na płótnie. W rzeczywistości dla Canvas nie można umieścić modułu obsługi zdarzeń na kanwie (z powodu IE), chociaż można go umieścić na div, który przechowuje kanwę.
Nosredna

3
płótno doskonale nadaje się do map bitowych, SVG świetnie nadaje się do grafiki wektorowej. Zdolność SVG do skalowania jest do tego fantastyczna. Myślę, że płótno i SVG to technologie uzupełniające się.
Anatolij G

Jeśli chodzi o zdarzenia myszy dla obszaru roboczego, zapoznaj się z plikiem Easel.js, który obsługuje to wszystko za Ciebie.
Neil


5

Głosuję za Raphaelem - obsługa wielu przeglądarek, czysty interfejs API i spójne aktualizacje (jak dotąd) sprawiają, że korzystanie z niego jest przyjemnością. Bardzo dobrze gra także z jQuery. Przetwarzanie jest fajne, ale w tej chwili jest bardziej przydatne jako demo najnowocześniejszych rzeczy.



5

Dla tych, którzy nie dbają o IE6 / IE7, ten sam facet, który napisał Raphael, zbudował silnik svg specjalnie dla nowoczesnych przeglądarek: Snap.svg .. mają naprawdę fajną stronę z dobrymi dokumentami: http://snapsvg.io

snap.svg nie może być łatwiejszy w użyciu od razu po rozpakowaniu i może manipulować / aktualizować istniejące pliki SVG lub generować nowe. Możesz przeczytać te rzeczy na stronie snap.io o stronie, ale oto krótki przegląd:

Cons

  • Aby skorzystać z funkcji Snap, musisz zrezygnować z obsługi starszych przeglądarek. Raphael obsługuje przeglądarki takie jak IE6 / IE7, funkcje przyciągania obsługiwane są tylko przez IE9 i nowsze wersje, Safari, Chrome, Firefox i Opera.

Plusy

  • Implementuje pełne funkcje SVG, takie jak maskowanie, obcinanie, wzory, pełne gradienty, grupy i inne.

  • Możliwość pracy z istniejącymi plikami SVG: zawartość nie musi być generowana za pomocą Snap, aby działała z Snapem, umożliwiając tworzenie zawartości za pomocą dowolnych popularnych narzędzi do projektowania.

  • Pełna obsługa animacji za pomocą prostego, łatwego do wdrożenia JavaScript API

  • Działa z ciągami plików SVG (na przykład pliki SVG ładowane przez Ajax) bez faktycznego renderowania ich najpierw, podobnie jak kontener zasobów lub arkusz sprite.

sprawdź to, jeśli jesteś zainteresowany: http://snapsvg.io


3

Ponieważ nie jest tu jeszcze wspomniane: powinieneś także spojrzeć na Dojox.drawing , który zapewnia również dobre możliwości rysowania SVG. Ma całkiem imponujący zestaw funkcji. Właśnie rozpoczynam z nim projekt, ale wydaje mi się, że jest znacznie lepszy (przynajmniej pod względem funkcji) od Raphaela i JQuerySVG.

Ta prezentacja przekonała mnie do użycia go zamiast Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

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

Odwołanie do Dojocampus: http://docs.dojocampus.org/dojox/drawing

Pobierz Dojo (w tym Dojox): http://dojotoolkit.org/download/




0

Jeśli nie potrzebujesz obsługi VML i IE8, użyj Canvas (na przykład PaperJS). Zobacz najnowsze wersje demonstracyjne IE10 dla systemu Windows 7. Mają niesamowite animacje w Canvas. SVG nie jest w stanie zrobić nic w ich pobliżu. Ogólnie Canvas jest dostępny we wszystkich przeglądarkach mobilnych. SVG nie działa we wczesnych wersjach Androida 2.0- 2.3 (jak wiem)

Tak, Canvas nie jest skalowalny, ale jest tak szybki, że można przerysować całe płótno szybciej niż przeglądarka zdolna do przewijania portu widoku.

Z mojej perspektywy optymalizacje Microsoftu umożliwiają wykorzystanie Canvas jako zwykłego silnika GDI i wdrażanie aplikacji graficznych tak, jak robimy to teraz w systemie Windows.


1
Absolutnie zgadzam się co do czystego renderowania grafiki. Jedną z rzeczy, które SVG / VML oferuje w przypadku płótna, nie jest DOM i hierarchia zdarzeń, ponieważ narysowane elementy są pełnymi obiektami DOM, a nie surową bitmapą. W przypadku obszaru roboczego kliknięcia X / Y są najlepsze, niż można to zrobić. W każdym razie projekt już dawno się skończył, więc nie ma on obecnie znaczenia, ale dziękuję za odpowiedź. :)
Luke Dennis
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.