अपनी रिस्पॉन्सिव साइट पर स्प्लैश वेक्टर ग्राफ़िक

शानदार मोबाइल कॉन्टेंट बनाने का मतलब है, डाउनलोड किए गए डेटा की मात्रा को विज़ुअल इफ़ेक्ट के हिसाब से संतुलित करना. वेक्टर ग्राफ़िक, कम बैंडविथ का इस्तेमाल करके शानदार विज़ुअल नतीजे देने का एक बेहतरीन तरीका है.

कई लोगों को लगता है कि वेब पर वेक्टर और रेस्टर का इस्तेमाल करके ड्रॉ करने का सिर्फ़ एक तरीका है, वह है कैनवस. हालांकि, इसके अलावा भी कुछ विकल्प हैं जिनमें कुछ फ़ायदे हैं. वेक्टर ड्रॉइंग बनाने का सबसे अच्छा तरीका, स्केलेबल वेक्टर ग्राफ़िक्स (SVG) का इस्तेमाल करना है. यह HTML5 का एक अहम हिस्सा है.

हम सभी जानते हैं कि अलग-अलग स्क्रीन साइज़ को हैंडल करने में रिस्पॉन्सिव डिज़ाइन का बहुत बड़ा योगदान होता है. साथ ही, अलग-अलग साइज़ की स्क्रीन को आसानी से हैंडल करने के लिए, SVG सबसे सही है.

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

एसवीजी की सबसे ज़्यादा काम की बात यह है कि यह रिज़ॉल्यूशन पर निर्भर नहीं करता. इसका मतलब है कि आपको यह सोचने की ज़रूरत नहीं है कि आपके डिवाइस पर कितने पिक्सल हैं. ब्राउज़र, एसवीजी को हमेशा स्केल करेगा और उसे बेहतर बनाने के लिए ऑप्टिमाइज़ करेगा.

Google Drive में मौजूद Drawing ऐप्लिकेशन, Inkscape, Illustrator, Corel Draw जैसे लोकप्रिय लेखन टूल, एसवीजी जनरेट करते हैं. इसलिए, कॉन्टेंट जनरेट करने के कई तरीके हैं. हम एसवीजी एसेट इस्तेमाल करने के कुछ तरीकों के बारे में बताएंगे. साथ ही, आपको ऑप्टिमाइज़ेशन के कुछ सुझाव भी देंगे.

स्केलिंग की बुनियादी बातें

एक आसान उदाहरण से शुरू करते हैं - आपको अपने वेब पेज के बैकग्राउंड के तौर पर, पूरे पेज का ग्राफ़िक चाहिए. आपकी कंपनी का लोगो या ऐसी ही कोई चीज़, हमेशा बैकग्राउंड में फ़ुल-स्क्रीन पर दिखे, तो काफ़ी मददगार होगा. हालांकि, अलग-अलग साइज़ की स्क्रीन के हिसाब से ऐसा करना काफ़ी मुश्किल है. उदाहरण के लिए, हम HTML5 के लोगो से शुरू करेंगे.

HTML5 का लोगो नीचे दिखाया गया है - और आपने सही अनुमान लगाया है, यह SVG फ़ाइल के तौर पर शुरू होता है.

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

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

रुकिए, और भी बातें हैं - HTML5 लोगो का साइज़ सिर्फ़ 1,427 बाइट है! वाह, यह साइज़ इतना छोटा है कि इसे लोड करने पर, किसी भी मोबाइल डेटा प्लान पर इसका असर नहीं पड़ेगा. इससे यह तेज़ी से लोड होता है और आपके उपयोगकर्ताओं के लिए सस्ता और तेज़ हो जाता है!

SVG फ़ाइलों की एक और अच्छी बात यह है कि उन्हें और छोटा करने के लिए, GZIP से कंप्रेस किया जा सकता है. इस तरह से SVG को कंप्रेस करने पर, फ़ाइल एक्सटेंशन को ‘.svgz’ में बदलना होगा. HTML5 लोगो के मामले में, कंप्रेस करने पर उसका साइज़ सिर्फ़ 663 बाइट तक सिकुड़ जाता है. साथ ही, ज़्यादातर आधुनिक ब्राउज़र इसे आसानी से हैंडल कर लेते हैं!

