आधुनिक वेब साइटों में एसवीजी आइकन बनाम पीएनजी आइकन

Question 1

मैं सोच रहा हूं कि कुछ आधुनिक वेब साइटें अब भी केवल पीएनजी का उपयोग आइकनों के लिए करती हैं (लेकिन यह धारणा सिर्फ मेरे अवलोकन पर आधारित है)। अब तक मुझे पता है, SVG पर PNG का उपयोग करने के मुख्य कारण IE8 हैं और यह कि SVG अधिक CPU शक्ति का उपयोग करता है (लेकिन मुझे विश्वास नहीं है कि यह साधारण 1K आइकन के लिए कोई समस्या है)। मैं एसवीजी का उपयोग करने में कई फायदे देख सकता हूं (और हम वर्तमान में उपयोग करते हैं) या तो इसका उपयोग स्प्रिट के रूप में किया जाता है, छवियों के रूप में, या एसवीजी को इनलाइन के रूप में।

(प्रश्न शोध की तलाश में: PNG स्प्राइट बनाम SVG स्प्राइट बनाम आइकॉन फोंट प्रदर्शन पर केंद्रित है और इसका प्रासंगिक उत्तर नहीं है, चिह्न फ़ॉन्ट बनाम SVG कैशिंग और नेटवर्क चिंता नेटवर्क ट्रैफ़िक पर केंद्रित है, लेकिन यह जैसे टेंपलेटिंग द्वारा आसानी से हल किया जा सकता है।)

यदि नई वेब साइट केवल आधुनिक ब्राउज़रों का समर्थन करती है, तो क्या एसवीजी का उपयोग नहीं करने का कोई कारण है (या - आइकनों के लिए पीएनजी का उपयोग करने का कोई कारण है)? यदि हम IE8 के बारे में परवाह नहीं करते हैं और एसवीजी का उपयोग अस्थायी और / या कैशिंग द्वारा समर्थित है, तो क्या केवल एसवीजी पर भरोसा करने के लिए कोई पकड़ है?

Question 2

कारण SVG एक अच्छा विकल्प हो सकता है:

यह मूल रूप से किसी भी आकार के ब्राउज़रों का समर्थन करता है, विशेषकर सीएसएस के साथ background-size
आप उन्हें ऊपर / नीचे की ओर स्केल कर सकते हैं, जैसे कि एक हॉवर इफेक्ट के लिए
आप SVG एम्बेड कर सकते हैं और उनके साथ जावास्क्रिप्ट और DOM पर वास्तविक समय में संशोधन कर सकते हैं
आप एसवीजी और एसवीजी के कुछ हिस्सों को सीएसएस (बदलते रंग, रूपरेखा, आदि) के साथ स्टाइल कर सकते हैं।
आप एसवीजी को गतिशील रूप से क्लाइंट या सर्वर पर उत्पन्न कर सकते हैं। उनके पाठ आधारित प्रकृति के कारण, आपको उन्हें बनाने के लिए निम्न-स्तरीय लाइब्रेरी या शक्तिशाली सर्वर की आवश्यकता नहीं है।

कारण पीएनजी एक अच्छा विकल्प हो सकता है:

ब्राउज़र का समर्थन
पीएनजी स्प्रिटशीट बनाने के लिए मौजूदा टूलिंग
अधिकांश लोगों के कंप्यूटर पर PNG संगत संपादक होता है
आपके ग्राफिक्स तस्वीरें या छवियों को वेक्टर करने के लिए अन्य कठिन हैं

अन्य चिंताएं:

कुछ एसवीजी संपादक आपके एसवीजी में मेटाडेटा को स्टोर कर सकते हैं, फ़ाइल का आकार बढ़ा सकते हैं और संभवतः अनजाने में डेटा को उजागर कर सकते हैं
- जैसे जब आप Inkscape में PNG निर्यात करते हैं तो यह आपके द्वारा SVG में इस डायरेक्टरी में निरपेक्ष पथ को सहेजने के लिए किया जाता है
- एसवीजी कंप्रेशर्स इसे हटा सकते हैं, लेकिन मैंने इसका परीक्षण नहीं किया है (यदि आपके पास है तो संपादित करने के लिए स्वतंत्र महसूस करें)

