SVG पैटर्न इकाइयाँ: दोहराए मोटिफ का सही आकार रखें

आकार के आयाम बदलते हुए SVG पैटर्न में दोहराव की दूरी स्थिर रखने के लिए patternUnits="userSpaceOnUse" और संख्यात्मक टाइल चौड़ाई तथा ऊँचाई इस्तेमाल करें। उस टाइल के अंदर के चित्र को patternContentUnits या पैटर्न viewBox से अलग नियंत्रित करें।

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

यदि मोटिफ पहले से SVG पाथ का बना है, तो वे पाथ रखें। वेक्टराइज़ेशन कार्यप्रवाह में पहले आता है, जब एकमात्र स्रोत रास्टर छवि हो।

टाइल को उसके चित्र से अलग समझें

पैटर्न में दोहराने वाली आयताकार टाइल और उसके अंदर बना कंटेंट होता है। patternUnits टाइल के x, y, width और height नियंत्रित करता है। patternContentUnits कंटेंट निर्देशांक नियंत्रित करता है, जब तक पैटर्न में viewBox न हो।

objectBoundingBox के साथ .25 चौड़ाई का अर्थ रंगे जाने वाले ऑब्जेक्ट के बाउंडिंग बॉक्स की चौड़ाई का एक चौथाई है। इसका अर्थ मोटिफ की चौड़ाई का एक चौथाई नहीं। 120 इकाइयाँ चौड़े आयत को 30 इकाइयों की टाइल मिलती है; 240 इकाइयाँ चौड़े आयत को 60 इकाइयों की।

कंटेंट का डिफ़ॉल्ट userSpaceOnUse ही रहता है। इसलिए केवल patternUnits बदलने से मोटिफ के बीच अंतर बदल सकता है, जबकि हर मोटिफ का आकार वही रहता है। दोनों एट्रिब्यूट सोच-समझकर तय करें, यह न मानें कि वे साथ बदलते हैं।

एक पत्ती के चार संस्करण मिलाएँ

हमने इस उदाहरण के पत्ती पाथ बनाए और SVG ब्राउज़र में रेंडर किया। दोनों लक्ष्य आयत 80 इकाइयाँ ऊँचे हैं; उनकी चौड़ाई 120 और 240 है। स्क्रीनशॉट उन मूल आकारों के आसपास लेबल और पृष्ठभूमि जोड़ता है। यह SVG प्रदर्शन है, PerfectVector रूपांतरण परिणाम नहीं।

पंक्तियाँ ऊपर से नीचे पढ़ें:

1. स्थिर 40 × 40 टाइल संकरे आयत में 3 और चौड़े में 6 कॉलम बनाती है। पत्ती के आयाम वही रहते हैं।
2. .25 टाइल चौड़ाई दोनों लक्ष्यों में 4 कॉलम रखती है। चौड़े आयत में पत्तियों के बीच अधिक जगह है क्योंकि पत्ती निर्देशांक अभी भी यूज़र इकाइयाँ इस्तेमाल करते हैं।
3. लक्ष्य चौड़ाई दोगुनी होने पर बाउंडिंग बॉक्स कंटेंट निर्देशांक पत्ती को क्षैतिज खींचते हैं। उसका ऊर्ध्व आकार वही रहता है क्योंकि लक्ष्य ऊँचाई नहीं बदली।
4. viewBox="0 0 40 40" वाली स्थिर 40 × 40 टाइल पहली पंक्ति वाला परिणाम लौटाती है, भले मार्कअप में patternContentUnits="objectBoundingBox" बना रहे। पैटर्न viewBox की प्राथमिकता है।

पूरा उदाहरण खोलें

इसे pattern-units.svg में सहेजें और सीधे ब्राउज़र में खोलें। चारों पंक्तियाँ चित्र वाली परिभाषाएँ इस्तेमाल करती हैं, लेकिन उसके लेबल और पृष्ठभूमि के बिना। हर आयत जोड़ी स्थानांतरित समूहों में है ताकि उनके स्थानीय मूल बिंदु तुलना योग्य हों।

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