कुछ नए डिवाइसों पर, हमारी उदाहरण फ़ाइल के लिए, कंप्रेस किए गए वेक्टर डेटा का इस्तेमाल करने पर, हमें 60 गुना तक का फ़ायदा मिला! यह भी ध्यान दें कि इनमें PNG के बजाय, JPEG और SVG की तुलना की जा रही है. हालांकि, JPEG एक लॉसलेस फ़ॉर्मैट है, जिसकी वजह से SVG या PNG की तुलना में इसकी क्वालिटी खराब होती है. अगर हम PNG का इस्तेमाल करते, तो फ़ाइल का साइज़ 80 गुना से ज़्यादा कम हो जाता. यह काफ़ी शानदार है!

हालांकि, PNG और JPEG एक जैसे नहीं होते. ऑप्टिमाइज़ेशन से जुड़ी कई सलाह में, PNG के बजाय JPEG का इस्तेमाल करने के बारे में बताया जाता है. हालांकि, यह हमेशा सही नहीं होता. नीचे दी गई इमेज देखें. बाईं ओर दी गई इमेज, HTML5 लोगो के सबसे ऊपर दाएं हिस्से की PNG इमेज है. इसे छह गुना बड़ा किया गया है. दाईं ओर मौजूद इमेज, बाईं ओर मौजूद इमेज जैसी ही है. हालांकि, इसे JPEG फ़ॉर्मैट में एन्कोड किया गया है.

यह आसानी से देखा जा सकता है कि JPEG में फ़ाइल का साइज़ कम करने पर, आपको कुछ नुकसान भी हो सकता है. जैसे, किनारों पर रंग के आर्टफ़ैक्ट दिखना. ऐसा हो सकता है कि आपके रेटिना को लगे कि उसे चश्मा चाहिए:-) सही मायनों में, JPEG फ़ोटो के लिए ऑप्टिमाइज़ किया गया है. इसलिए, यह वेक्टर आर्ट के लिए उतना अच्छा नहीं है. किसी भी मामले में, SVG वर्शन की क्वालिटी PNG वर्शन जैसी ही होती है. इसलिए, फ़ाइल साइज़ और साफ़ तौर पर दिखने के मामले में, SVG वर्शन बेहतर होता है.

वेक्टर बैकग्राउंड बनाना

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

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

आपको पता चलेगा कि डिसप्ले का साइज़ चाहे जो भी हो, इमेज का साइज़ सही तरीके से तय किया गया है और इसके किनारे साफ़ और बेहतर दिखते हैं.

इसके बाद, हम बैकग्राउंड पर कुछ कॉन्टेंट डालना चाहेंगे.

हालांकि, जैसा कि आप देख सकते हैं, नतीजा उतना अच्छा नहीं है, क्योंकि हम टेक्स्ट को नहीं पढ़ सकते. तो हम क्या करें?

बैकग्राउंड को बेहतर बनाने के लिए अडजस्ट करना

हमें बैकग्राउंड इमेज के सभी रंगों को हल्का करना होगा. सीएसएस ओपैसिटी प्रॉपर्टी का इस्तेमाल करके या SVG फ़ाइल में ओपैसिटी का इस्तेमाल करके, ऐसा आसानी से किया जा सकता है. अपने सीएसएस कॉन्टेंट में यह कोड जोड़कर, इसे काम में लाया जा सकता है:

#bg {
  opacity: 0.2;
}

इससे आपको ऐसा नतीजा मिलेगा:

यह तरीका आसान है, लेकिन मोबाइल डिवाइस पर परफ़ॉर्मेंस में समस्या आ सकती है. ज़्यादातर मौजूदा मोबाइल ब्राउज़र के लिए, ओपैक ऑब्जेक्ट की तुलना में ओपैसिटी प्रॉपर्टी का इस्तेमाल करके ड्रॉ करने में काफ़ी ज़्यादा समय लग सकता है.

बेहतर समाधान

सीएसएस की मदद से ओपैसिटी सेट करने के बजाय, ओरिजनल एसवीजी कॉन्टेंट में रंग में बदलाव करना बेहतर होता है. यहां हमारा HTML5 लोगो दिखाया गया है. इसमें इस्तेमाल किए गए रंगों को बदलकर, लोगो को फीका किया गया है. इस प्रोसेस में, ओपैसिटी प्रॉपर्टी का इस्तेमाल नहीं किया गया है. इसलिए, नीचे दी गई बैकग्राउंड इमेज, ओपैसिटी बदलने के नतीजे से मिलती-जुलती दिखती है. हालांकि, यह असल में बहुत तेज़ी से पेंट होगी और इस प्रोसेस में सीपीयू का समय और बैटरी लाइफ़ बचेगी.

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

