स्केलेबल वेक्टर ग्राफिक्स को उपयोग को लाभ
स्केलेबल वेक्टर ग्राफिक्स, या एसजीजी, वेबसाइट डिजाइन आज एक महत्वपूर्ण भूमिका निभािन्छ। यदि तपाइँ हाल आफ्नो वेब डिजाइन कार्यमा SVG प्रयोग गर्दै हुनुहुन्छ भने, यहाँ केहि कारणहरू छन् कि तपाइँ त्यसो गर्न सुरु गर्नुपर्दछ, साथसाथै तपाइँले पुरानो ब्राउजरहरूको लागि प्रयोग गर्न सक्नुहुन्छ जुन यी फाइलहरू समर्थन गर्दैन।
रिजोल्युसन
एसभीजीको सबैभन्दा ठूलो फाइदा संकल्प आजादी हो। किनभने SVG फाईलहरू पिक्सेलमा आधारित रेस्टर छविहरूको सट्टा वेक्टर ग्राफिक्स हुन्, तिनीहरू कुनै पनि छवि गुणस्तर हराएर रिजाइज गर्न सकिन्छ। यो विशेष गरी उपयोगी हुन्छ जब तपाईं उत्तरदायी वेबसाइटहरू सिर्जना गर्दै हुनुहुन्छ जुन स्क्रिन साइज र उपकरणहरूको राम्रो दायरामा राम्ररी राम्रो काम गर्न आवश्यक छ।
SVG फाईलहरू अपरिवर्तित साइज र लेआउटको आवश्यकतालाई तपाईको उत्तरदायी वेबसाइटको समायोजन गर्न समायोजित गर्न वा तल साइड गर्न सकिन्छ र तपाईंलाई सम्झौता गरिएको गुणवत्तासँग कुनै पनि चरण भएको ती ग्राफिक्स बारे चिन्ता गर्नुपर्दैन।
फाइल साइज
उत्तरदायी वेबसाइटहरूमा रास्टर छविहरू (JPG, PNG, GIF) प्रयोग गरेर एउटा चुनौतीहरू ती तस्बिरहरूको फाइल साइज हो। किनकी रेस्टर छविहरूले वेक्टरहरूले के गर्ने मार्गलाई मापन गर्दैन, तपाईलाई पिक्सेल-आधारित चित्रहरू सबै भन्दा ठूलो साइजमा प्रदान गर्नुपर्नेछ जुन तिनीहरू प्रदर्शित हुनेछ। यो किनभने तपाईं सधैं छवि बनाउन सक्नुहुन्छ र यसको गुणस्तर सुरक्षित गर्न सक्नुहुनेछ, तर तस्बिरहरू ठूलो बनाउनका लागि यो एकदम सही छैन। अन्त्य परिणाम यो छ कि तपाई प्रायः छविहरू छन् जुन तिनीहरू भन्दा ठूलो भन्दा बढी व्यक्तिको स्क्रीनमा देखाइने छ, जसको मतलब उनीहरूले अनावश्यक रूपमा धेरै ठूलो फाईल डाउनलोड गर्न बाध्य छन्।
SVG ले यस चुनौतीलाई सम्बोधन गर्दछ। किनकि वेक्टर ग्राफिक्स स्केलेबल छन्, तपाईसँग उनीहरूको छविहरू कसरी प्रदर्शन गर्न आवश्यक पर्दछ कति टाढाको फाइल आकार हुन सक्छ। यसले अन्ततः साइटको समग्र प्रदर्शन र डाउनलोड गतिमा सकारात्मक प्रभाव पार्नेछ।
CSS Styling
एसभीजी कोड पनि पृष्ठको एचटीएमएलमा थप्न सकिन्छ। यो "इनलाइन एसजीजी" को रूपमा चिनिन्छ। इनलाइन एसजीजी प्रयोग गर्ने फाईदाहरू मध्ये एक हो कि यो हो कि ग्राफिक्स वास्तवमा तपाईको कोडमा आधारित ब्राउजर द्वारा तयार पारिएको छ, त्यहाँ छवि फाइल ल्याउनको लागि HTTP अनुरोध बनाउन आवश्यक छैन। अर्को लाभ भनेको इनलाइन SVG CSS सँग स्टाइल गरिएको हुन सक्छ।
SVG प्रतिमाको रङ परिवर्तन गर्न आवश्यक छ? केही छवि सम्पादन गर्ने सफ्टवेयरमा फाइल खोल्न र पुन: फाइल पुन: खोल्न आवश्यक पर्दछ, तपाईले सीएसजी फाइलको केहि रेखाहरूसँग सजिलै संग SVG फाइल परिवर्तन गर्न सक्नुहुन्छ।
तपाइँले होभर स्टेटहरूमा परिवर्तन गर्न वा निश्चित डिजाइन आवश्यकताहरूको लागि एसभीजी ग्राफिक्समा अन्य CSS शैलीहरू प्रयोग गर्न सक्नुहुन्छ। तपाईंले ती ग्राफिक्सहरू पनि एक पृष्ठमा केही गति र अन्तरक्रियाशीलता थप्नको लागि एन्टिभेट गर्न सक्नुहुन्छ।
एनिमेशन
किनकि इनलाइन SVG फाइलहरू सीएसएससँग स्टाइल गर्न सकिन्छ, तपाईं तिनीहरूलाई पनि CSS एनिमेसनहरू प्रयोग गर्न सक्नुहुन्छ। सीएसएस परिवर्तन र संक्रमण SVG फाइलहरूमा केही जीवन थप गर्न दुई सरल तरिकाहरू छन्। तपाईंले पृष्ठमा अमीर फ्लैश-जस्तो अनुभवहरू प्राप्त गर्न सक्नुहुने डाउन्सडाइडहरू नचाहिने पृष्ठमा आजको वेबसाईटहरूमा फ्ल्यास प्रयोग गरी आउन सक्दछ ।
एसजीजीको प्रयोग
SVG को रूपमा शक्तिशाली रूपमा, यी ग्राफिक्सले तपाइँले तपाइँको वेबसाइटमा प्रयोग गर्दै प्रत्येक अन्य छवि ढाँचा बदल्न सक्दैन। गहिरो रङ्ग गहराइ चाहिन्छ फोटोहरू अझै पनि JPG वा शायद PNG फाइलको आवश्यकता पर्नेछ, तर माउसहरू जस्तै सरल छविहरू एसजीजीको रूपमा निष्पादित गर्न पूर्ण रूपमा उपयुक्त छन्।
SVG अधिक जटिल दृष्टान्तहरूको लागि उपयुक्त हुन सक्छ, जस्तै कम्पनी लोगो वा ग्राफ्स र चार्टहरू। सबै ग्राफिक्सले स्केलेबल, सीएसएससँग स्टाइल गर्न सक्ने र यस लेखमा सूचीबद्ध अन्य फाईलहरूबाट लाभ उठाउनेछ।
पुरानो ब्राउजरहरूको लागि समर्थन
SVG को लागि वर्तमान समर्थन आधुनिक वेब ब्राउजरमा धेरै राम्रो छ। यी ग्राफिक्सहरूको लागि समर्थन नभएका एकमात्र ब्राउजरहरू Internet Explorer को संस्करण (संस्करण 8 र तल) र Android को केहि पुराना संस्करणहरू हुन्। सबैमा, ब्राउजिङ आबादीको एक धेरै सानो प्रतिशत अझै पनि यो ब्राउजर प्रयोग गर्दछ, र यो संख्या हड्ताल जारी छ। यसको अर्थ SVG आज वेबसाइटहरूमा सुन्दर रूपमा प्रयोग गर्न सकिन्छ।
यदि तपाइँ SVG को लागी फलब्याक प्रदान गर्न चाहानुहुन्छ भने, तपाइँ फलामम्यान समूहबाट Grumpicon जस्तै उपकरण प्रयोग गर्न सक्नुहुन्छ। यो स्रोतले तपाईंको एसजीजी छवि फाइलहरू लिनेछ र पुराना ब्राउजरहरूको लागि PNG पछाडि सिर्जना गर्दछ।
1/27/17 मा जेरेमी गिरर्ड द्वारा सम्पादित