SVG feMorphology: नए पाथ बनाए बिना आउटलाइन जोड़ें

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

अगर आप अल्फ़ा की छोटी आकृति चाहते हैं तो operator="erode" इस्तेमाल करें। इनमें से कोई भी क्रिया संपादन योग्य ऑफ़सेट पाथ नहीं बनाती। छेद, संकरे अंतर और तीखे कोने देखकर जाँचना ज़रूरी है, क्योंकि मॉर्फ़ोलॉजी गोल स्ट्रोक ऑफ़सेट के बजाय आयताकार पड़ोस का इस्तेमाल करती है।

रंग चैनलों के बजाय बाहरी आकृति से शुरू करें

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

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

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

त्रिज्या 10 पर आउटलाइन दिखाई देने वाली आकृति के बाहर और छेद के अंदर बढ़ती है। 22 पर सुनहरा रंग इस परीक्षण चित्र का चौकोर छेद भर देता है। 18 4 वाला संस्करण ऊर्ध्वाधर दिशा की तुलना में क्षैतिज दिशा में अधिक बढ़ता है। संकुचन अपारदर्शी बाहरी क्षेत्र को छोटा और पारदर्शी छेद को बड़ा करता है; नीचे का नुकीला हिस्सा भी बदलता है।

ये निष्कर्ष इसी चित्र और इन्हीं सेटिंग पर लागू होते हैं। दूसरे लोगो या आइकन के लिए इन्हें सुरक्षित त्रिज्या का सामान्य नियम न मानें।

बाहरी अल्फ़ा पट्टी बनाएँ

इस पूरे उदाहरण को outline.svg नाम से सेव करें और ब्राउज़र में खोलें। कैप्चर में त्रिज्या 10 वाला यही SVG इस्तेमाल हुआ है:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

फ़िल्टर चार चरणों में काम करता है:

1. feMorphology, SourceAlpha को फैलाकर grown बनाता है।
2. feComposite, मूल अल्फ़ा के बाहर का grown रखता है और ring बनाता है।
3. feFlood सुनहरा रंग देता है; दूसरा कंपोज़िट उस रंग को पट्टी तक सीमित करता है।
4. feMerge मूल SourceGraphic को रंगीन पट्टी के ऊपर रखता है।

घटाने की क्रिया में इनपुट का क्रम मायने रखता है। विनिर्देश का कंपोज़िटिंग खंड in को स्रोत और in2 को गंतव्य मानता है। यहाँ in="grown", in2="SourceAlpha" और operator="out" फैले हुए अल्फ़ा से मूल अपारदर्शी क्षेत्र निकालते हैं। इनपुट उलटने से यह बाहरी पट्टी नहीं बनती।

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

मूल रंग दिखाई देते हैं क्योंकि हम बिना बदला हुआ SourceGraphic सबसे आखिर में जोड़ते हैं। यह सामान्य पाथ स्ट्रोक से अलग है। बीच में स्थित, अंदर क्लिप किए गए या बाहर मास्क किए गए स्ट्रोक के लिए SVG स्ट्रोक संरेखण देखें; पेंट क्रम स्ट्रोक और फ़िल की सरल परत व्यवस्था समझाता है।

अल्फ़ा को संकुचित करें और बचे हुए रंग रखें

आउटलाइन फ़िल्टर की जगह यह परिभाषा रखें और अंतिम use में filter="url(#erode)" करें:

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

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

काम करने वाले उदाहरणों में ऑपरेटर स्पष्ट रूप से लिखें। ऑपरेटर संदर्भ feMorphology के erode और dilate को feComposite के in और out से अलग बताता है। एक ही एट्रिब्यूट नाम दोनों तत्वों में अलग काम करता है। मॉर्फ़ोलॉजी का डिफ़ॉल्ट ऑपरेटर erode है, इसलिए उसे छोड़ देने पर इच्छित फैलाव का उलटा असर आसानी से हो सकता है।

त्रिज्या की इकाइयों को फ़िल्टर क्षेत्र से अलग समझें

त्रिज्या संदर्भ एक या दो संख्याएँ स्वीकार करता है। एक संख्या दोनों अक्षों पर लागू होती है; दो होने पर पहली x त्रिज्या और दूसरी y त्रिज्या होती है। दो अतिरिक्त आउटलाइन स्थितियों के लिए पूरे उदाहरण में केवल radius="10" को radius="22" या radius="18 4" में बदलें।

