आपकी रिस्पॉन्सिव साइट के लिए ग्राफिक्स इसे धीमा कर सकते हैं, लेकिन इसे वेक्टर ग्राफिक्स के साथ संतुलित करने से बैंडविड्थ कम करने में मदद मिल सकती है। इसके माध्यम से, अद्भुत ग्राफिक्स मोबाइल साइट पर भी बढ़िया काम करते हैं। आमतौर पर, इसके लिए कैनवास और SVG का उपयोग किया जाता है।
अपनी रिस्पॉन्सिव साइट के लिए कई स्क्रीन आकारों के लिए डिज़ाइन बनाने के लिए HTML5 स्केलेबल वेक्टर ग्राफिक्स (SVG) का उपयोग करें, क्योंकि यह इसे पूरी तरह से संभालता है। आसानी से वेक्टर-आधारित लाइन ड्रॉइंग प्रस्तुत करें और अपने डिवाइस पर पिक्सेल्स के बारे में चिंता न करें क्योंकि SVG के साथ बनाए गए ग्राफिक्स रिज़ॉल्यूशन-स्वतंत्र हैं। यह परिणाम को स्केल करता है और ब्राउज़र में बढ़िया दिखता है।
यहां, हम देखेंगे कि हमारी रिस्पॉन्सिव साइट के लिए वेक्टर बैकग्राउंड के साथ कैसे काम करें। अभी हमारे पास एक डेमो SVG है। आइए देखें कि हम वेक्टर फ़ाइल का उपयोग कैसे कर सकते हैं। सबसे पहले, हम CSS फिक्स्ड पोजिशनिंग करेंगे, चौड़ाई 100% के साथ।
उदाहरण
<!DOCTYPE html> <html> <head> <style> #demo { position:fixed; top:0; left:0; width:100%; z-index: -1; } </style> </head> <body> <img src="/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley"> </body> </html>यहां, आप आउटपुट देख सकते हैं। हमारी SVG फ़ाइल बहुत अच्छी दिखती है और ब्राउज़र के पुनः स्थापित होने पर भी विकृति के बिना ठीक काम करती है। यह अभी भी धुंधली नहीं दिख रही है और बिल्कुल सही है।
बैकग्राउंड में जोड़ने के लिए, हमने ऊपर परिवर्तन किए हैं। लेकिन, आपको अपारदर्शिता भी जोड़ने की आवश्यकता है, क्योंकि बैकग्राउंड इमेज आमतौर पर पारदर्शी होती हैं। आइए इसे जोड़ें।
उदाहरण
<!DOCTYPE html> <html> <head> <style> #demo { position: fixed; top: 0; left: 0; width: 100%; z-index: -1; opacity: 0.1; } </style> </head> <body> <img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley "> </body> </html>यहां, आप आउटपुट देख सकते हैं। हमारी SVG फ़ाइल बहुत अच्छी दिखती है और अपारदर्शिता बैकग्राउंड इमेज के रूप में जोड़े जाने के लिए दिखाई दे रही है।