ग्रेडिएंट का बेहतर तरीके से इस्तेमाल करना

मान लें कि हमें एक बटन बनाना है. हम गोल कोनों वाला एक रेक्टैंगल बनाकर शुरुआत कर सकते हैं. इसके बाद, बटन को बेहतर टेक्स्चर देने के लिए, एक अच्छा लीनियर ग्रेडिएंट जोड़ा जा सकता है. ऐसा करने के लिए, कोड कुछ ऐसा दिख सकता है:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

इससे मिलने वाला बटन कुछ ऐसा दिखेगा:

ध्यान दें कि हमने जो ग्रेडिएंट जोड़ा है वह बाईं से दाईं ओर कैसे जाता है. यह एसवीजी में ग्रेडिएंट की डिफ़ॉल्ट दिशा है. हालांकि, हम कुछ अलग वजहों से बेहतर परफ़ॉर्म कर सकते हैं: आकर्षक डिज़ाइन और परफ़ॉर्मेंस. इसे थोड़ा बेहतर बनाने के लिए, ग्रेडिएंट की दिशा बदलने की कोशिश करते हैं. लीनियर ग्रेडिएंट पर 'x1', 'y1', 'x2', और 'y2' एट्रिब्यूट सेट करने पर, भरने के रंग की दिशा कंट्रोल होती है.

सिर्फ़ 'y2' एट्रिब्यूट सेट करने पर, ग्रेडिएंट को डायगनल में बदला जा सकता है. इसलिए, कोड में किया गया यह छोटा सा बदलाव:

<linearGradient id="blueshiny" y2="1">

का इस्तेमाल करने पर, बटन का रंग बदल जाता है. यह नीचे दी गई इमेज की तरह दिखने लगता है.

कोड में इस छोटे से बदलाव से, ग्रेडिएंट को ऊपर से नीचे की ओर भी आसानी से बदला जा सकता है:

<linearGradient id="blueshiny" x2="0" y2="1">

और यह इमेज नीचे दी गई इमेज की तरह दिखती है.

आपके मन में यह सवाल आ रहा होगा कि ग्रेडिएंट के अलग-अलग ऐंगल के बारे में इतनी चर्चा क्यों की जा रही है?

आखिर में, यह पता चला कि सबसे ऊपर से नीचे तक ग्रेडिएंट वाला आखिरी उदाहरण, ज़्यादातर डिवाइसों पर सबसे तेज़ी से ड्रॉ होता है. ब्राउज़र कोड लिखने वाले ग्राफ़िक विशेषज्ञों में यह एक बहुत ही कम जाना-पहचाना रहस्य है कि वर्टिकल (ऊपर से नीचे) ग्रेडिएंट, सॉलिड कलर के तौर पर लगभग उतनी ही तेज़ी से पेंट होते हैं. (इसकी वजह यह है कि किसी ऑब्जेक्ट को पेज पर हॉरिज़ॉन्टल लाइनों में पेंट किया जाता है - और ड्रॉइंग कोड के मुख्य हिस्से को पता होता है कि हर लाइन में रंग नहीं बदलता है. इसलिए, वे इसे ऑप्टिमाइज़ करते हैं).

इसलिए, जब पेज के डिज़ाइन में ग्रेडिएंट का इस्तेमाल किया जाता है, तो वर्टिकल ग्रेडिएंट तेज़ी से काम करते हैं. साथ ही, इनसे बैटरी का कम इस्तेमाल होता है. यह स्पीडअप, सीएसएस ग्रेडिएंट पर भी लागू होता है. इसलिए, यह सिर्फ़ एसवीजी के लिए नहीं है.

अगर हमें ग्रेडिएंट के बारे में इस नई जानकारी से थोड़ा रोमांच महसूस होता है, तो हम नीचे दिए गए कोड को जोड़कर, अपने HTML5 लोगो के पीछे एक शानदार ग्रेडिएंट जोड़ सकते हैं:

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

ऊपर दिया गया कोड, हमारे HTML5 लोगो के बैकग्राउंड में फ़ेड किया गया वर्टिकल लीनियर ग्रेडिएंट जोड़ता है. इससे, लोगो को कई रंगों का हल्का रंग मिलता है, जो एक ही रंग के बैकग्राउंड की तरह तेज़ी से चलता है.

