SVG
एसवीजी तत्व

viewBox

व्यूबॉक्स विशेषता <svg> तत्व के लिए समन्वय प्रणाली को परिभाषित करता है। यह आपको आसानी से एक एसवीजी ग्राफिक के आकार और सापेक्ष अनुपात को बदलने की अनुमति देता है, प्रत्येक व्यक्ति द्वारा खींचे गए तत्व की स्थिति और आयाम को समायोजित किए बिना।

<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

यह कोड इस तरह दिखता है:

व्यूबॉक्स के बिना, यह इस तरह दिखता है:

संभावित अनुपात को बनाए रखें

preserveAspectRatio एक विशेषता है जो इंगित करता है कि छवि को समान रूप से बढ़ाया जाना चाहिए। यह विशेषता केवल तभी काम करती है जब <svg> तत्व में एक viewBox भी हो।

डिफ़ॉल्ट मान xMidYMid , जो पहलू अनुपात को बनाए रखता है और SVG कंटेनर के अंदर पथ को केंद्र में रखता है:

<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

जब preserveAspectRatio किसी के लिए सेट none , तो आइकन बॉक्स को फिट करने के लिए फैला है:

<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

वहाँ के लिए कई अन्य मान हैं preserveAspectRatio , लेकिन इन दोनों तक सबसे आम है।

preserveAspectRatio - मिलना और स्लाइस विशेषताएँ

preserveAspectRatio विशेषता का एक वैकल्पिक पैरामीटर है: meet | slice । डिफ़ॉल्ट व्यवहार को meet किया जाता है जो एक्स और वाई दोनों आयामों में सामग्री को तब तक खींचता है जब तक कि यह व्यूबॉक्स की चौड़ाई या ऊंचाई को भर नहीं देता है। वैकल्पिक - slice सामग्री के पहलू अनुपात को संरक्षित करता है लेकिन ग्राफ़िक को तब तक स्केल करता है जब तक वह व्यूबॉक्स की चौड़ाई और ऊंचाई दोनों को भर देता है (उस सामग्री को क्लिप करना जो व्यूबॉक्स को ओवरफ्लो करता है)।

यह slice का उपयोग करने वाला उदाहरण है

<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />

जो निम्नानुसार प्रस्तुत करता है:

और एक ही उदाहरण meet

    <svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

जो निम्नानुसार प्रस्तुत करता है: