क्या एसवीजी छवियों को उच्च रिज़ॉल्यूशन पीएनजी, जेपीजी या जीआईएफ की तुलना में बेहतर स्केल किया जाता है?

Question

मुझे पता है कि यदि आप एक छवि को स्केल-अप करना चाहते हैं, तो एक एसवीजी एक बुद्धिमान विकल्प है।

हालांकि, मेरी स्थिति यह है कि मेरे पास ऐसे आइकन हैं जो मैं चाहता हूं कि उपयोगकर्ता सीएमएस के माध्यम से अपलोड करने में सक्षम हों। SVGs बनाने के लिए बस थोड़ा मुश्किल है, और इसलिए jpg, gif या png ऐडिंस के लिए आदर्श प्रारूप लगता है।

यदि प्रदर्शन आकार से समान या बड़ा अपलोड किया जाता है, और सही अनुपात में रखा जाता है, तो क्या आकार में कम होने पर SVG की तरह jpgs, gifs या pngs उच्च गुणवत्ता वाले हो सकते हैं?

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

Comments

एक अच्छा सवाल है, लेकिन मेरा मानना ​​है कि उत्तर "यह ब्राउज़र पर निर्भर करता है"।

— usr2564301

Answer 1

(नोट: कृपया इस से पहले ओपी का जवाब पढ़ें , क्योंकि मेरा जवाब ओपी की जांच पर टिप्पणी है)

यह एंड्रॉइड क्रोम का एक ज्ञात मुद्दा है। अपने कुछ बिल्ड पर उन्होंने एंटी एलियासिंग को निष्क्रिय कर दिया, जिससे वेक्टर आकृतियाँ कुरकुरा किनारों के साथ प्रदान की गईं। इसका कारण एंटी अलियासिंग गणना द्वारा बनाए गए अधिभार को कम करना था। शिकायत के कारण उन्होंने एक अपडेट जारी किया जिसमें एंटी अलियासिंग सक्षम होना चाहिए था।

इस समस्या पर चर्चा करने के लिए स्टैक ओवरफ्लो में कई सूत्र हैं। यहाँ उनमें से एक है:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

मुझे IPod टच सफारी पर उसी समस्या का संदर्भ नहीं मिला, लेकिन शायद यह एक्सट्रपलेशन करने के लिए सुरक्षित है और मान लें कि समस्या समान है।

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

Comments

जोड़ने -webkit- बैकफेस-दृश्यता: छिपे हुए का अर्थ है कि गैर-svgs आइपॉड पर बिल्कुल उसी तरह से धब्बा है जैसे कि svgs, और जो मेरे प्रश्न का उत्तर देता है - यानी स्केलिंग करते समय दूसरे पर एक लेने की आवश्यकता नहीं है। अजीब तरह से एंड्रॉइड फिक्स एंड्रॉइड क्रोम / देशी ब्रोस्वर के मेरे संस्करण पर रेंडरिंग व्यवहार को मानकीकृत करने के लिए प्रतीत नहीं होता है, लेकिन यह एक अलग मुद्दा है। आपकी सहायता के लिए धन्यवाद।

— रिचर्ड बी

Answer 2

मैंने अभी एक परीक्षण किया है और केवल अंतर मोबाइल ब्राउज़र पर दिखाई देता है।

मैंने ट्विटर आइकन की 990 x 900px छवि बनाई (यह आइकन बहुत अच्छा स्केलिंग के लिए एक डिज़ाइन विस्तृत है, इसलिए इस परीक्षण के लिए अच्छा है)। मैंने इसे एसवीजी, जेपीजी, जीआईएफ, ट्रांसपेरेंट जीआईएफ (सिर्फ बर्ड शेप, नो बैकग्राउंड कलर, इसे सीएसएस के साथ जोड़कर), पीएनजी, पारदर्शी पीएनजी के रूप में सहेजा।

मैं फिर इनको 15px, 25px, 50px, 100px और 150px तक सिकोड़ देता हूँ।

यहाँ फ़ायरफ़ॉक्स में परिणाम है:

यहाँ क्रोम में परिणाम हैं:

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

हालाँकि, IPod टच सफारी ब्राउज़र पर, एसवीजी संस्करण काफी धुंधला लगता है, और अन्य काफी पिक्सेल किए जाते हैं:

एक समान परिणाम एंड्रॉइड क्रोम पर भी देखा जाता है। मैंने इसका स्क्रीनशॉट नहीं लिया है।

मुझे आश्चर्य है कि अगर इसका कारण पिक्सेल घनत्व के साथ कुछ करना हो सकता है, जो कि प्रदर्शन में मुख्य अंतर है, हालांकि यह मेरे लिए और अधिक समझ में आता है अगर सभी छवियों को केवल एसवीजी एक के बजाय मोबाइल पर अलग-अलग तरीके से संभाला जाता था।

