javascript - jQuery एसवीजी बनाम राफेल




svg raphael (10)

मैं एसवीजी और जावास्क्रिप्ट / jQuery का उपयोग कर एक इंटरैक्टिव इंटरफेस पर काम कर रहा हूं, और मैं Raphael और jQuery एसवीजी के बीच फैसला करने की कोशिश कर रहा हूं। मैं जानना चाहता हूं

  1. दोनों के बीच व्यापार-बंद क्या हैं
  2. जहां विकास गति प्रतीत होती है।

मुझे राफेल में वीएमएल / आईई समर्थन, या jQuery एसवीजी की साजिश क्षमताओं की आवश्यकता नहीं है। मैं मुख्य रूप से एक एसवीजी कैनवास पर व्यक्तिगत वस्तुओं को बनाने, एनिमेट करने और कुशल बनाने के सबसे शानदार तरीके से रूचि रखता हूं।


आपको svgweb पर भी एक नज़र रखना चाहिए। यह IE में svg प्रस्तुत करने के लिए फ़्लैश का उपयोग करता है, और वैकल्पिक रूप से अन्य ब्राउज़रों पर (उन मामलों में जहां यह ब्राउज़र से अधिक समर्थन करता है)।

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


उन लोगों के लिए जो आईई 6 / आईई 7 की परवाह नहीं करते हैं, उसी व्यक्ति ने राफेल को लिखा है, विशेष रूप से आधुनिक ब्राउज़रों के लिए एक एसवीजी इंजन बनाया है: Snap.svg .. उनके पास अच्छे दस्तावेज़ों के साथ वास्तव में एक अच्छी साइट है: SnapSVG

snap.svg बॉक्स के ठीक बाहर उपयोग करना आसान नहीं हो सकता है और मौजूदा एसवीजी में हेरफेर / अपडेट कर सकता है या नए उत्पन्न कर सकता है। आप पेज के बारे में snap.io पर यह सामान पढ़ सकते हैं लेकिन यहां एक त्वरित रन डाउन है:

विपक्ष

  • स्नैप की सुविधाओं का उपयोग करने के लिए आपको पुराने ब्राउज़र के लिए समर्थन पर जाना होगा। राफेल आईई 6 / आईई 7 जैसे ब्राउज़र का समर्थन करता है, स्नैप फीचर्स केवल आईई 9 और ऊपर, सफारी, क्रोम, फ़ायरफ़ॉक्स और ओपेरा द्वारा समर्थित हैं।

पेशेवरों

  • मास्किंग, क्लिपिंग, पैटर्न, पूर्ण ग्रेडियेंट, समूह आदि जैसे एसवीजी की पूरी विशेषताएं लागू करता है।

  • मौजूदा एसवीजी के साथ काम करने की क्षमता: स्नैप के साथ काम करने के लिए सामग्री के लिए स्नैप के साथ उत्पन्न नहीं होना चाहिए, जिससे आप किसी भी सामान्य डिज़ाइन टूल के साथ सामग्री बना सकते हैं।

  • एक सीधा, आसान-से-लागू जावास्क्रिप्ट एपीआई का उपयोग कर पूर्ण एनीमेशन समर्थन

  • एसवीजी के तारों के साथ काम करता है (उदाहरण के लिए, अजाक्स के माध्यम से लोड की गई एसवीजी फाइलें) वास्तव में उन्हें पहले प्रस्तुत करने के बिना, एक संसाधन कंटेनर या स्प्राइट शीट के समान।

यदि आप रुचि रखते हैं तो इसे SnapSVG : SnapSVG


ओह राफेल जून से काफी हद तक आगे बढ़े हैं। एक नई चार्टिंग लाइब्रेरी है जो इसके साथ काम कर सकती है और ये बहुत ही आकर्षक हैं। राफेल पूर्ण एसवीजी पथ वाक्यविन्यास का भी समर्थन करता है और वास्तव में उन्नत पथ विधियों को शामिल कर रहा है। आओ मेरी साइट पर 1.2.8+ देखें (लापरवाही प्लग) और फिर वहां से दिमित्री की साइट पर उछाल दें। http://www.irunmywebsite.com/raphael/raphaelsource.html


चूंकि इसका अभी तक उल्लेख नहीं किया गया है: आपको Dojox.drawing पर भी एक नज़र Dojox.drawing , जो अच्छी एसवीजी ड्राइंग क्षमताओं को भी प्रदान करता है। इसमें सुविधाओं का एक सुंदर प्रभावशाली सेट है। मैं बस इसके साथ एक प्रोजेक्ट शुरू कर रहा हूं, लेकिन मुझे लगता है कि यह राफेल और JQuerySVG के लिए बहुत बेहतर है (कम से कम सुविधाओं के संदर्भ में)।

इस प्रस्तुति ने मुझे राफेल / JQuerySVG के बजाय इसका उपयोग करने के लिए आश्वस्त किया: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

संदर्भ: http://dojotoolkit.org/reference-guide/dojox/index.html

Dojocampus पर संदर्भ: http://docs.dojocampus.org/dojox/drawing

Dojo डाउनलोड करें (Dojox सहित): http://dojotoolkit.org/download/


मुझे लगता है कि यह पूरी तरह से असंबंधित नहीं है लेकिन क्या आपने कैनवास पर विचार किया था? प्रोसेस जेएस जैसे कुछ इसे आसान बना सकते हैं।


