SVG preserveAspectRatio: खींचे बिना कलाकृति फ़िट करें

पूरा SVG viewBox बिना खिंचे प्रदर्शन क्षेत्र में फ़िट करना हो तो preserveAspectRatio="xMidYMid meet" दें। क्षेत्र पूरा ढकना हो और कुछ सामग्री किनारों से बाहर जा सके तो slice दें। क्षैतिज और लंबवत असमान आकार परिवर्तन जानबूझकर हो तभी none दें।

महत्वपूर्ण अंतर कलाकृति के viewBox निर्देशांक आयत और उसके दिखने के व्यूपोर्ट में है। फ़िट करना एक की दूसरे में मैपिंग बदलता है। वह लोगो दोबारा नहीं बनाता, खाली स्रोत कैनवस नहीं हटाता और क्रॉप हुए पाथ स्थायी नहीं मिटाता।

पहले फ़िट व्यवहार चुनें

MDN का preserveAspectRatio संदर्भ ये मान और डिफ़ॉल्ट xMidYMid meet बताता है। svg तत्व में इस मैपिंग को viewBox चाहिए। एट्रिब्यूट अक्षरों के बड़े-छोटे रूप के प्रति संवेदनशील है: बड़े A और R बचाएँ।

लोगो में meet से शुरू करें। अक्षर खोना या वृत्त को अंडाकार करना आमतौर पर थोड़ी खाली जगह से खराब है। सजावटी बैकग्राउंड में जानबूझकर क्रॉप स्वीकार्य हो सकता है। संरेखण चुनने से पहले तय करें।

दो व्यूपोर्ट आकृतियों में एक प्रतीक परखें

यह मूल उदाहरण वृत्त, आयत और केंद्र से हटे त्रिकोण देता है। वृत्त खिंचाव दिखाता है; असमान हिस्से सममित बैज से अधिक आसानी से संरेखण बदलाव दिखाते हैं।

HTML फ़ाइल में पेस्ट करके ब्राउज़र में खोलें:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

ViewBox 200 इकाइयाँ चौड़ा और 100 ऊँचा है। अनुपात 2:1 है। पहला व्यूपोर्ट 300 गुणा 100 CSS पिक्सेल, यानी 3:1 है। xMidYMid slice और none तुलना करने के लिए केवल एट्रिब्यूट बदलें। फिर व्यूपोर्ट width="100" height="300" करें और दोहराएँ।

हमने छोटे चयनकर्ता आधारित परीक्षण उपकरण से Chrome में ज्यामिति रेंडर की। उसके विवरण ने कलाकृति समूह का वर्तमान ट्रांसफ़ॉर्म मैट्रिक्स इस्तेमाल किया। पैमाने और खिसकाव इन मानों से मिले; लगभग −25 पिक्सेल slice खिसकाव यहाँ गोल किया है।

लंबे व्यूपोर्ट में meet ने तीनों छोटी आकृतियाँ दिखाईं। केंद्रित slice में बड़ी रचना का केवल हिस्सा दिखा, मुख्यतः सुनहरा आयत। none ने वृत्त संकरा और लंबा किया। यह Chrome में इस नमूने की जाँच है, हर ग्राफ़िक्स संपादक के इंपोर्ट व्यवहार की गारंटी नहीं।

शून्य मूलबिंदु वाले इस उदाहरण में पैमाना नियम सरल है। व्यूपोर्ट चौड़ाई को viewBox चौड़ाई से और व्यूपोर्ट ऊँचाई को viewBox ऊँचाई से भाग दें। meet दोनों अक्षों पर छोटा और slice बड़ा अनुपात देता है। none दोनों अलग रखता है। SVG निर्देशांक तंत्र विनिर्देश संरेखण और शून्य से अलग viewBox मूलबिंदु सहित मैपिंग बताता है।

खाली जगह कहाँ जाए, संरेखण से चुनें

