आपकी प्रतिक्रियाशील साइट के ग्राफ़िक्स इसे धीमा कर सकते हैं, लेकिन वेक्टर ग्राफ़िक्स के साथ इसे संतुलित करने से बैंडविड्थ को कम करने में मदद मिल सकती है। इसके जरिए मोबाइल साइट पर भी कमाल के ग्राफिक्स बढ़िया काम करते हैं। आम तौर पर, इस उद्देश्य के लिए कैनवास और एसवीजी का उपयोग किया जाता है।
मल्टीपल स्क्रीन साइज के लिए डिज़ाइन बनाने के लिए HTML5 स्केलेबल वेक्टर ग्राफ़िक्स (SVG) का उपयोग करें, क्योंकि यह इसे पूरी तरह से हैंडल करता है। आसानी से वेक्टर आधारित रेखा चित्र प्रस्तुत करें और अपने डिवाइस पर पिक्सेल के बारे में चिंता न करें क्योंकि एसवीजी के साथ बनाए गए ग्राफिक्स रिज़ॉल्यूशन स्वतंत्र हैं। यह परिणाम को मापता है और ब्राउज़र में बहुत अच्छा लगता है।
यहां, हम देखेंगे कि हमारी प्रतिक्रियाशील साइट के लिए वेक्टर बैकग्राउंड के साथ कैसे काम किया जाए। अभी, हमारे पास एक डेमो एसवीजी है। आइए देखें कि हम वेक्टर फ़ाइल का उपयोग कैसे कर सकते हैं। सबसे पहले, हम 100% चौड़ाई के साथ CSS फिक्स्ड पोजिशनिंग करेंगे
उदाहरण
यहाँ, आप आउटपुट देख सकते हैं। हमारी एसवीजी फाइल बहुत अच्छी लगती है और ब्राउजर की स्थिति बदलने पर भी बिना किसी विकृति के ठीक काम करती है। यह अभी भी धुंधला नहीं दिख रहा है और एकदम सही है।
पृष्ठभूमि में जोड़ने के लिए, हमने ऊपर परिवर्तन किए हैं। लेकिन, आपको अस्पष्टता भी जोड़ने की जरूरत है, क्योंकि पृष्ठभूमि छवियां आम तौर पर पारदर्शी होती हैं। आइए इसे जोड़ें
उदाहरण
यहाँ, आप आउटपुट देख सकते हैं। हमारी एसवीजी फ़ाइल बहुत अच्छी लगती है और अस्पष्टता पृष्ठभूमि छवि के रूप में जोड़े जाने के लिए दृश्यमान है -