Question 3

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

मैं इसे किसी ऐसे व्यक्ति के रूप में कहता हूं जो वेक्टर ग्राफिक्स के साथ यूआई बनाता है। यह एक कमाल का डिज़ाइन टूल है, लेकिन डिलीवरी / बैंडविड्थ / पहुंच के लिए PNG को शीर्ष पर लाना कठिन है। कल रात मैंने एक प्रसिद्ध लोगो का परीक्षण किया। CocaCola.svg लगभग 20K था। चूंकि यह एक ठोस / सपाट रंग था, जिसे मैंने 12-रंग पैलेट संपीड़न के साथ PNG-8 के रूप में निर्यात किया और इसे 1.6K तक घटा दिया (!!!) बस कुछ लोगो के लिए यह कोई बड़ी बात नहीं है, लेकिन जब आपको 40 दिखाना होगा उनमें से .. ठीक है, आप चित्र प्राप्त करें।

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

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

हैप्पी डिजाइनिंग!

Question 4

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

मैंने कोई मूल्यवान प्रदर्शन परीक्षण नहीं किया, लेकिन तार्किक दृष्टिकोण से एसवीजी का उपयोग सावधानी से किया जाना चाहिए जब यह विशेष रूप से मध्यम आयु वर्ग के मोबाइल ब्राउज़रों (सीपीयू-तनाव) से निपटने के लिए आता है। एक चार्ट होना बहुत उपयोगी होगा जहां आप विभिन्न एंड्रॉइड और आईओएस उपकरणों पर 100 एसवीजी छवियों बनाम 100 एसवीजी छवियों द्वारा खपत सीपीयू शक्ति देख सकते हैं ...

एसवीजी के साथ एक और गलत बात यह है कि टैग को कुछ एंड्रॉइड / सैमसंग के लिए एक चौड़ाई और ऊंचाई की विशेषता की आवश्यकता है जो कुछ भी ब्राउज़र और हमारे अच्छे पुराने IE। और ए *** ई इलस्ट्रेटर जैसे अधिकांश आधुनिक एसवीजी संपादक सिर्फ "व्यूबॉक्स" विशेषता को जोड़ते हैं।

एसवीजी के बारे में सबसे अच्छी बात यह है कि यह किसी भी पिक्सेल घनत्व में अच्छा और कुरकुरा प्रदान करता है।

Question 5

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

Question 6

आइए ध्यान दें कि प्रदर्शनयोग्य SVG भयानक बन सकता है। क्रोम जैसे आधुनिक ब्राउज़रों पर भी, (2019 में यह लिखना!), Svg आइकन के कुछ 100s (व्यावहारिक रूप से 3-800) के साथ सीएमएस जैसा पृष्ठ शाब्दिक रूप से रेंडरिंग समाप्त करने के लिए 5+ सेकंड के लिए ब्राउज़र को लटका देता है। इस बीच सीपीयू को अधिकतम करना।

के रूप में कहीं उल्लेख किया, पेज में एम्बेडेड SVGs की गिनती expontentially ब्राउज़र पर लोड बढ़ जाता है, इसलिए यदि आप इस तरह के स्थिति का सामना करना होता है

विकल्प # 1: svgs को webfont में परिवर्तित करें (प्रदर्शन चार्ट यहां देखें: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

विकल्प # 2: सादे पुराने PNGs पर वापस जाएं

ऐसी स्थितियों में जहाँ आप ~ कभी भी उड़ने वाले रंग संशोधन की तरह कुछ भी नहीं करना चाहते हैं, और आपके पास एसवीजी के कई उदाहरण हैं, पुराना पीएनजी काम करता है और दिन बचाता है!