मुझे अपने वेब ग्राफिक्स के लिए SVG या SVGZ का उपयोग कब करना चाहिए?

Question

मेरी समझ से,

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

जितनी बार मैंने उनका उपयोग किया, मेरे पास कभी भी एक ग्राफिक नहीं था जो कुछ सौ किलोबाइट पर चला गया था।

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

मैं एसवीजी ग्राफिक का उपयोग करने का दूसरा कारण ग्राफिक के कुछ तत्वों, जैसे हाथ, पैर, इत्यादि को आसानी से प्राप्त करने के कारण है।

विशेष रूप से पृष्ठभूमि तत्व, पूरे शहर में फैले एक शहर की तरह, जबकि मैं रोशनी और इतने पर कुछ टिमटिमाता हूं।

यदि फ़ाइल संपीड़ित है, तो क्या यह SVG कोड खो देगा इसलिए मैं इसे चेतन नहीं कर सकता?

क्या कोई कारण है कि मुझे एक एसवीजीजेड का उपयोग सिर्फ एक एसवीजी पर करना चाहिए?

अद्यतन करें

खैर मैंने सिर्फ एक एसवीजी और एसवीजीजेड बनाने का फैसला किया, यह देखने के लिए कि उन्होंने वेब के साथ कैसे काम किया क्योंकि मुझे पता चला कि मेरे काम प्राचीन CS3 एसवीजीजेड को बचा सकते हैं!

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

क्या ये वेब के लिए बेकार हैं?

.svg

.svgz

JSFIDDLE

Comments

ऐसा लगता है कि यह आंशिक रूप से एक वेब सर्वर कॉन्फ़िगरेशन समस्या .svgzहो सकती है जो सही MIME प्रकार का उपयोग करके सेवा की जा सकती है, stackoverflow.com/questions/16725380/svgz-doesnt-display देखें । व्यक्तिगत रूप से मैं हमेशा वेब पर एसवीजी / वेक्टर ग्राफिक्स के लिए राफेल.जेएस का उपयोग करता हूं क्योंकि मुझे IE8 समर्थन की आवश्यकता है

— user56reinstatemonica8

हम्म, बहुत उपयोगी लिंक के लिए धन्यवाद। क्या उपयोग करने का कोई कारण है SVGZ? मैंने सोचा कि शायद छवि फ़ाइल आकार में कटौती करना अच्छा होगा। मैं बस उत्सुक हूं कि क्या SVGZकिसी भी तरह से वेब के लिए उपयोगी है या किसी भी तरह से वास्तव में उपयोगी है।

— जोश पॉवेल

यदि यह काम करता है, तो यह फ़ाइल आकार को काफी नीचे काट देगा। यदि आप कुछ जटिल पर अन्तरक्रियाशीलता का उपयोग कर रहे हैं तो यह उपयोगी हो सकता है - उदाहरण के लिए बहुत विस्तृत एसवीजी विश्व मानचित्र जो ज़ूम करने योग्य है। इसका zमतलब है कि gzip कम्प्रेशन जिसका उपयोग फ़ाइल के आकार में कटौती करने के लिए किया जाता है और बहुत अधिक और कुछ नहीं।

— user56reinstatemonica8

@JoshPowell: यह देखते हुए कि अधिकांश http सर्वर gzip को संपीड़ित करने के साथ सामग्री भेजते हैं, मुझे इस प्रश्न का उद्देश्य नहीं दिखता है। और कुछ सर्वरों के साथ, यदि आप अपनी फ़ाइल .svg.gz का नाम देते हैं, तो ब्राउज़र को एक सूचना मिलेगी कि मूल फ़ाइल संपीड़ित नहीं थी।

— user2284570

Answer 1

संपीड़ित svg के लिए समर्थन ब्राउज़र द्वारा अलग-अलग होगा, लेकिन आपको अपने एन्कोडिंग के बारे में जानकारी के साथ svgz फ़ाइल को ठीक से फ़्लैग करने के लिए सर्वर को कॉन्फ़िगर करने की आवश्यकता है ताकि ब्राउज़र को यह स्पष्ट रूप से बताया जा सके कि इसे रसीद पर कैसे डीकोड करना है।

Svgz के लिए सर्वर की प्रतिक्रिया को "सामग्री-एन्कोडिंग: gzip" शामिल करने के लिए कॉन्फ़िगर करने की आवश्यकता है

svg     Content-Type: image/svg+xml

svgz    Content-Type: image/svg+xml
        Content-Encoding: gzip

Apache वेब सर्वर के लिए, इसे एक .htaccess फ़ाइल के माध्यम से प्राप्त किया जा सकता है:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

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

Comments

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

— जोश कोएनिग

Answer 2

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

संपत्ति की सेवा करने से पहले आधुनिक वेब सर्वर इस Gzipping को कर सकते हैं ( अधिक जानकारी के लिए StackOverflow पर यह उत्तर देखें ), इसलिए यदि आपके पास 300KB SVG है जो कि संकुचित होने पर 50KB है, तो यह लगभग उसी समय होगा जब वेब सर्वर द्वारा स्वचालित रूप से Gzipped किया जाता है। तो यह लाइन के नीचे 300KB नहीं होगा, यह 50KB होगा और फिर ब्राउज़र द्वारा असम्पीडित होगा।

Comments

क्या आप सुनिश्चित हैं कि संपीड़ित फ़ाइल कहीं कैश की गई है? 5000 आगंतुकों के लिए बार-बार इन svg परिसंपत्तियों को फिर से इकट्ठा करना बहुत काम है।

— बोकेन

@bokan: कुछ सर्वर एक .gz फ़ाइल एक्सटेंशन को जोड़कर सामग्री को पूर्व-संपीड़ित करने का विकल्प प्रदान करते हैं। इसलिए यदि कोई क्लाइंट index.html की तलाश करता है, तो सर्वर index.html.gz नामक पूर्व-संपीड़ित फ़ाइल के साथ उत्तर देगा।

— user2284570

@ user2284570: तो आपको हाथ से .gz बनाना होगा। अन्यथा यह उन्हें भेजने वाले हर बार फ़ाइलों को संपीड़ित करेगा, और सर्वर के लिए यह बहुत काम है।

— बोकन

@ बोकन: हाँ और इसके लिए साधारण सामग्री-एन्कोडिंग संपीड़न की तुलना में अक्सर अतिरिक्त सर्वर कॉन्फ़िगरेशन की आवश्यकता होती है। यहां तक ​​कि IE5 इसका समर्थन करता है। एक निर्देशिका के अंदर हर स्थिर फ़ाइलों को संपीड़ित करने के लिए एक स्क्रिप्ट बनाना सरल रहता है। दूसरे मामले में, यह डिस्क स्थान और बैंडविड्थ दोनों को बचाता है।

— user2284570