मैं SVG और JavaScript / jQuery का उपयोग करके एक इंटरैक्टिव इंटरफ़ेस पर काम कर रहा हूं, और मैं राफेल और jQuery SVG के बीच निर्णय लेने की कोशिश कर रहा हूं । मैं जानना चाहता हूं
मुझे राफेल में VML / IE समर्थन की आवश्यकता नहीं है, या jQuery SVG की साजिश रचने की क्षमता। मैं मुख्य रूप से एक एसवीजी कैनवास पर व्यक्तिगत वस्तुओं को बनाने, चेतन करने और उनमें हेरफेर करने के लिए सबसे सुरुचिपूर्ण तरीके से दिलचस्पी लेता हूं।
जवाबों:
मैंने हाल ही में राफेल और jQuery SVG दोनों का उपयोग किया है - और यहाँ मेरे विचार हैं:
पेशेवरों: एक अच्छा स्टार्टर लाइब्रेरी, एसवीजी के साथ बहुत सारी चीजें करना आसान है। अच्छी तरह से लिखा और प्रलेखित। उदाहरण और डेमो के बहुत सारे। बहुत विलक्षण वास्तुकला। एनीमेशन के साथ महान।
विपक्ष: वास्तविक एसवीजी मार्कअप पर एक परत है, जिससे एसवीजी के साथ और अधिक जटिल चीजें करना मुश्किल हो जाता है - जैसे कि समूहन (यह समूह का समर्थन करता है, लेकिन समूह नहीं)। पहले से मौजूद तत्वों के महान w / संपादन नहीं करता है।
पेशेवरों: एक jquery प्लगइन, यदि आप पहले से ही jQuery का उपयोग कर रहे हैं। अच्छी तरह से लिखा और प्रलेखित। उदाहरण और डेमो के बहुत सारे। अधिकांश एसवीजी तत्वों का समर्थन करता है, आसानी से तत्वों तक देशी पहुंच की अनुमति देता है
विपक्ष: वास्तुकला राफेल के रूप में एक्स्टेंसिबल नहीं है। कुछ चीजें बेहतर दस्तावेज की जा सकती हैं (जैसे एसवीजी तत्व को कॉन्फ़िगर करना)। पहले से मौजूद तत्वों के महान w / संपादन नहीं करता है। एनीमेशन के लिए एसवीजी शब्दार्थ पर निर्भर करता है - जो कि महान नहीं है।
SnapSVG राफेल का उत्तराधिकारी है। यह केवल एसवीजी सक्षम ब्राउज़रों में समर्थित है और एसवीजी की लगभग सभी विशेषताओं का समर्थन करता है।
यदि आप कुछ त्वरित और आसान कर रहे हैं, तो राफेल एक आसान विकल्प है। यदि आप कुछ अधिक जटिल करने जा रहे हैं, तो मैंने jQuery SVG का उपयोग करना चुना क्योंकि मैं राफेल की तुलना में वास्तविक मार्कअप को काफी आसान बना सकता हूं। और अगर आप नॉन-jQuery समाधान चाहते हैं तो SnapSVG एक अच्छा विकल्प है।
पोस्टरिटी के लिए, मैं यह नोट करना चाहूंगा कि मैंने स्वच्छ एपीआई और "मुफ्त" IE समर्थन के कारण राफेल को चुनना समाप्त कर दिया, और यह भी कि क्योंकि सक्रिय विकास आशाजनक लगता है (उदाहरण के लिए इवेंट समर्थन सिर्फ 0.7 में जोड़ा गया था)। हालाँकि, मैं अनुत्तरित प्रश्न छोड़ दूँगा, और मैं अभी भी जावास्क्रिप्ट + SVG पुस्तकालयों का उपयोग करके दूसरों के अनुभवों के बारे में सुनना चाहूंगा।
मैं राफेल का बहुत बड़ा प्रशंसक हूं और विकास की गति मजबूत होती दिख रही है (पिछले सप्ताह देर से संस्करण 0.85 जारी किया गया था)। एक और बड़ा प्लस यह है कि इसके विकासकर्ता, दिमित्री बारानोवस्की , वर्तमान में एक राफेल चार्टिंग प्लगइन, g.rapeel पर काम कर रहे हैं , जो अपने आकार को बहुत ही सुंदर बनाने के लिए लग रहा है ( फ्लिकर के शुरुआती संस्करणों से आउटपुट के कुछ नमूने हैं ) ।
हालांकि, एसवीजी लाइब्रेरी मिक्स में एक और संभावित दावेदार को फेंकने के लिए, Google का एसवीजी वेब वास्तव में बहुत आशाजनक लगता है (भले ही मैं फ्लैश का एक बड़ा प्रशंसक नहीं हूं, जो कि गैर-एसवीजी अनुरूप ब्राउज़रों में प्रस्तुत करने के लिए उपयोग करता है)। शायद एक देखने के लिए, विशेष रूप से आगामी एसवीजी ओपन सम्मेलन के साथ ।
राफेल निश्चित रूप से स्थापित करना और जाना आसान है, लेकिन ध्यान दें कि एसवीजी में चीजों को व्यक्त करने के तरीके हैं जो राफेल में संभव नहीं हैं। जैसा कि ऊपर उल्लेख किया गया है कि "समूह" नहीं हैं। इसका मतलब है कि आप कोऑर्डिनेट ट्रांसफ़ोमेशन की परतों को लागू नहीं कर सकते। इसके बजाय केवल एक समन्वयित परिवर्तन उपलब्ध है।
यदि आपका डिज़ाइन नेस्टेड कोऑर्डिनेट ट्रांसफ़ॉर्म पर निर्भर करता है, तो राफेल आपके लिए नहीं है।
ओह राफेल जून से काफी आगे बढ़ गया है। एक नई चार्टिंग लाइब्रेरी है जो इसके साथ काम कर सकती है और ये बहुत ही आकर्षक हैं। राफेल भी पूर्ण SVG पथ सिंटैक्स का समर्थन करता है और वास्तव में उन्नत पथ विधियों को शामिल कर रहा है। मेरी साइट पर 1.2.8+ देखें (बेशर्म प्लग) और फिर वहां से दिमित्री की साइट पर जाएं। http://www.irunmywebsite.com/raphael/raphaelsource.html
मुझे लगता है कि यह पूरी तरह से असंबंधित नहीं है लेकिन क्या आपने कैनवास पर विचार किया है? प्रोसेस JS जैसी कोई चीज इसे सरल बना सकती है।
तुम भी svgweb पर एक नज़र रखना चाहिए। यह IE में svg को रेंडर करने के लिए फ्लैश का उपयोग करता है, और वैकल्पिक रूप से अन्य ब्राउज़र पर (उन मामलों में जहां यह ब्राउज़र खुद से अधिक समर्थन करता है)।
मैं अपना वोट राफेल के पीछे फेंक दूंगा - क्रॉस-ब्राउज़र सपोर्ट, क्लीन एपीआई और लगातार अपडेट (अब तक) यह उपयोग करने के लिए एक खुशी है। यह बहुत अच्छी तरह से jQuery के साथ भी खेलता है। प्रसंस्करण ठंडा है, लेकिन इस समय रक्तस्रावी धार के लिए एक डेमो के रूप में अधिक उपयोगी है।
एक जावास्क्रिप्ट शुरुआत के रूप में, मैंने पाया कि रैफेल के नमूने इतने आसान नहीं हैं, मैं http://cancerbero.mbarreneche.com/raphaeltut की सलाह देता हूं , जो कि स्टेप ट्यूटोरियल बाय रियल है।
उन लोगों के लिए जो IE6 / IE7 के बारे में परवाह नहीं करते हैं, वही आदमी जिन्होंने राफेल लिखा था विशेष रूप से आधुनिक ब्राउज़रों के लिए एक svg इंजन बनाया: Snap.svg .. उनके पास अच्छे डॉक्स के साथ एक बहुत अच्छी साइट है: http://snapsvg.io
Snap.svg बॉक्स के ठीक बाहर का उपयोग करना आसान नहीं हो सकता है और मौजूदा एसवीजी को हेरफेर / अपडेट कर सकता है या नए उत्पन्न कर सकता है। आप इस सामग्री को पेज के बारे में Snap.io पर पढ़ सकते हैं, लेकिन यहाँ एक त्वरित रन डाउन है:
विपक्ष
पेशेवरों
एसवीजी की पूरी विशेषताओं को लागू करता है जैसे मास्किंग, क्लिपिंग, पैटर्न, पूर्ण ग्रेडिएंट, समूह, और बहुत कुछ।
मौजूदा एसवीजी के साथ काम करने की क्षमता: स्नैप के साथ काम करने के लिए सामग्री को स्नैप के साथ उत्पन्न करने की आवश्यकता नहीं है, जिससे आप किसी भी सामान्य डिज़ाइन टूल के साथ सामग्री बना सकते हैं।
एक सीधा, आसान-से-लागू जावास्क्रिप्ट एपीआई का उपयोग करके पूर्ण एनीमेशन समर्थन
एसवीजी के तार के साथ काम करता है (उदाहरण के लिए, अजाक्स के माध्यम से लोड की गई एसवीजी फाइलें) वास्तव में उन्हें पहले प्रस्तुत करने के बिना, एक संसाधन कंटेनर या स्प्राइट शीट के समान।
यदि आपकी रुचि हो तो इसे देखें : http://snapsvg.io
चूँकि इसका अभी तक यहाँ उल्लेख नहीं किया गया है: आपको भी देख लेना चाहिए Dojox.drawing डालनी चाहिए , जो अच्छी SVG ड्राइंग क्षमताएँ भी प्रदान करता है। यह सुविधाओं का एक बहुत प्रभावशाली सेट है। मैं अभी इसके साथ एक परियोजना शुरू कर रहा हूं, लेकिन यह मुझे लगता है कि यह राफेल और JQuerySVG के लिए बेहतर (कम से कम सुविधाओं के मामले में) है।
इस प्रस्तुति ने मुझे राफेल / JQuerySVG के बजाय इसका उपयोग करने के लिए आश्वस्त किया: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
संदर्भ: http://dojotoolkit.org/reference-guide/dojox/index.html
डोजोकैम्पस पर संदर्भ: http://docs.dojocampus.org/dojox/drawing
Dojo (Dojox सहित) डाउनलोड करें: http://dojotoolkit.org/download/
एक और svg जावास्क्रिप्ट लाइब्रेरी जिसे आप देखना चाहते हैं d3.js. http://d3js.org/
मैं राफेलजेएस का उपयोग करना पसंद करता हूं क्योंकि इसमें बेहतरीन क्रॉस-ब्राउजर क्षमताएं हैं। हालांकि, कुछ एसवीजी और वीएमएल प्रभाव राफेलजेएस (जटिल ग्रेडिएंट ...) के साथ प्राप्त नहीं किए जा सकते हैं।
Google ने IE में SVG समर्थन को सक्षम करने के लिए अपनी खुद की एक लाइब्रेरी भी विकसित की है: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
यदि आपको VML और IE8 समर्थन की आवश्यकता नहीं है, तो Canvas (उदाहरण के लिए PaperJS) का उपयोग करें। विंडोज 7 के लिए नवीनतम IE10 डेमो देखें। उनके पास कैनवस में अद्भुत एनिमेशन हैं। एसवीजी उनके करीब कुछ भी करने में सक्षम नहीं है। कुल मिलाकर कैनवस सभी मोबाइल ब्राउज़रों पर उपलब्ध है। SVG Android 2.0- 2.3 के शुरुआती संस्करणों में काम नहीं कर रहा है (जैसा कि मुझे पता है)
हाँ, कैनवस स्केलेबल नहीं है, लेकिन यह इतनी तेज़ है कि आप पूरे कैनवस को तेज़ी से फिर से खोल सकते हैं, फिर व्यू पोर्ट स्क्रॉल करने में सक्षम ब्राउज़र।
मेरे दृष्टिकोण से Microsoft के अनुकूलन से कैनवस को नियमित GDI इंजन के रूप में उपयोग करने और ग्राफिक्स अनुप्रयोगों को लागू करने का साधन मिलता है जैसे हम उन्हें अभी विंडोज के लिए करते हैं।