पहला शब्द संरेखण नियंत्रित करता है। xMin, xMid और xMax viewBox का बायाँ किनारा, क्षैतिज केंद्र या दायाँ किनारा मिलाते हैं। YMin, YMid और YMax लंबवत वही करते हैं। ये viewBox आयत के हैं, जिसमें वास्तविक पाथ के आसपास खाली जगह हो सकती है।

लंबे परीक्षण व्यूपोर्ट में:

• xMinYMin meet फ़िट viewBox लंबवत केंद्र की जगह ऊपर रखता है।
• xMinYMin slice viewBox की बाईं तरफ़ व्यूपोर्ट की बाईं तरफ़ से मिलाता है। बड़ी दाईं तरफ़ बाहर जाती है।
• xMidYMid slice क्षैतिज बाहर जाने को दोनों तरफ़ बाँटता है।

हमने परीक्षण केंद्रित से xMinYMin किया। Meet और slice दोनों खिसकाव शून्य हुए, जबकि पैमाने क्रमशः 0.5 और 3 रहे। संरेखण ने रचना खिसकाई; फ़िट पैमाना नहीं बदला।

संरेखण बदलाव केवल अतिरिक्त जगह या बाहर जाती सामग्री वाले अक्ष पर दिखता है। चौड़े meet मामले में viewBox ऊँचाई भर चुका है, इसलिए YMid से YMin करने पर लंबवत खिसकने की जगह नहीं।

क्लिपिंग स्पष्ट चुनाव बनाएँ

slice पैमाना चुनता है। क्लिपिंग तय करती है कि व्यूपोर्ट से बाहर के हिस्से दिखते हैं या नहीं। उदाहरण स्पष्ट overflow:hidden देता है, ताकि क्रॉप अनुमानित हो।

लंबे परीक्षण में overflow दृश्य करने से बड़े वृत्त और त्रिकोण slice व्यूपोर्ट के बाहर दिखे। ज्यामिति गायब नहीं हुई थी। MDN का SVG overflow संदर्भ अलग SVG संदर्भों की डिफ़ॉल्ट शैली भिन्नता सहित overflow और व्यूपोर्ट क्लिपिंग संबंध समझाता है।

slice को पाथ काटने की क्रिया न मानें। वितरण फ़ाइल में केवल बची ज्यामिति होनी चाहिए तो वास्तविक संपादन करें और जाँचें। कस्टम गैर-आयत प्रदर्शन खिड़की के लिए clipPath अधिक उपयुक्त हो सकता है।

इसी तरह meet viewBox फ़िट होने की गारंटी देता है; पूरी रंगी सामग्री की नहीं। स्रोत आयत के बाहर स्ट्रोक, फ़िल्टर या पाथ अब भी बाहर जा सकता है। केवल एट्रिब्यूट पर भरोसे के बजाय दृश्य किनारे देखें।

संरेखण से जूझने से पहले स्रोत की खाली जगह ठीक करें

मानें छोटा चिह्न बहुत बड़े viewBox के केवल बीच में है। meet किनारों की खाली जगह सहित पूरा निर्देशांक आयत फ़िट करता है। सही पैमाने पर भी परिणाम बहुत छोटा दिख सकता है।

संपादक में एक्सपोर्ट कैनवस या आर्टबोर्ड देखें। रचना कसने को viewBox बदलें तो इच्छित स्ट्रोक और प्रभाव शामिल करें तथा हर स्थान फिर देखें। किनारों की सारी खाली जगह अपने-आप न हटाएँ: स्रोत में ब्रांड चिह्न के आसपास जानबूझकर खाली जगह हो सकती है।

भौतिक आकार की समस्या अलग है। गलत मिलीमीटर आकार में इंपोर्ट SVG को SVG आकार प्रक्रिया चाहिए; फ़िट संरेखण बदलने से इकाई धारणा ठीक होने की संभावना कम है।

इनलाइन SVG और इमेज फ़िट अलग रखें

इनलाइन SVG में संबंधित svg तत्व का एट्रिब्यूट बदलें। CSS उसके बॉक्स का आकार दे सकती है, जबकि preserveAspectRatio viewBox को बॉक्स में लाता है।

