पृष्ठभूमि-छवि के रूप में एसवीजी के उपयोग का विश्लेषण

हाल ही में, लेख तेजी से दिखाई दे रहे हैं जिसमें लेखक बैकग्राउड-छवि के लिए एसवीजी का उपयोग करने की सलाह देते हैं। दरअसल, एसवीजी के इस्तेमाल से काफी फायदा होता है। सभी लेखों ने बहुत लापरवाही से एसवीजी प्रतिपादन के प्रदर्शन का उल्लेख किया, जो एक अधिक महंगा ऑपरेशन है, क्योंकि ब्राउज़र को हर बार रेखापुंज को फिर से करने की आवश्यकता होती है।

और फिर एक ठीक दिन, एक वेब एप्लिकेशन को खोलने के बाद, मैंने देखा कि मेरा ब्राउज़र लगभग 600 MiB के बारे में "मेमोरी - वन टैब" खा गया है। मैकबुक पर, रेटिना और भी खराब था। उस क्षण से, एक जांच शुरू हुई जहां स्मृति बहती है। कौन परवाह करता है, बिल्ली में आपका स्वागत है।

पहली चीज़ जो मैंने देखी, वह थी एक पॉपअप को खोलते समय मेमोरी की वृद्धि, जिसमें केवल 20 तत्व आइकनों के साथ खींचे गए थे। क्रोम में पारंगत होने के बाद, मैंने निष्कर्ष निकाला कि यह javaScript में नहीं था, CSS में नहीं, और HTML में नहीं।

हालांकि, मैंने देखा कि आइकन वाले कम तत्व मौजूद हैं, कम मेमोरी खपत होती है। यह देखने के बाद कि आइकन कहाँ से आते हैं, मैंने देखा कि उन्हें 2000px x 500px स्प्राइट से लिया गया था। एक समान आकार के साथ पीएनजी स्प्राइट के साथ एसवीजी स्प्राइट की जगह के बाद, एक चमत्कार हुआ - स्मृति उपयोग उचित सीमा पर वापस आ गया। तर्क करने के बाद, इस निष्कर्ष पर आना आसान है कि प्रत्येक छोटे आइकन के लिए एक बड़ा बिटमैप तैयार किया गया था, जिसे स्मृति पर खर्च किया गया था।
मेरे दिमाग में आया पहला विचार एसवीजी को त्यागना था। लेकिन आप इसे नहीं ले सकते हैं और इसे केवल पीएनजी से बदल सकते हैं, क्योंकि हम उन उपयोगकर्ताओं की परवाह करते हैं जिनके पास उच्च-परिभाषा मॉनिटर हैं।
एसवीजी विनिर्देश और विभिन्न लेखों की एक बड़ी संख्या (लेख के अंत में लिंक) को पढ़ने के बाद, मैंने एसवीजी का आकार पीएक्स में नहीं, बल्कि एमएम में स्थापित करने का प्रयास करने का फैसला किया। नतीजतन, जैसा कि मैंने उम्मीद की थी, रिश्तेदार इकाइयों के साथ, खपत की गई मेमोरी लगभग समान थी जैसे कि एक पीएनजी स्प्राइट का उपयोग किया गया था।

नीचे दी गई तालिका 16 आइकन प्रदान करते समय मेरी मशीन पर क्रोमियम में मेमोरी खपत दर्शाती है:

SVG, em में आयाम दिए गए हैं	९ २१६ क	डेमो
एसवीजी, आयाम पीएक्स में दिए गए हैं	101 600 कि	डेमो
पीएनजी, छोटे कैनवास का आकार	7 748 कि	डेमो
पीएनजी, बड़े कैनवास का आकार	10 060 कि	डेमो

क्या निष्कर्ष निकाला जा सकता है? दो विकल्प संभव हैं। पहला दो नियमित और रेटिन गुणवत्ता में, दो पीएनजी स्प्राइट्स का उपयोग करना है। यदि आप एसवीजी स्प्राइट्स का उपयोग करते हैं, तो सापेक्ष इकाइयों में आकार निर्दिष्ट करें, उदाहरण के लिए, उन्हें एम।
उन लेखों की सूची जो मैं SVG के बारे में पढ़ने की सलाह देता हूं:

coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg
habrahabr.ru/post/141654
www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers
www.w3.org/TR/SVG
smus.com/canvas-vs-svg-performance

UPD : और इसलिए, सामान्य शोध के दौरान, यह पता चला कि क्रोमियम-आधारित ब्राउज़रों में ऐसा व्यवहार मौजूद है। ब्राउज़र में फ़ायरफ़ॉक्स, ओपेरा, यानी एक समान प्रभाव नहीं देखा जाता है। टिप्पणियां सही रूप से इंगित करती हैं कि मेमोरी की मात्रा कैनवास के आकार पर निर्भर करती है, न कि माप की इकाइयों पर। लेकिन माप की इकाइयां एसवीजी की मापनीयता को प्रभावित कर सकती हैं, इसलिए अपने कार्य के लिए इकाई चुनें। अन्य ब्राउज़रों में की गई टिप्पणियों और परीक्षणों के लिए सभी का धन्यवाद।
UPD : code.google.com/p/chromium/issues/detail?id=196524 ने बगट्रैक में एक बग जोड़ा।
UPD : कैनरी बिल्ड में फिक्स्ड बग को बंद कर दिया गया है।