शुद्ध एसवीजी पर कारें

हाल ही में, SVG एनीमेशन मेरे लिए एक बड़ी प्रेरणा रही है। उसकी मदद से, सरल तत्वों से प्रभावशाली चीजें बनाई जा सकती हैं। उदाहरण के लिए, आज मैंने कारों के बारे में एक डेमो बनाने का काम पूरा किया और ख़ुशी से अपने ब्लॉग पर इसके बारे में लिखा ।

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

अपडेट:
रैली कारों, दौड़ , त्वरण और ब्रेकिंग , पार्किंग , हेडलाइट्स वाली कार के लिए सीधा लिंक।

मैंने अभ्यास के लिए फैसला किया - किसी तरह के क्लीपारा से एक वेक्टर छोटी कार लेने के लिए और इसके साथ खेलना। यह कहना आसान है - औसतन एक छवि का वजन लगभग 24Kb है। यह पता चला है कि विशेष सेटिंग्स के बिना वेक्टर संपादकों में चित्र खींचे जाते हैं। नतीजतन, यह पता चला है कि कार के एक साधारण समोच्च (पथ तत्व) में निर्देशांक की जानबूझकर अत्यधिक शीट होती है। डिफ़ॉल्ट रूप से, Inkscape निर्देशांक को सापेक्ष बनाता है और परिणामस्वरूप, कई संख्याएं नकारात्मक हो जाती हैं। इसके अलावा, बिंदु के बाद वर्णों की संख्या 4-5 तक पहुंच सकती है।
निष्कर्ष: यदि आप आलसी नहीं हैं, तो सक्षम छवि अनुकूलन पर आप 24Kb से 5-7Kb बचा सकते हैं।

कोई कहेगा कि मैचों को सहेजना दिलचस्प नहीं है। मुझे आपत्ति है, पथ तत्व में अंकों की संख्या को कम करने और परिणामस्वरूप DOM पेड़ में तत्वों की संख्या को कम करने से ब्राउज़र के लिए जीवन आसान हो सकता है और उपयोगकर्ता के कंप्यूटर को राहत मिल सकती है।

अनुकूलित एसवीजी कार प्राप्त करने के बाद, मैंने देखा कि फ़ायरफ़ॉक्स \ ओपेरा में समोच्च चिकना हो गया है, और क्रोमियम में यह नोकदार है। यदि विशेषज्ञ मुझे बताते हैं कि क्या मामला है, तो मैं आभारी रहूंगा।

विभिन्न ब्राउज़रों में अपने काम की जाँच की प्रक्रिया में स्वयं एनिमेशन बनाने के बाद, मैंने निम्नलिखित पाया:
1. फ़ायरफ़ॉक्स प्रोसेसर को ओपेरा और क्रोमियम की तुलना में काफी अधिक लोड करता है।
2. स्प्लिंस के साथ एनीमेशन ने ओपेरा में किसी भी समस्या के बिना काम किया, और फ़ायरफ़ॉक्स और क्रोमियम में यह काफी शानदार तरीके से व्यवहार करता है और मेरे मामले में दोनों ब्राउज़रों के लिए एक कार्य संयोजन खोजना भी संभव नहीं था।

यदि किसी के पास असमान एनीमेशन का उदाहरण है जो सभी ब्राउज़रों में काम करता है - तो मैं लिंक के लिए धन्यवाद कहूंगा।