अगर कॉन्टेंट को डेस्कटॉप ब्राउज़र में लोड करके, आसपेक्ट रेशियो को बहुत ज़्यादा बढ़ाया जाता है, तो आपको सबसे ऊपर/नीचे या बाईं/दाईं ओर सफ़ेद बार दिखेंगे. वैसे भी, ऊपर दिए गए कोड में बदलाव करने के बाद, बैकग्राउंड इस तरह दिखेगा:

आसानी से ऐनिमेशन बनाना

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

उदाहरण के लिए, हम अपने रंग-बिरंगे HTML5 लोगो में बदलाव करेंगे. इसके लिए, लीनियर ग्रेडिएंट की परिभाषा को नीचे दिए गए कोड में बदलेंगे:

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

ऊपर बताए गए बदलावों का नतीजा देखने के लिए, नीचे दी गई इमेज देखें.

यह कोड, हमारे लीनियर ग्रेडिएंट के रंगों को बदल रहा है. इसके लिए, हमने अलग-अलग रंग के स्टॉप तय किए हैं. ये स्टॉप, एक चक्र में लगातार बदलते रहते हैं. इस चक्र को पूरा होने में 20 सेकंड लगते हैं. इसका असर यह होता है कि ग्रेडिएंट ऐसा लगता है कि वह पेज पर लगातार ऊपर की ओर बढ़ रहा है और कभी नहीं रुकता.

इसकी सबसे अच्छी बात यह है कि इसके लिए किसी स्क्रिप्ट की ज़रूरत नहीं होती! इसलिए, यह इस पेज से रेफ़रंस वाली इमेज के तौर पर चलती है. साथ ही, स्क्रिप्ट की ज़रूरत को खत्म करके, मोबाइल सीपीयू पर काम का बोझ भी कम करती है.

साथ ही, ब्राउज़र खुद भी पेंटिंग के बारे में अपनी जानकारी का फ़ायदा ले सकता है, ताकि यह पक्का किया जा सके कि बेहतर ऐनिमेशन बनाने के लिए, सीपीयू का कम से कम इस्तेमाल किया जाए.

एक बात ध्यान रखें: कुछ ब्राउज़र इस तरह के ऐनिमेशन को बिलकुल भी हैंडल नहीं करते. हालांकि, ऐसे में भी आपको रंगीन बैकग्राउंड दिखेगा, लेकिन वह नहीं बदलेगा. स्क्रिप्ट (और requestAnimationFrame) का इस्तेमाल करके, इस समस्या को हल किया जा सकता है. हालांकि, इस बारे में इस लेख में नहीं बताया गया है.

एक और बात ध्यान देने वाली है कि यह अनकंप्रेस की गई SVG फ़ाइल सिर्फ़ 2, 922 बाइट की है. इतना कम साइज़ होने के बावजूद, यह बेहतरीन ग्राफ़िक इफ़ेक्ट देती है. इससे आपके उपयोगकर्ताओं और डेटा प्लान को भी कोई परेशानी नहीं होती.

अब आगे क्या करना है?

कई मामलों में, SVG फ़ॉर्मैट का इस्तेमाल करना सही नहीं होता. ऐसे में, फ़ोटो और वीडियो को दूसरे फ़ॉर्मैट में दिखाना बेहतर होता है. टेक्स्ट एक और ऐसा कॉन्टेंट है जहां आम तौर पर नेटिव एचटीएमएल और सीएसएस बेहतर तरीके से काम करते हैं. हालांकि, लाइन ड्रॉ किए गए आर्टवर्क के लिए, यह टूल सबसे सही विकल्प हो सकता है.

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

अन्य अच्छे संसाधन

• Inkscape, एक ओपन सोर्स ड्रॉइंग ऐप्लिकेशन है. यह अपने फ़ाइल फ़ॉर्मैट के तौर पर SVG का इस्तेमाल करता है.
• Open Clip Art, ओपन सोर्स वाली एक बड़ी क्लिप आर्ट लाइब्रेरी है. इसमें हजारों SVG इमेज मौजूद हैं.
• W3C SVG पेज, जिसमें स्पेसिफ़िकेशन, संसाधन वगैरह के लिंक शामिल हैं.
• Raphaël एक JavaScript लाइब्रेरी है. यह पुराने ब्राउज़र के लिए, SVG कॉन्टेंट को ड्रॉ और ऐनिमेट करने के लिए, आसानी से इस्तेमाल किया जा सकने वाला एपीआई उपलब्ध कराती है.
• स्लिपरी रॉक यूनिवर्सिटी के SVG संसाधन - इसमें SVG प्राइमर का एक बेहतरीन लिंक शामिल है.