ये primitiveUnits द्वारा चुनी गई निर्देशांक प्रणाली की त्रिज्याएँ हैं; हर प्रदर्शन आकार पर स्थिर CSS-पिक्सेल बॉर्डर का वादा नहीं हैं। हम 0 0 300 220 viewBox के साथ स्पष्ट रूप से primitiveUnits="userSpaceOnUse" इस्तेमाल करते हैं। प्रदर्शित SVG का आकार बदलने से चित्र के साथ प्रभाव भी स्केल होता है।

मिलते-जुलते नाम वाले दो एट्रिब्यूट अलग चीज़ें नियंत्रित करते हैं:

MDN का primitiveUnits संदर्भ प्रिमिटिव की निर्देशांक प्रणाली बताता है। उसका filterUnits संदर्भ अलग से बाहरी क्षेत्र बताता है। filterUnits का डिफ़ॉल्ट objectBoundingBox और primitiveUnits का डिफ़ॉल्ट userSpaceOnUse है। दोनों स्पष्ट रूप से सेट करने पर उदाहरण जाँचना आसान होता है।

मूल चित्र x=50 से 250 और y=60 से 195 तक फैला है। दोनों अक्षों पर समान त्रिज्या का सबसे बड़ा परीक्षण मान 22 है, और 300 गुणा 220 का फ़िल्टर क्षेत्र तथा व्यूपोर्ट उस परिणाम के लिए जगह छोड़ते हैं। चित्र या त्रिज्या बदलने पर दोनों सीमाएँ दोबारा जाँचें। विनिर्देश फ़िल्टर क्षेत्र को कठोर क्लिप सीमा बताता है: बड़ी त्रिज्या भी उसके बाहर रंग नहीं भर सकती। SVG फ़िल्टर और व्यूपोर्ट क्लिपिंग की मार्गदर्शिका ये दो अलग सीमाएँ दिखाती है।

अगर फ़िल्टर निष्क्रिय लगे तो radius भी जाँचें। उसका डिफ़ॉल्ट 0 है और संदर्भ के अनुसार ऋणात्मक या शून्य मान प्रिमिटिव का प्रभाव बंद कर देता है। ऊपर के उदाहरण दोनों अक्षों पर स्पष्ट धनात्मक मान इस्तेमाल करते हैं।

फ़ाइल देने से पहले छेद और कोने जाँचें

मॉर्फ़ोलॉजी का आयताकार पड़ोस उसे सामान्य गोल आउटलाइन से अलग रूप देता है। x और y की बराबर त्रिज्याएँ उस पड़ोस को वृत्त नहीं बनातीं। तुलना में नीचे के नुकीले हिस्से की सीढ़ीनुमा बनावट यह अंतर जाँचने के लिए उपयोगी जगह है।

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

बिना फ़िल्टर वाला मूल संस्करण और अलग वितरण प्रति रखें। दी जाने वाली फ़ाइल को उसके वास्तविक गंतव्य में खोलें और कोनों, अंदरूनी छेदों, रंगों तथा सीमाओं की तुलना करें। यह ब्राउज़र उदाहरण किसी खास डिज़ाइन ऐप, एक्सपोर्टर या कटिंग मशीन में समर्थन साबित नहीं करता।

प्रभाव जोड़ने से पहले मूल चित्र तैयार करें

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

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

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

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

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

SourceGraphic के बजाय SourceAlpha क्यों इस्तेमाल करें? SourceAlpha फ़िल्टर को हर मूल रंग चैनल फैलाए बिना बाहरी आकृति पर काम करने देता है। उदाहरण उस अल्फ़ा पट्टी को अलग रंग देता है और मूल रंग दिखाने के लिए SourceGraphic को आखिर में जोड़ता है।

स्रोत

1. W3C — फ़िल्टर इफ़ेक्ट्स स्तर 1 — मॉर्फ़ोलॉजी का आयताकार पड़ोस, कंपोज़िटिंग इनपुट और फ़िल्टर क्षेत्र की क्लिप सीमा परिभाषित करता है।
2. MDN — radius — एक और दो मान वाली त्रिज्या का सिंटैक्स, इकाइयाँ और प्रभाव बंद करने वाले मान परिभाषित करता है।
3. MDN — operator — मॉर्फ़ोलॉजी और कंपोज़िटिंग की क्रियाओं में अंतर बताता है।
4. MDN — primitiveUnits — मॉर्फ़ोलॉजी की त्रिज्या के लिए निर्देशांक प्रणाली स्थापित करता है।
5. MDN — filterUnits — बाहरी फ़िल्टर क्षेत्र के लिए निर्देशांक प्रणाली स्थापित करता है।

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