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

Alex Danilo

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

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

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

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

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

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

बुनियादी बातों का आकलन करना

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

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

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

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

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

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

ध्यान दें: ध्यान दें कि कुछ ब्राउज़र GZIP फ़ाइलों को ठीक से लोड कर सकते हैं, लेकिन <img> टैग से लोड नहीं कर पाते. अच्छी बात यह है कि एचटीटीपी, GZIP कंप्रेशन का इस्तेमाल कर सकता है. इसलिए, वेब सर्वर को सही तरीके से सेट अप करना, GZIP के कंप्रेशन का फ़ायदा पाने का बेहतर तरीका हो सकता है.

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

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

PNG इमेज

JPEG इमेज

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

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

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

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

नतीजे में मिलने वाला बटन कुछ ऐसा दिखेगा:

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

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

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

हमारे बटन का अलग रूप देता है, जो नीचे दी गई इमेज की तरह दिखता है.

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

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

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

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

ध्यान दें: सलाह: बेहतर परफ़ॉर्मेंस के लिए, ऊपर से नीचे के ग्रेडिएंट का इस्तेमाल करें.

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

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

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

अगर हम वाकई में डेवलपर के लिए आने वाले नए और अलग तरीके के बारे में जानना चाहते हैं, तो नीचे दिया गया कोड जोड़कर, अपने 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 लोगो के बैकग्राउंड में फीका वर्टिकल लीनियर ग्रेडिएंट जोड़ा है, जिससे कई रंगों में रंग की झलक मिलती है, जो तेज़ी से चलती है. यह रंग बैकग्राउंड जितना तेज़ होता है.

ध्यान दें: ध्यान दें कि बैकग्राउंड के रेक्टैंगल का साइज़ चुनने पर, इस बात की गारंटी मिलती है कि इस लेख की शुरुआत में दिए गए हमारे सभी मोबाइल डिवाइसों की स्क्रीन का रंग रंग भर जाएगा. उनकी स्क्रीन के आसपेक्ट रेशियो की रेंज 10/16 से लेकर 18/10 तक है.

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

आसानी से ऐनिमेट करें

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

उदाहरण के तौर पर, हम अपने रंगीन 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 सेकंड लगते हैं. इसका असर यह होता है कि ग्रेडिएंट, पेज में पेज को लगातार ऊपर चला रहा है जो कभी नहीं रुकता.

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

साथ ही, ब्राउज़र पेंटिंग के बारे में अपनी जानकारी का फ़ायदा ले सकता है, ताकि यह पक्का किया जा सके कि आकर्षक ऐनिमेशन के लिए कम से कम सीपीयू (CPU) ओवरहेड का इस्तेमाल किया जाए.

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

ध्यान दें कि यह बिना कंप्रेस की गई SVG फ़ाइल सिर्फ़ 2922 बाइट की है - बेहतरीन ग्राफ़िक इफ़ेक्ट देने के लिए यह बहुत छोटी है. इससे आपके उपयोगकर्ताओं और उन डेटा प्लान को प्रोसेस में खुशी मिलती है.

यहां से कहां जाएं?

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

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

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

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