fixed पैटर्न से शुरू करके केवल दूसरे आयत की चौड़ाई बदलें। फिर पाथ बदलने से पहले tile और both देखें। इससे निर्देशांक चुनाव चित्र से अलग रहता है। विस्तृत पाथ और रंग बदलाव के लिए SVG संपादन की मार्गदर्शिका इस्तेमाल करें।

मोटिफ के अपने निर्देशांक हों तो viewBox इस्तेमाल करें

पैटर्न viewBox पत्ती को परिचित ड्रॉइंग क्षेत्र रखने देता है, जबकि टाइल का आकार अलग होता है। SVG पैटर्न विनिर्देश उस ड्रॉइंग क्षेत्र को viewBox और preserveAspectRatio से टाइल में फ़िट करता है।

अंतिम पंक्ति में टाइल और viewBox दोनों 40 × 40 हैं, इसलिए अनुपात का अंतर नहीं है। यदि बाद में टाइल आयताकार बनाएँ, तो डिफ़ॉल्ट preserveAspectRatio="xMidYMid meet" मोटिफ का अनुपात बनाए रखता है और फ़िट ड्रॉइंग क्षेत्र केंद्रित करता है। preserveAspectRatio="none" स्वतंत्र क्षैतिज और ऊर्ध्व स्केलिंग देता है। इसे केवल जानबूझकर विकृति चाहिए होने पर चुनें।

पैटर्न viewBox रहते हुए patternContentUnits बदलने से आकार ठीक नहीं होगा: इस स्थिति में उस एट्रिब्यूट का कोई प्रभाव नहीं है। जिस हिस्से को बदलना हो उसके अनुसार टाइल आयाम, viewBox या उसका अनुपात नियम बदलें।

जब एक परिभाषा से दोहराया भरण बनाना हो, तो पैटर्न उपयोगी है। यदि अलग-अलग रखी प्रतियाँ चाहिए, तो SVG प्रतीक और use इंस्टेंस उस काम के लिए अधिक सीधे उपयुक्त हैं।

आयत का आकार बदलना उसके समूह को स्केल करने से अलग है

userSpaceOnUse दूरी यूज़र निर्देशांक में स्थिर रखता है, स्थायी स्क्रीन पिक्सेल में नहीं। ट्रांसफ़ॉर्म उन निर्देशांकों को, पैटर्न भरण सहित, स्केल कर सकता है।

हमने ऊपर की fixed परिभाषा के दो संस्करण भी खोले। पहले आयत में width="240" था। दूसरे में width="120" बना रहा और समूह में transform="translate(20 120) scale(2 1)" था। उस दस्तावेज़ में दोनों ने 240 स्क्रीन इकाइयाँ घेर लीं, लेकिन पहले में 6 पत्ती कॉलम और ट्रांसफ़ॉर्म वाले में 3 क्षैतिज खिंचे कॉलम दिखे।

रेस्पॉन्सिव कलाकृति की समस्या जाँचते समय यह अंतर इस्तेमाल करें:

• अधिक दोहराव दिखाने के लिए लक्ष्य की ज्यामिति बढ़ाएँ और उसका निर्देशांक पैमाना वही रखें।
• पूरी रचना बड़ी करने के लिए समूह स्केल करें और पैटर्न का रूप भी स्केल होने की अपेक्षा रखें।
• यदि पेज लेआउट रूट SVG का प्रदर्शन आकार बदलता है, तो पैटर्न एट्रिब्यूट को दोष देने से पहले रूट viewBox मैपिंग देखें।