अगर कोई समझा सकता है कि यह मामला क्यों है, तो मैं स्वीकृत उत्तर टिक को स्थानांतरित कर दूंगा। अन्यथा, मैं टीएल का मार्गदर्शन करता हूं; डीआर उत्तर यह है कि यह निर्भर करता है कि आप धुंधले या पिक्सेलयुक्त चिह्न पसंद करते हैं (या अपने उत्तरदायी ब्रेकप्वाइंट के लिए पिक्सेल सही आकार में बहुत सारे आइकन बनाने के लिए)।

संपादित करें: मैंने देखा है कि svgs आम तौर पर सेब उपकरणों पर बहुत स्पष्ट होते हैं - ट्विटर पक्षी इसके लिए मेरे परीक्षणों में ऊपर दिखाने के लिए बहुत विस्तृत हो सकता है, इसलिए उन्हें लगता है कि वे आइकन के लिए उपयोग करने के लिए सही प्रारूप हैं।

Comments

एसवीजी प्रदर्शन समय पर प्रदान किया जाता है और एए से लाभान्वित हो सकता है, अन्य निश्चित रिज़ॉल्यूशन हैं और केवल एए उनके पास 2x प्रस्तुत करना है; धुंधला; और कम करें, जो वास्तव में "डिसस्क्रीनिंग" स्थितियों को छोड़कर मदद करने वाला नहीं है। एसवीजी के लिए, एक निश्चित एए विधि (जैसे बोर्ड सरल 4x एफएसएए के पार) अति-आक्रामक होने जा रही है जब आपके पास केवल 8px चौड़ाई होती है, और डाउन-सैंपलिंग से हमेशा कुछ धुंधला हो जाता है।

— योरिक

ध्यान दें कि स्केलिंग और रीसम्पलिंग का प्रकार सॉफ्टवेयर कार्यान्वयन पर निर्भर है। अधिकांश गुणवत्ता के बजाय "तेज़" या "संतुलित" के लिए जाते हैं।

— योरिक

Answer 3

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

इसका मतलब यह है कि आपके द्वारा इमेज भेजने वाले एप्लिकेशन के व्यवहार में अधिक कहने के लिए यह कैसे व्यवहार करता है। अंतिम परिणाम आप निम्नलिखित है वह यह है कि कमियां :

• छवि को प्रस्तुत करने के लिए अधिक संसाधन लगते हैं
  • इस मामले में प्रदान की गई गुणवत्ता गिराने का विकल्प चुन सकती है क्योंकि इसके पास इसे बेहतर करने के लिए पर्याप्त संसाधन नहीं हैं।
• प्रत्येक इमेजिंग प्रणाली का अपना स्वयं का सेट होता है, जिसमें क्वर्क और दोष होते हैं
  • संगत होना कठिन बनाता है
  • आपको एक प्रोग्रामर की समस्याएं मिलती हैं

दूसरी ओर इसके कुछ लाभ हैं:

• छवि को स्वतंत्र रूप से बढ़ाया जा सकता है और इसमें अधिक जोड़ तोड़ विकल्प हो सकते हैं।
  • यह केवल क्लाइंट के अंत में किए गए कार्य का एक परिणाम है, ताकि वे एक बड़ी तस्वीर हासिल करने के लिए कंप्यूटिंग पिक्सल पर अधिक समय बिता सकें यदि आप तत्वों को भेजते हैं तो पता है कि यह कैसे पैमाने पर है।
• कई मामलों में डेटा पिक्सेल छवि से छोटा होता है (हालांकि ऐसा नहीं होता है)

बहुत कुछ आप नहीं कर सकते हैं यदि सिस्टम में एक छोटी गाड़ी रेंडरर है। आपका अंतिम आवेदन एक विकल्प देता है और वे खराब निर्णय लेने के लिए उस विकल्प का उपयोग कर सकते हैं।

कौनसा अच्छा है

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

एक तीसरा विकल्प है।

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

Answer 4

(अभी तक सीधे रिचर्ड बी के जवाब पर टिप्पणी करने के लिए पर्याप्त बिंदु नहीं हैं।)

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

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

Comments

एक कारण के रूप में समझ में आता है। शर्म की बात है SVGs को अन्य छवि प्रकारों के साथ निरंतरता नहीं लगती, हालाँकि।

— रिचर्ड बी

@ रीचर्ड, खैर, वे नियमित छवियों से अलग हैं। आप वास्तव में उनके साथ बातचीत कर सकते हैं जैसे कि वे डीओएम नोड थे। उनके पथ और आकार वास्तविक DOM नोड्स की तरह ही घटनाओं और CSS गुणों को प्राप्त करते हैं, इसलिए यदि मेरी समझ सही है, तो वे अन्य नोड्स की तरह ही प्रतिपादन पथ का अनुसरण करते हैं और यह इस संदर्भ में समझ में आता है। छवियां रैस्टराइज़्ड बॉक्स हैं और एक अलग रेंडरिंग चैनल से गुज़रती हैं, कभी-कभी जीपीयू पर अंतरिक्ष की नक्काशी भी करती है।

— Brak