मैं राफेल का एक बड़ा प्रशंसक हूं और विकास की गति मजबूत हो रही है (संस्करण 0.85 पिछले सप्ताह के अंत में जारी किया गया था)। एक और बड़ा प्लस यह है कि इसके डेवलपर, दिमित्री g.raphael , वर्तमान में राफेल चार्टिंग प्लगइन पर काम कर रहे हैं, g.raphael , जो दिखता है कि यह बहुत चिकना हो रहा है ( Flickr पर शुरुआती संस्करणों से आउटपुट के कुछ नमूने हैं) ।

हालांकि, एसवीजी लाइब्रेरी मिश्रण में एक और संभावित दावेदार फेंकने के लिए, Google का एसवीजी वेब वास्तव में बहुत ही आशाजनक दिखता है (भले ही मैं फ्लैश का बड़ा प्रशंसक नहीं हूं, जिसका उपयोग गैर-एसवीजी अनुपालन ब्राउज़र में प्रस्तुत करने के लिए किया जाता है)। शायद एक देखने के लिए, विशेष रूप से आने वाले एसवीजी ओपन सम्मेलन के साथ


मैं राफेलजेएस का उपयोग करना पसंद करता हूं क्योंकि इसमें बड़ी क्रॉस-ब्राउज़र क्षमताएं हैं। हालांकि, कुछ एसवीजी और वीएमएल प्रभाव राफेलजेएस (जटिल ग्रेडियेंट्स ...) के साथ हासिल नहीं किए जा सकते हैं।

Google ने आईई में एसवीजी समर्थन को सक्षम करने के लिए अपनी खुद की लाइब्रेरी भी विकसित की है: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip


मैंने हाल ही में राफेल और jQuery एसवीजी दोनों का उपयोग किया है - और यहां मेरे विचार हैं:

राफेल

पेशेवर: एक अच्छी स्टार्टर लाइब्रेरी, एसवीजी के साथ बहुत सी चीजें करने में आसान है। अच्छी तरह से लिखा और दस्तावेज। उदाहरण और डेमो के बहुत सारे। बहुत विस्तारणीय वास्तुकला। एनीमेशन के साथ बढ़िया।

विपक्ष: वास्तविक एसवीजी मार्कअप पर एक परत है, एसवीजी के साथ अधिक जटिल चीजें करना मुश्किल बनाता है - जैसे समूह बनाना (यह समूह का समर्थन करता है, लेकिन समूह नहीं)। पहले से मौजूद तत्वों के महान w / संपादन नहीं करता है।

jQuery एसवीजी

पेशेवर: एक jquery प्लगइन, अगर आप पहले से ही jQuery का उपयोग कर रहे हैं। अच्छी तरह से लिखा और दस्तावेज। उदाहरण और डेमो के बहुत सारे। अधिकांश एसवीजी तत्वों का समर्थन करता है, आसानी से तत्वों तक मूल पहुंच की अनुमति देता है

विपक्ष: वास्तुकला राफेल के रूप में एक्स्टेंसिबल नहीं है। कुछ चीजें बेहतर दस्तावेज हो सकती हैं (जैसे एसवीजी तत्व की कॉन्फ़िगरेशन)। पहले से मौजूद तत्वों के महान w / संपादन नहीं करता है। एनीमेशन के लिए एसवीजी अर्थशास्त्र पर निर्भर करता है - जो कि महान नहीं है।

राफेल के शुद्ध एसवीजी संस्करण के रूप में SnapSVG

स्नैपएसवीजी राफेल का उत्तराधिकारी है। यह केवल एसवीजी सक्षम ब्राउज़र में समर्थित है और एसवीजी की लगभग सभी सुविधाओं का समर्थन करता है।

निष्कर्ष

यदि आप कुछ तेज़ और आसान कर रहे हैं, तो राफेल एक आसान विकल्प है। यदि आप कुछ और जटिल करने जा रहे हैं, तो मैंने jQuery एसवीजी का उपयोग करना चुना क्योंकि मैं राफेल के मुकाबले वास्तविक मार्कअप को काफी आसान बना सकता हूं। और यदि आप एक गैर-jQuery समाधान चाहते हैं तो स्नैपएसवीजी एक अच्छा विकल्प है।


राफेल सेट अप करने और जाने के लिए निश्चित रूप से आसान है, लेकिन ध्यान दें कि एसवीजी में चीजों को व्यक्त करने के तरीके हैं जो राफेल में संभव नहीं हैं। जैसा ऊपर बताया गया है वहां कोई "समूह" नहीं है। इसका तात्पर्य है कि आप कोऑर्डिनेट ट्रांसफ़ोमेशन की परतों को कार्यान्वित नहीं कर सकते हैं। इसके बजाय केवल एक समन्वय परिवर्तन उपलब्ध है।

यदि आपका डिज़ाइन नेस्टेड समन्वय परिवर्तनों पर निर्भर करता है, तो राफेल आपके लिए नहीं है।


वंशावली के लिए, मैं यह ध्यान रखना चाहता हूं कि स्वच्छ एपीआई और "फ्री" आईई समर्थन की वजह से मैंने राफेल का चयन किया, और यह भी कि सक्रिय विकास वादा करता है (घटना समर्थन उदाहरण के लिए 0.7 में जोड़ा गया था)। हालांकि, मैं प्रश्न अनुत्तरित छोड़ दूंगा, और मैं अभी भी जावास्क्रिप्ट + एसवीजी पुस्तकालयों का उपयोग करके दूसरों के अनुभवों के बारे में सुनना चाहता हूं।





raphael