HTML Academy · पाठ

SVG viewBox और प्रतिक्रियाशील स्केलिंग

SVG को हर स्क्रीन आकार पर सही ढंग से स्केल करें

पाठ 3, कुल 4 में से13 चरण

SVG viewBox और प्रतिक्रियाशील स्केलिंग, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

चौड़ाई और ऊँचाई बनाम viewBox

SVG की चौड़ाई और ऊँचाई DOM में रेंडर किए गए आकार को तय करती हैं। viewBox विशेषता आंतरिक निर्देशांक क्षेत्र परिभाषित करती है। ये स्वतंत्र होते हैं: width="200" और height="200" के साथ "0 0 100 100" का viewBox निर्देशांक क्षेत्र को 2 गुना बड़ा दिखाता है।

viewBox का वाक्य-विन्यास

viewBox="min-x min-y width height"। सबसे सामान्य रूप में viewBox="0 0 100 100" मूल बिंदु से शुरू होने वाला 100x100 निर्देशांक क्षेत्र परिभाषित करता है। SVG में निर्देशांक मान पिक्सेल के बजाय इसी क्षेत्र को संदर्भित करते हैं।

अनुकूलनशील SVG

अनुकूलनशील SVG के लिए width और height विशेषताओं को हटा दें या उन्हें 100% पर सेट करें और अनुपात परिभाषित करने के लिए viewBox का उपयोग करें। CSS जोड़ें: svg { width: 100%; height: auto; }। SVG अपने कंटेनर में समाने के लिए आकार बदलता है और पहलू अनुपात बनाए रखता है।

preserveAspectRatio

preserveAspectRatio यह नियंत्रित करता है कि पहलू अनुपात अलग होने पर viewBox SVG के दृश्य क्षेत्र में कैसे फिट होगा। मान हैं: "xMidYMid meet" (डिफ़ॉल्ट—किनारों पर खाली पट्टियाँ), "xMidYMid slice" (भरने के लिए काटना), "none" (पहलू अनुपात बनाए बिना खींचकर फिट करना)।

पैनिंग के लिए min-x और min-y

min-x और min-y बदलने से SVG निर्देशांक क्षेत्र का दिखाई देने वाला भाग आगे-पीछे होता है। viewBox="50 50 100 100" (50,50) से (150,150) तक का क्षेत्र दिखाता है। JavaScript से viewBox मानों को अपडेट करके इंटरैक्टिव पैनिंग संभव होती है।

viewBox से ज़ूम करना

ज़ूम इन करने के लिए viewBox के आयाम घटाएँ: viewBox="25 25 50 50" एक छोटा क्षेत्र दिखाता है, जिसे SVG तत्व को भरने के लिए बड़ा किया जाता है। ज़ूम आउट करने के लिए आयाम बढ़ाएँ। SVG तत्व का आकार बदले बिना इंटरैक्टिव ज़ूम के लिए wheel घटनाओं पर viewBox अपडेट करें।

img बनाम इनलाइन में SVG

img टैग में SVG: object-fit के साथ अनुकूलनशील रूप से आकार बदलता है, लेकिन CSS से शैलीबद्ध या स्क्रिप्ट द्वारा नियंत्रित नहीं किया जा सकता। इनलाइन SVG: CSS और JavaScript के लिए पूरी तरह सुलभ होता है, लेकिन HTML का आकार बढ़ाता है। अपनी इंटरैक्टिविटी की आवश्यकताओं के आधार पर चुनाव करें।

आइकन SVG की रूपरेखा

आइकन SVG में एक निश्चित viewBox (जैसे, "0 0 24 24") और कोई width/height नहीं होता, जिससे CSS उनका आकार तय कर सकती है: .icon { width: 1.5rem; height: 1.5rem; }। viewBox यह सुनिश्चित करता है कि आइकन किसी भी आकार में सही अनुपात के साथ स्पष्ट वेक्टर रेंडरिंग बनाए रखें।

आइकन स्प्राइट के लिए symbol

छिपे हुए SVG के अंदर <symbol viewBox="0 0 24 24"> तत्वों में आइकन परिभाषित करें। उनका संदर्भ इस तरह लें: <use href="#icon-name">। प्रत्येक use तत्व की अपनी चौड़ाई, ऊँचाई, fill और color हो सकती है—सभी आइकन के लिए एक ही स्प्राइट फ़ाइल।

थीम के लिए currentColor

SVG का fill="currentColor" तत्व या उसके पैरेंट से CSS की color विशेषता प्राप्त करता है। SVG या किसी पैरेंट पर color: red सेट करने पर आइकन अपने-आप लाल रंग से भर जाता है। इससे एक-रंगी आइकन SVG-विशिष्ट शैलीकरण के बिना पाठ के रंग का अनुसरण कर सकते हैं।

viewBox की त्रुटि-जाँच

यदि SVG सामग्री कटी हुई या अनपेक्षित स्थान पर दिखाई दे, तो viewBox मान को लॉग करें या उसकी जाँच करें। एक सामान्य गलती यह है कि स्रोत कला के पिक्सेल आयामों को viewBox में सेट कर दिया जाए, लेकिन रेंडर किए गए आकार के अनुसार उसे समायोजित न किया जाए, जिससे आकार बदलने में समस्याएँ आती हैं। सुनिश्चित करें कि viewBox SVG कला की वास्तविक सामग्री-सीमाओं से मेल खाता हो।

ज्ञान जाँच

SVG को किसी भी कंटेनर की चौड़ाई में अनुकूलनशील रूप से फिट करने के लिए उसका आकार कैसे बदलेंगे?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

SVG का viewBox रेंडर किए गए पिक्सेल आकार से स्वतंत्र आंतरिक निर्देशांक क्षेत्र परिभाषित करता है, जिससे अनुकूलनशील आकार-परिवर्तन संभव होता है। viewBox के साथ width:100%; height:auto सेट करने पर SVG किसी भी कंटेनर के अनुसार ढल जाता है। symbol+use स्प्राइट रूपरेखा, currentColor थीम और preserveAspectRatio, लचीले और थीम के अनुसार बदले जा सकने वाले SVG उपयोग के लिए एक संपूर्ण साधन-संग्रह प्रदान करते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “SVG viewBox और प्रतिक्रियाशील स्केलिंग” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “SVG viewBox और प्रतिक्रियाशील स्केलिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“SVG viewBox और प्रतिक्रियाशील स्केलिंग” में मैं क्या सीखूँगा?

SVG को हर स्क्रीन आकार पर सही ढंग से स्केल करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“SVG viewBox और प्रतिक्रियाशील स्केलिंग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