आज आपको अपनी वेबसाइट पर एसवीजी का उपयोग क्यों करना चाहिए

स्केलेबल वेक्टर ग्राफिक्स का उपयोग करने के लाभ

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

संकल्प

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

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

फाइल का आकार

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

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

सीएसएस स्टाइलिंग

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

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

आप होवर राज्यों या कुछ डिज़ाइन आवश्यकताओं के लिए उन्हें बदलने के लिए एसवीजी ग्राफिक्स पर अन्य सीएसएस शैलियों का भी उपयोग कर सकते हैं। आप किसी पृष्ठ पर कुछ आंदोलन और अंतःक्रियाशीलता जोड़ने के लिए उन ग्राफिक्स को भी एनिमेट कर सकते हैं।

एनिमेशन

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

एसवीजी का उपयोग करता है

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

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

पुराने ब्राउज़र के लिए समर्थन

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

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

जेरेमी गिरार्ड द्वारा 1/27/17 को संपादित किया गया