SVG पेंट क्रम: मोटी आउटलाइन अक्षरों के पीछे रखें

SVG टेक्स्ट या आकार एलिमेंट पर paint-order="stroke fill" रखें ताकि उसकी आउटलाइन भरण से पहले बने। अपारदर्शी भरण स्ट्रोक के अंदर की ओर वाले हिस्से को ढकता है, इसलिए मोटी आउटलाइन अक्षरों की रंगीन सतह को नहीं ढकती। CSS में paint-order: stroke fill; भी लिख सकते हैं।

पाथ, फ़ॉन्ट आकार और स्ट्रोक चौड़ाई वही रहते हैं। यह रूप की सेटिंग है, जो आउटलाइन वाले शब्दचिह्न में स्ट्रोक चौड़ाई बढ़ाने के बाद उसे भारी या पढ़ने में कठिन होने पर उपयोगी है। इससे बाहर संरेखित स्ट्रोक या नया कटिंग कंटूर नहीं बनता।

डिफ़ॉल्ट आउटलाइन अक्षरों की जगह क्यों घटाती है

SVG सामान्यतः एलिमेंट का भरण, फिर स्ट्रोक, फिर मार्कर बनाता है। केंद्रित स्ट्रोक भरे आकार की सीमा के दोनों ओर फैलता है। उस स्ट्रोक को अंत में बनाने से कुछ भरण ढकता है। पतले अक्षर हिस्सों पर बड़ा स्ट्रोक अधिकांश सतह रंग छिपा सकता है।

पहले दो कामों का क्रम उलटने से भरण उस ओवरलैप को ढकता है। SVG पेंटिंग विनिर्देश क्रम परिभाषित करता है और MDN का SVG एट्रिब्यूट संदर्भ एट्रिब्यूट तथा उसके CSS रूप दोनों बताता है। छोटा मान stroke वही क्रम देता है जो stroke fill markers: छोड़े गए काम बाद में अपने सामान्य सापेक्ष क्रम में आते हैं।

प्रभाव के लिए दिखाई देने वाला भरण चाहिए। fill="none" वाले पाथ में अंदरूनी स्ट्रोक के ऊपर बनाने को कुछ नहीं है। आंशिक पारदर्शी भरण से वह स्ट्रोक दिख सकता है, इसलिए यहाँ दिखाए परिणाम के लिए अपारदर्शी भरण इस्तेमाल करें।

वही चित्र दो आकारों पर तुलना करके देखें

हमने लाइव टेक्स्ट से छोटा BOLD शब्दचिह्न और छोटा त्रिकोणीय पाथ प्रतीक बनाया। नीचे ब्राउज़र तुलना में हर जोड़ी में केवल पेंट क्रम बदलता है। इसमें 4 और 8 SVG यूज़र इकाइयों की स्ट्रोक चौड़ाई है, फिर वही 400 × 110 viewBox 400 और 200 CSS पिक्सेल चौड़ाई पर दिखता है।

8 इकाई वाली सेटिंग पर सामान्य क्रम का शब्दचिह्न काफी पीली सतह खो देता है। भरण अंत में बनाने से पीले अक्षर हिस्से दिखते रहते हैं। 200 पिक्सेल संस्करण में भी प्रभाव दिखता है, लेकिन छोटे खुले हिस्से तंग रहते हैं। अधिक भारी स्ट्रोक से प्रतीक का छोटा अंदरूनी खुला हिस्सा भी अलग पहचानना कठिन होता है।

यह अंतिम बारीकी ज़रूरी है: पेंट क्रम अक्षर की सतह बचा सकता है, लेकिन हर खाली हिस्सा या अंतराल पढ़ने योग्य नहीं बनाता। स्ट्रोक अब भी बिना भरण की जगह में फैलते हैं। यदि इच्छित प्रदर्शन आकार पर खुला हिस्सा बंद हो, तो स्ट्रोक घटाएँ या चित्र सरल करें। ब्राउज़र पूर्वावलोकन बड़ा करना उस आकार की जाँच का विकल्प नहीं जिसे पाठक वास्तव में देखेगा।

ये मौलिक ड्रॉइंग उदाहरण हैं, PerfectVector रूपांतरण परिणाम नहीं। शब्दचिह्न इंस्टॉल Arial फ़ॉन्ट और sans-serif विकल्प इस्तेमाल करता है; अलग फ़ॉन्ट अक्षर आकार और दूरी बदलता है।

पूरा SVG आज़माएँ

इसे wordmark.svg में सहेजकर सीधे ब्राउज़र में खोलें। उदाहरण आकारों के आसपास दिखते स्ट्रोक के लिए पर्याप्त जगह रखता है। तुलना के लिए paint-order को normal करें, फिर stroke-width="4" आज़माएँ।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

समूह अपने रंग गुण पाथ और टेक्स्ट को देता है। हर चाइल्ड अपनी रेंडरिंग के लिए माँगा गया क्रम इस्तेमाल करता है। fill-rule="evenodd" प्रतीक का अंदरूनी खुला हिस्सा देता है; यह पेंट क्रम से स्वतंत्र है।

छोटे उदाहरण दोहराने के लिए width और height को 200 तथा 55 करें और viewBox वैसा रखें। क्योंकि फ़ाइल में नॉन-स्केलिंग स्ट्रोक नहीं है, चित्र और स्ट्रोक साथ स्केल होते हैं। आधे आकार की मैपिंग पर 8 इकाई का स्ट्रोक 4 CSS पिक्सेल चौड़ा होता है, भरण से छिपे हिस्से को गिनने से पहले।

स्टाइलशीट आधारित संस्करण के लिए लक्ष्य को क्लास देकर सेट करें:

