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

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

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

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

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

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

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

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

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

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

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

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

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

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;
}

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

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

बेहतर समाधान

सीएसएस के साथ ओपैसिटी सेट करने के बजाय, ओरिजनल SVG कॉन्टेंट के कलर में बदलाव करना बेहतर है. यहां हमारा 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 प्राइमर का एक बेहतरीन लिंक शामिल है.