SVG निर्देशांक प्रणाली विनिर्देश यूज़र निर्देशांक पर लागू ट्रांसफ़ॉर्म बताता है। एप्लिकेशन के बीच अंतर के लिए पहले SVG के दस्तावेज़ आयाम जाँचें; केवल पैटर्न इकाइयों से भौतिक आउटपुट आकार तय नहीं हो सकता।

दोहराने से पहले कस्टम मोटिफ तैयार करें

यदि मोटिफ केवल PNG या JPG में है, तो PerfectVector दोहराव के लिए SVG ज्यामिति वापस पा सकता है। मोटिफ को वेक्टर में बदलें, परिणाम संपादक में खोलें और पैटर्न में रखने से पहले आउटलाइन, छोटे अंतराल तथा अनचाहे पृष्ठभूमि आकार जाँचें।

उस मोटिफ की अलग SVG मूल फ़ाइल रखें। उसकी प्रति के आसपास टाइल बनाएँ, फिर संकरा और चौड़ा दोनों लक्ष्य जाँचें। मौजूदा वेक्टर चित्र सीधे इस संपादन चरण में आ सकता है। सरल ज्यामितीय चिह्न हाथ से दोबारा बनाना अधिक तेज़ हो सकता है, जबकि फ़ोटो को जटिल पाथ समूह में ट्रेस करने के बजाय छवि ही रखना बेहतर हो सकता है।

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

फ़ाइल सौंपने से पहले देखें कि हर fill="url(#...)" मौजूद और अद्वितीय पैटर्न ID की ओर जाता है, टाइल के आयाम धनात्मक हैं और मोटिफ इच्छित टाइल में समाता है। SVG पैटर्न सामान्यतः टाइल सीमा पर कंटेंट काटते हैं, इसलिए किनारा पार करती पत्ती के लिए सोचा हुआ दोहराव डिज़ाइन चाहिए, न कि यह मान लेना कि बाहर निकला हिस्सा दिखेगा।

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

दूरी क्यों बदली लेकिन पत्ती का आकार वही क्यों रहा? patternUnits टाइल आयाम नियंत्रित करता है, जबकि patternContentUnits चित्र के निर्देशांक। डिफ़ॉल्ट यूज़र-स्पेस कंटेंट वाली बाउंडिंग बॉक्स टाइल पत्ती का आकार बदले बिना दूरी बदल सकती है।

patternContentUnits का कोई प्रभाव क्यों नहीं दिखता? पैटर्न पर viewBox देखें। जब वह मौजूद हो, तो कंटेंट निर्देशांक मैपिंग वही तय करता है और patternContentUnits का प्रभाव नहीं होता।

क्या userSpaceOnUse पैटर्न को स्क्रीन पर समान आकार में रखता है? यह संख्यात्मक टाइल आयाम लक्ष्य की वर्तमान यूज़र निर्देशांक प्रणाली में रखता है। समूह स्केल करने या रूट SVG की निर्देशांक से व्यूपोर्ट मैपिंग बदलने से पैटर्न का प्रदर्शन आकार फिर भी बदल सकता है।

स्रोत

1. MDN — patternUnits — टाइल ज्यामिति निर्देशांक और बाउंडिंग बॉक्स डिफ़ॉल्ट परिभाषित करता है।
2. MDN — patternContentUnits — कंटेंट निर्देशांक और viewBox प्राथमिकता परिभाषित करता है।
3. W3C — SVG पैटर्न — टाइल फ़िटिंग, अनुपात व्यवहार और पैटर्न क्लिपिंग समझाता है।
4. W3C — SVG निर्देशांक प्रणालियाँ — समूह स्केलिंग के पीछे के यूज़र निर्देशांक ट्रांसफ़ॉर्म परिभाषित करता है।

दोबारा इस्तेमाल के लिए केवल रास्टर मोटिफ है? अपनी छवि को SVG पाथ में बदलें, वापस मिली आउटलाइन देखें और अंतिम दोहराव बनाने से पहले दोनों लक्ष्य आकारों में जाँचें।