.outlined-wordmark {
  paint-order: stroke fill;
}

जब प्रस्तुति एट्रिब्यूट और CSS घोषणा दोनों यह गुण दें, तो CSS की प्राथमिकता होती है। एट्रिब्यूट बदलने का प्रभाव न दिखे, तो लागू नियम देखें। MDN का CSS संदर्भ विरासत और अनुमत कीवर्ड संयोजन भी समझाता है।

यह सेटिंग क्या नहीं बदलती

स्ट्रोक संरेखण। स्ट्रोक उसी केंद्रीय पाथ का अनुसरण करता है। उसके हिस्से पर भरण बनाने से भरे क्षेत्र के आसपास बाहर जैसी सीमा बनती है, लेकिन स्ट्रोक ज्यामिति बाहर नहीं खिसकी है। खाली हिस्से के किनारे पर बचा दिखाई देने वाला स्ट्रोक उस हिस्से में घुस सकता है।

अलग ऑब्जेक्ट का परत क्रम। एक एलिमेंट पर पेंट क्रम रखने से वह पड़ोसी आकार के पीछे नहीं जाता। बाद का ओवरलैप वाला ऑब्जेक्ट उसे अब भी ढक सकता है। यदि यही समस्या है, तो ऑब्जेक्ट का क्रम बदलें। उदाहरण के लिए देखें SVG z-index लोगो पाथ का क्रम क्यों नहीं बदलता।

कट पाथ या ऑफ़सेट। कटर या ज्यामिति टूल को उपयुक्त कंटूर चाहिए। यह नहीं मान सकते कि वह आकर्षक ब्राउज़र आउटलाइन को एक जुड़ी सीमा समझेगा। यदि डिलीवरी के काम में इसकी ज़रूरत हो, तो आवश्यक ज्यामिति अलग बनाएँ और जाँचें।

फ़ॉन्ट पोर्टेबिलिटी। नमूने में लाइव टेक्स्ट है। पेंट क्रम बदलने से फ़ॉन्ट साथ पैक नहीं होता और ग्लिफ़ आकार स्थिर नहीं होते। दूसरी जगह दोबारा खोलने पर शब्दचिह्न बदले तो SVG फ़ॉन्ट बदलाव जाँच इस्तेमाल करें।

संपादन में ये अंतर अलग रखें। पेंट क्रम का बदलाव आसानी से वापस होता है; स्ट्रोक विस्तार या टाइप को पाथ में बदलना दस्तावेज़ की संपादन योग्य संरचना बदलता है।

डिलीवरी प्रति उसके गंतव्य में जाँचें

ब्राउज़र परिणाम से शुरू करें, फिर सहेजी फ़ाइल उस एप्लिकेशन या रेंडरर में खोलें जो उसे इस्तेमाल करेगा। केवल ब्राउज़र पूर्वावलोकन यह सिद्ध नहीं करता कि संपादक, PDF कन्वर्टर या प्रोडक्शन पाइपलाइन रूप सुरक्षित रखती है।

1. अंतिम आकार पर सतह रंग और बाहरी सीमा मिलाएँ। B, O तथा प्रतीक के संकरे खुले हिस्सों में देखें।
2. सुनिश्चित करें कि अपेक्षित फ़ॉन्ट लोड हुआ। अक्षर आकार के साथ दूरी भी जाँचें।
3. पेज किनारे देखें। चौड़े स्ट्रोक को व्यूपोर्ट या क्लिप में अधिक जगह चाहिए हो सकती है।
4. निर्यात डिलीवरी फ़ाइल दोबारा खोलें। काम वाला दस्तावेज़ सही दिखने पर भी निर्यात स्टाइल या ऑब्जेक्ट निर्माण बदल सकता है।

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

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

जब स्रोत रास्टर लोगो हो

मूल वेक्टर प्रतीक और लाइव अक्षर उपलब्ध हों तो उन्हें इस्तेमाल करें। केवल आउटलाइन जोड़ने के लिए काम करते टेक्स्ट का स्क्रीनशॉट लेकर ट्रेस करने का लाभ नहीं है।

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

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

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

डिफ़ॉल्ट SVG पेंट क्रम क्या है? डिफ़ॉल्ट क्रम fill, फिर stroke, फिर markers है। normal मान वही क्रम माँगता है।

क्या paint-order="stroke", "stroke fill" से अलग है? यहाँ दोनों वही क्रम बनाते हैं: stroke, fill, फिर markers। सूची में न दिए काम सूची वाले कामों के बाद अपने सामान्य सापेक्ष क्रम में आते हैं।

क्या paint-order बाहरी स्ट्रोक बनाता है? यह स्ट्रोक खिसकाता या ऑफ़सेट नहीं करता। अपारदर्शी भरण केंद्रित स्ट्रोक के अंदर की ओर वाले हिस्से को छिपाता है। बचा स्ट्रोक खाली हिस्सों और अंतराल की जगह अब भी घटा सकता है।

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

स्रोत

1. W3C — SVG 2 पेंटिंग — पेंटिंग क्रम और भरण तथा स्ट्रोक का संबंध परिभाषित करता है।
2. MDN — SVG paint-order एट्रिब्यूट — कीवर्ड क्रम, समर्थित एलिमेंट प्रकार और प्रस्तुति एट्रिब्यूट पर CSS प्राथमिकता बताता है।
3. MDN — CSS paint-order गुण — विरासत और संक्षिप्त कीवर्ड क्रम समझाता है।

केवल रास्टर प्रतीक है? संपादन योग्य लोगो SVG तैयार करें, उसके खुले हिस्से देखें और डिलीवरी प्रति बनाने से पहले इच्छित आकार पर आउटलाइन जाँचें।