SVG स्ट्रोक संरेखण: आउटलाइन अंदर या बाहर रखें

SVG स्ट्रोक अपने पाथ पर केंद्रित रहता है। बंद आकृति के पूरी तरह भीतर 12 इकाई की आउटलाइन के लिए 24 इकाई का स्ट्रोक बनाएँ और उसे उसी आकृति तक क्लिप करें। समान दृश्य चौड़ाई बाहर रखने के लिए 24 इकाई का स्ट्रोक ऐसे मास्क से दिखाएँ जो आकृति का भीतरी भाग छिपाता हो। मूल पाथ की प्रति रखें: क्लिप और मास्क दृश्यता बदलते हैं, मूल ज्यामिति नहीं।

प्रस्तावित stroke-alignment प्रॉपर्टी SVG Strokes संपादक के मसौदे में है, लेकिन मसौदा कहता है कि SVG 2 की स्ट्रोक परिभाषा मानक बनी रहती है। ब्राउज़र और संपादकों में चलने वाली फ़ाइल के लिए प्रस्तावित प्रॉपर्टी पर निर्भर होने के बजाय दृश्य परिणाम बनाएँ और परखें।

रंगी आउटलाइन कहाँ आती है, देखें

यह मौलिक बंद बैज तीनों पैनलों में एक पाथ इस्तेमाल करता है। उसका नीला-हरा भराव, नाममात्र 12 इकाई की दृश्य आउटलाइन और आसपास का दस्तावेज़ क्षेत्र समान है। मूँगा रंग की टूटी रेखा केंद्रीय पाथ है। बीच के पैनल में यह नीली पट्टी के बाहरी किनारे और दाएँ में भीतरी किनारे से मिलती है।

बीच का पैनल बैज की बाहरी रंगी सीमा मूल पाथ पर रखता है। बाहरी पैनल रंगा क्षेत्र पाथ के चारों ओर 12 इकाइयाँ बढ़ाता है। बैज viewBox किनारे से लगभग सटा हो तो अतिरिक्त रंग कट सकता है। MDN की भराव और स्ट्रोक मार्गदर्शिका सामान्य स्ट्रोक पाथ पर केंद्रित बताती है; ऊपर की तुलना तीनों संरचनाएँ एक आकार पर रेंडर करती है।

क्लिप से भीतरी आउटलाइन बनाएँ

बंद पाथ <defs> में रखें। एक बार भराव और एक बार क्लिप के रूप में फिर इस्तेमाल करें। दूसरी प्रति पर इच्छित चौड़ाई से दोगुनी चौड़ाई का स्ट्रोक रंगें, फिर उस स्ट्रोक को पाथ के भीतर सीमित करें। क्लिप अपनी आकृति के बाहर सब अदृश्य करता है; स्ट्रोक का छिपा आधा मिटाता नहीं। इंपोर्ट क्लिप कलाकृति से खिसके तो MDN clipPath संदर्भ और हमारी clipPath निर्देशांक मार्गदर्शिका देखें।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

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

मास्क से बाहरी आउटलाइन बनाएँ

बाहरी पट्टी को उलटा दृश्य क्षेत्र चाहिए। नीचे का मास्क दस्तावेज़ क्षेत्र पर सफ़ेद और बैज के भीतर काला है। यह केवल स्ट्रोक प्रति पर लगता है, जबकि बिना मास्क की प्रति भराव देती है। स्पष्ट मास्क क्षेत्र मूल आकृति से बाहर स्ट्रोक की जगह छोड़ता है।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

फिर केंद्रित 24 इकाई स्ट्रोक का केवल आधा बचता है, इसलिए दृश्य बाहरी पट्टी 12 इकाइयाँ चौड़ी है। मास्क क्षेत्र जानबूझकर सेट करें: MDN बताता है कि maskUnits, maskContentUnits और क्षेत्र आयाम मास्क कैसे प्रभावित करते हैं। सफ़ेद आयत को पूरा बाहरी स्ट्रोक ढकना चाहिए। छोटा मास्क वही किनारा काट सकता है जिसे बचाना चाहते थे।

अपारदर्शी भराव के लिए छोटा दृश्य उपाय है: दोगुनी चौड़ाई स्ट्रोक रंगें, फिर paint-order="stroke fill" से उसके ऊपर भराव रंगें। इससे भीतरी आधा भराव के नीचे छिपता है, लेकिन स्ट्रोक वहाँ रहता है और भराव अर्धपारदर्शी होने या हटने पर फिर दिख सकता है। MDN रंगने का क्रम समझाता है। बाहरी पट्टी अलग दृश्य संरचना रहनी हो तो स्पष्ट मास्क दें। पूरी बहुरंगी कलाकृति के अल्फ़ा पर आधारित बाहरी आकार से आउटलाइन के लिए SVG morphology आउटलाइन देखें; वह फ़िल्टर स्रोत पाथ बचाते हुए रूप बदलता है।

इंपोर्ट के बाद SVG जाँचें

क्लिप और मास्क रेंडरिंग प्रभावित करते हैं, जबकि अगले ऐप को भरी सीमाएँ चाहिए हो सकती हैं। संपादन योग्य मूल रखें और वास्तविक लक्ष्य में वितरण प्रति परखें:

1. SVG अकेला खोलें, फिर इच्छित संपादक या प्रोडक्शन ऐप में रखें। समान ज़ूम पर भीतरी और बाहरी किनारे तुलना करें।
2. बाहरी रूप के आसपास viewBox या आर्टबोर्ड देखें। उसकी बाहर जाती 12 इकाई पट्टी और तीखे कोनों के जोड़ के लिए जगह छोड़ें।
3. ऑब्जेक्ट सूची देखें। उदाहरणों में फिर इस्तेमाल पाथ, क्लिप या मास्क और संपादन योग्य स्ट्रोक हैं। ये एक ठोस आउटलाइन सीमा नहीं बनाते।
4. प्राप्तकर्ता को भरी ज्यामिति चाहिए तो वितरण प्रति पर चुने गए स्ट्रोक को भरी ज्यामिति में बदलें और बनी आकृतियाँ जाँचें। बाद की चौड़ाई बदलने के लिए संपादन योग्य स्ट्रोक स्रोत रखें।

एक्सपोर्ट में रेखा गायब हो तो गायब रंग, क्लिपिंग और इंपोर्ट समर्थन अलग करने के लिए स्ट्रोक दृश्यता जाँच सूची अपनाएँ। स्ट्रोक अनपेक्षित रूप से भराव ढके तो हमारा SVG रंगने का क्रम लेख बताता है कि कौन-सी लेयर अंत में बनती है।

PerfectVector कहाँ काम आता है

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

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

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

क्या SVG अंदर या बाहर स्ट्रोक संरेखण समर्थित करता है? SVG Strokes संपादक का मसौदा वे मान बताता है, लेकिन कहता है कि SVG 2 मानक स्ट्रोक परिभाषा बनी है। अलग ऐप में देने के लिए मसौदा प्रॉपर्टी पर निर्भर होने के बजाय परखा क्लिप या मास्क इस्तेमाल करें।

स्ट्रोक चौड़ाई दोगुनी क्यों करता हूँ? सामान्य स्ट्रोक पाथ के दोनों तरफ़ आधा बैठता है। क्लिप या मास्क एक आधा हटाता है। इसलिए इन उदाहरणों में 24 इकाई स्ट्रोक से दृश्य 12 इकाई की भीतरी या बाहरी पट्टी बचती है।

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

स्रोत

1. MDN — भराव और स्ट्रोक — केंद्रित स्ट्रोक रेंडरिंग और यहाँ बताए रंगने के क्रम का व्यवहार परिभाषित करता है।
2. W3C SVG Working Group — SVG Strokes संपादक का मसौदा — प्रस्तावित संरेखण मान और SVG 2 के मुकाबले मसौदे की स्थिति तय करता है।
3. MDN — clipPath तत्व — भीतरी संरचना दृश्यता कैसे सीमित करती है, यह बताता है।
4. MDN — mask तत्व — बाहरी संरचना का मास्क क्षेत्र और निर्देशांक एट्रिब्यूट परिभाषित करता है।
5. Alex Chan — SVG में अंदर/बाहर स्ट्रोक बनाना — मूल बैज नमूने के शुरुआती आधार वाली दोगुनी चौड़ाई क्लिप और मास्क विधि दिखाता है।

लोगो अब भी रास्टर इमेज हो तो PerfectVector से संभावित SVG बनाएँ, पाथ सीमा जाँचें, फिर संपादक में भीतरी या बाहरी संरचना आज़माकर गंतव्य में वितरण फ़ाइल देखें।