HTML इमेज तत्व में बाहरी SVG के लिए CSS उस इमेज की सामग्री का फ़िट नियंत्रित करती है:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

MDN का object-fit दस्तावेज़ इमेज जैसी बाहरी सामग्री का CSS बॉक्स में फ़िट बताता है। वह SVG दस्तावेज़ की भीतरी मैपिंग संपादित करने से अलग परत है। object-fit: contain भी स्रोत का पहले से खाली कैनवस नहीं हटाता। एम्बेड तरीका चुनते समय इनलाइन SVG और इमेज तत्व का अंतर देखें।

SVG का image तत्व भी है, जिसका नाम HTML के img के बजाय पूरा शब्द है। उसका preserveAspectRatio संदर्भित इमेज को उस तत्व के तय आयत में फ़िट करता है। MDN एट्रिब्यूट संदर्भ के अनुसार वह उसी तत्व पर viewBox देने की सामान्य ज़रूरत का अपवाद है। तीनों अलग रखने से HTML इमेज पर केवल SVG वाला एट्रिब्यूट देकर सुधार की कोशिश नहीं होगी।

रखने से पहले स्रोत अनुपात बचाएँ

कस्टम चिह्न का केवल PNG या JPG हो और संपादन योग्य वेक्टर ज्यामिति चाहिए तो PerfectVector लेआउट बनाने से पहले SVG स्रोत वापस ला सकता है। पहले सीमाएँ, छोटी खुली जगह और कैनवस सीमा देखें। फ़िट वर्तमान ज्यामिति बचाता है; विकृत स्रोत नहीं सुधारता और कभी प्राप्त न हुआ विवरण फिर नहीं बनाता।

मौजूदा साफ़ SVG सीधे फ़िट जाँच में जा सकता है। ऊपर सरल प्रतीक के लिए हाथ से बनी ज्यामिति पर्याप्त है। इमेज वेक्टराइज़ेशन परिचय रास्टर से पाथ वापस लाना कब उपयोगी है बताता है।

केवल रास्टर चिह्न हो तो PerfectVector में स्रोत आज़माएँ, SVG देखें, फिर क्रॉप से पहले meet पर चौड़ा और लंबा स्थान तुलना करें। मूल वेक्टर प्रति रखें, ताकि लेआउट निर्णय वापस बदल सकें।

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

meet के साथ SVG में खाली जगह अब भी क्यों है? व्यूपोर्ट और viewBox के अनुपात अलग हो सकते हैं, जिससे समान पैमाने के बाद जगह बचती है। स्रोत viewBox में पाथ के आसपास खाली जगह भी हो सकती है। संरेखण आयत खिसकाता है; उसकी भीतरी खाली जगह नहीं हटाता।

क्या slice कलाकृति स्थायी क्रॉप करता है? नहीं। यह व्यूपोर्ट ढकने वाला पैमाना बदलता है। Overflow और क्लिपिंग दृश्य हिस्से नियंत्रित करते हैं। अलग संपादन न करें तो मूल पाथ ज्यामिति दस्तावेज़ में रहती है।

none मेरे वृत्त को अंडाकार क्यों करता है? यह अलग क्षैतिज और लंबवत पैमाने देता है। व्यूपोर्ट और viewBox अनुपात अलग हों तो वृत्त दीर्घवृत्त बन सकता है। समान पैमाने के लिए संरेखण शब्द के साथ meet या slice दें।

स्रोत

1. MDN preserveAspectRatio — फ़िट मान, संरेखण, डिफ़ॉल्ट और SVG image अपवाद परिभाषित करता है।
2. SVG निर्देशांक तंत्र विनिर्देश — व्यूपोर्ट के पैमाने और खिसकाव गणना परिभाषित करता है।
3. MDN SVG overflow — overflow का व्यूपोर्ट क्लिपिंग नियंत्रण समझाता है।
4. MDN object-fit — CSS बॉक्स में इमेज जैसी बाहरी सामग्री का फ़िट बताता है।