लेखों की प्रस्तावित श्रृंखला, " एसवीजी फ़िल्टरिंग इफेक्ट्स " , सारा सॉइदन द्वारा, एक फ्रीलांस यूआई / यूएक्स इंटरफ़ेस डेवलपर और लेबनान में स्थित कई तकनीकी लेखों के लेखक, एसवीजी फिल्टर के काम पर केंद्रित है और इसमें निम्नलिखित लेख शामिल हैं:

एसवीजी फ़िल्टरिंग प्रभाव

एसवीजी फ़िल्टरिंग प्रभाव। भाग 1. एसवीजी फिल्टर 101 ।
एसवीजी फ़िल्टरिंग प्रभाव। भाग 2. feMorphology के साथ पाठ की रूपरेखा
एसवीजी फ़िल्टरिंग प्रभाव। भाग 3. feComponentTransfer का उपयोग करके छवि के पोस्टराइजेशन का प्रभाव ।
एसवीजी फ़िल्टरिंग प्रभाव। भाग 4. feComponentTransfer के साथ दो-रंग की छवियां ।
एसवीजी फ़िल्टरिंग प्रभाव। भाग 5. feDisplacementMap के साथ सतह बनावट के लिए पाठ का मिलान

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

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

<feMorphology> मेरे पसंदीदा SVG फ़िल्टर ऑपरेशनों में से एक है। यह सबसे सरल ऑपरेशनों में से एक भी है, और विभिन्न तत्वों के लिए इसके आवेदन के परिणाम हमेशा अनुमानित होते हैं।

मॉर्फिंग क्या है?

मोर्फिंग का अर्थ है किसी वस्तु का आकार या रूप बदलना या बदलना।

आकृति विज्ञान फ़िल्टर ऑब्जेक्ट के आकार पर संचालित होता है। यह दो पूर्वनिर्धारित आकार परिवर्तन प्रदान करता है: अपरदन (यानी, पतला या घटाना) और विस्तार (यानी, ए। मोटा होना या विस्तार)। दूसरे शब्दों में, एक तत्व को संपीड़ित या विस्तारित करने के लिए सामंतशाही आदिम का उपयोग किया जा सकता है।

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

<feMorphology in=".." result=".." operator="dilate || erode" radius=""> </feMorphology>

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

हालांकि, वास्तव में, त्रिज्या वास्तव में कोर के आकार की विशेषता करता है, जिसे संरचनात्मक तत्व कहा जाता है, जो मैट्रिक्स की तरह अधिक है। अभी के लिए, यह एक छोटी आयत के रूप में इसका प्रतिनिधित्व करने के लिए पर्याप्त है, जिसकी चौड़ाई और ऊंचाई त्रिज्या विशेषता में निर्दिष्ट पिक्सेल द्वारा निर्दिष्ट की गई है।

फ़िल्टर का उपयोग करने के लिए, हमें उन थकाऊ छोटी चीज़ों में जाने की ज़रूरत नहीं है जो पिक्सेल स्तर पर मॉर्फिंग करती हैं। यह जानना पर्याप्त है कि आप feMorphology में एक या दो त्रिज्या मान प्रदान कर सकते हैं, जो उस राशि का निर्धारण करेगा जिसके द्वारा तत्व संपीड़ित या विस्तारित होगा। यदि त्रिज्या विशेषता में दो संख्याएँ निर्दिष्ट हैं, तो पहला x- त्रिज्या के अनुरूप होगा, और दूसरा y- त्रिज्या के अनुरूप होगा।

छवि मोर्फ

यदि फॉमर्फ़ोलॉजी ऑपरेशन को छवियों पर लागू किया जाता है, तो दो, एक नियम के रूप में, अनुमानित परिणाम का पालन करेंगे:

इरोड ऑपरेटर का उपयोग करने पर छवि का आकार कम हो जाता है , या यदि पतला ऑपरेटर का उपयोग किया जाता है तो बढ़ जाता है ।
किसी भी ऑपरेटर के साथ, छवि ऐसी दिखती है जैसे कि इसे बड़े पेंट ब्रश के साथ चित्रित किया गया था, जिसमें छोटे विवरणों की एक छोटी राशि है।

इस प्रकार, छवि पर मॉर्फिंग प्रभाव लागू करने के लिए, हमारे कोड को कुछ इस तरह दिखना चाहिए:

 <svg width="450" height="300" viewBox="0 0 450 300"> <filter id="erode"> <feMorphology operator="erode" radius="3"></feMorphology> </filter> <image xlink:href="..." width="90%" height="90%" x="10" y="10" filter="url(#erode)"></image> </svg>

इस टुकड़े में, हम 3 पिक्सेल द्वारा छवि (पिक्सेल में) को धुंधला (संपीड़ित) करते हैं। निम्नलिखित आंकड़ा इस कोड का परिणाम दिखाता है। ध्यान दें कि दाईं ओर की छवि का आकार थोड़ा छोटा है:

Ris_2। दाईं ओर, बाईं ओर छवि पर मॉर्फिंग के धब्बा प्रभाव को लागू करने का परिणाम है।

अब, यदि हम एक ही मॉर्फिंग त्रिज्या रखते हैं और ऑपरेटर को इरोड से पतला करने के लिए बदलते हैं , तो प्रभाव समान होगा, लेकिन यह भी अलग है:

Ris_3। दाईं ओर, बाईं ओर छवि के लिए dilate morph ऑपरेशन को लागू करने का परिणाम है।

दोनों ही मामलों में, छवि अपने आप में एक अमूर्त चित्रित संस्करण की तरह दिखती है, और पिक्सेल के विस्तार या अनुबंध के रूप में इसका समग्र आकार बदलता है।

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

इरोड (यह मान डिफ़ॉल्ट रूप से उपयोग किया जाता है) प्रत्येक पिक्सेल के लिए क्रमशः आर, जी, बी और ए चैनलों में से प्रत्येक के लिए सबसे कम चमक या अपने समुदाय की उच्चतम अस्पष्टता के लिए सेट करता है;
प्रत्येक पिक्सेल के प्रत्येक चैनल के लिए dilate सेट उसके समुदाय के सबसे चमकदार या कम से कम पारदर्शी मूल्य के अनुरूप है।

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

हालाँकि, पाठ के रूप में मोनोक्रोम तत्वों के लिए सामंतशाही को लागू करना , केवल किसी भी ध्यान देने योग्य पिक्सेल रंग परिवर्तन किए बिना इसे संपीड़ित या फैलाता है, क्योंकि हमारे पास अभी भी केवल एक ही रंग है ...

FeMorphology के साथ टेक्स्ट में कलर आउटलाइन जोड़ना

अब हम इस पाठ के लिए स्ट्रोक विशेषता का उपयोग करके एसवीजी में पाठ की रूपरेखा जोड़ सकते हैं।

 <!-- Adding an outline to SVG text using strokes --> <text font-size="80px" dx="100" dy="200" font-weight="700" stroke="deepPink" stroke-width="3px">Stroked Text</text>

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

जब तक अन्यथा निर्दिष्ट नहीं किया जाता है, तब तक टेक्स्ट में आमतौर पर एक रंग होता है। तो, पाठ पर लागू, feMorphology आपको पाठ की मोटाई को कम करने या बढ़ाने की अनुमति देता है। एक बार जब पाठ को सामंतवाद के साथ विस्तारित किया गया है, तो इसका उपयोग पाठ की रूपरेखा बनाने के लिए अन्य फिल्टर प्राइमेटिव्स के इनपुट के रूप में किया जा सकता है, जो कि हमें चाहिए।

इससे पहले कि हम यह करें कि यह कैसे किया जाए, पाठ के बीच के अंतर को दिखाते हुए ग्राफिक पर एक नज़र डालें, और रूपरेखा विज्ञान के साथ जोड़ दी गई रूपरेखा।

स्रोत पाठ की तुलना एक स्ट्रोक और ** feMorphology के साथ बनाई गई रूपरेखा के साथ पाठ से करें।
Ris_4। पाठ के साथ स्रोत पाठ की तुलना एक झटके के साथ और सामंतवाद का उपयोग करके बनाई गई रूपरेखा।

कृपया ध्यान दें कि दूसरी लाइन पर स्रोत पाठ तीसरी पंक्ति के पाठ की तुलना में एक चिकनी रूपरेखा जोड़ने के बाद पतला हो गया है, जो सामंतवाद के साथ विस्तारित है।

तो, चलो कदम से कदम एक रूपरेखा के साथ पाठ का एक रंगीन टुकड़ा बनाएँ। यहाँ परिणाम है जिसके लिए हम प्रयास करेंगे:

Ris_5। अंतिम परिणाम।

इसलिए, हम एक एसवीजी युक्त करेंगे जिसमें हमारा टेक्स्ट होगा और एक फिल्टर होगा जो एक साधारण एक्सटेंशन ऑपरेशन शुरू करेगा। टेक्स्ट एक्सटेंशन का आकार उस रूपरेखा की मोटाई पर निर्भर करता है जिसे हम प्राप्त करना चाहते हैं।

 <svg width="900" height="200" viewBox="100 0 900 200"> <filter id="outline"> <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology> </filter> <!-- DILATED TEXT --> <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text> </svg>

उपरोक्त कोड को टेक्स्ट का अल्फा चैनल मिलेगा, जो कि टेक्स्ट का केवल एक काला संस्करण है, और फ़ॉन्ट की मोटाई 4px बढ़ाता है। इस स्तर पर कोड का परिणाम इस प्रकार है:

Ris_6। गाढ़ा होने के बाद पाठ।

... स्रोत पाठ की तुलना में, जिसमें गहरे नीले रंग का रंग है:

Ris_7। स्रोत पाठ

एक समोच्च प्रभाव बनाने के लिए, हम विस्तारित पाठ के शीर्ष पर स्रोत पाठ को ओवरले करते हैं, केवल स्रोत पाठ के चारों ओर दिखाई देने वाले विस्तारित पाठ (हमारे अतिरिक्त 4px) के किनारों को छोड़कर, उन्हें एक पथ की तरह बनाते हैं। इसकी रूपरेखा पर पाठ ओवरले (विस्तारित पाठ) feMerge का उपयोग करके किया जाएगा। यह कैसे किया जाता है हमने पिछले लेख में जांच की थी।

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

अब हमारा कोड इस तरह दिखता है:

 <svg width="900" height="200" viewBox="100 0 900 200"> <filter id="outline"> <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology> <feFlood flood-color="#32DFEC" flood-opacity="1" result="PINK"></feFlood> <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite> <feMerge> <feMergeNode in="OUTLINE" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <!-- DILATED TEXT --> <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text> </svg>

एसवीजी में फ़िल्टरिंग प्रभाव बनाने की प्रक्रिया में छोटे अनुक्रमिक संचालन के रूप में अंतिम परिणाम का प्रतिनिधित्व होता है, एक ऑपरेशन के परिणाम को दूसरे के इनपुट के रूप में और अंत में अंतिम परिणाम प्राप्त करने के लिए उनके द्वारा बनाई गई सभी परतों को मिलाकर।

और यहाँ उपरोक्त कोड का डेमो है:

पाठ का भरण रंग आपके CSS में या भरण विशेषता का उपयोग करके पाठ तत्व में निर्दिष्ट किया जा सकता है। आउटलाइन रंग को सेट किया जा सकता है, फ़्लफ़ प्राइमरी की बाढ़-रंग विशेषता।

बहुत बढ़िया! और यदि आप समोच्च का रंग बदलना चाहते हैं? आपको फिर से फ़ाइफ़्लड आदिम का उपयोग करना होगा और रंग भरने की रूपरेखा के साथ संयोजन करना होगा। और हर बार जब आप रूपरेखा का रंग बदलना चाहते हैं, तो आपको एक ही काम बार-बार करना होगा। यह, जाहिर है, बहुत थकाने वाला है। सौभाग्य से, एक आसान तरीका है।

पाठ को खटखटाया

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

उभरा हुआ पाठ उदाहरण
Ris_8। उभरा हुआ पाठ का एक उदाहरण।

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

यदि पाठ के अल्फा चैनल को कैप्चर करने और विस्तारित करने के बजाय (जो डिफ़ॉल्ट रूप से काला है), आप स्रोत पाठ को स्वयं कैप्चर करते हैं (जिसका कोई रंग भर सकता है!), इसे विस्तृत करें, और फिर विस्तारित पाठ के अंदर कट आउट करने के लिए फिर से पाठ का उपयोग करें, आपको एक रास्ता मिलेगा! जो स्रोत कोड से ही आता है। इसका मतलब है कि इस पथ का रंग हमेशा स्रोत पाठ के रंग से मेल खाएगा। और चूंकि हम सीएसएस में स्रोत पाठ के रंग को निर्धारित कर सकते हैं, इसका मतलब है कि आपके पास एक पाठ रूपरेखा है जो इसकी शैलियों से अलग है। (चिंताओं के हुर्रे जुदाई!) फिर आप इस फ़िल्टर को किसी भी पाठ के टुकड़े पर लागू कर सकते हैं और फ़िल्टर कोड को कॉन्फ़िगर करने की आवश्यकता के बिना किसी भी समय CSS में इस पाठ का रंग बदल सकते हैं। हमारा बेहतर कोड अब इस तरह दिखता है:

 <svg width="900" height="450" viewBox="0 0 900 450"> <filter id="outliner"> <!-- Start by grabbing the alpha channel of the text and dilating it--> <feMorphology operator="dilate" radius="8" in="SourceAlpha" result="THICKNESS" /> <!-- Next, grab the original text (SourceGraphic) and use it to cut out the inside of the dilated text --> <feComposite operator="out" in="THICKNESS" in2="SourceGraphic"></feComposite> </filter> <text dx="100" dy="300" filter="url(#outliner)" letter-spacing="10px">SVG Rocks</text> </svg>

एक अच्छे फ़ॉन्ट का उपयोग करते हुए, हमारा डेमो अब इस तरह दिखता है:

Ris_9। हमारे काम का नतीजा है।

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

 svg text { font-family: 'Bangers', cursive; font-size: 150px; letter-spacing: 13px; fill: #000; /* This fill color determines the color of the outline */ } svg { background-color: gold; animation: colorsssss 2s linear infinite; animation-delay: 3s; } @keyframes colorsssss { 50% { background-color: deepPink; } }

उपरोक्त SVG फ़िल्टर HTML की तरह SVG के माध्यम से पुन: प्रयोज्य है। यदि आप इसे HTML तत्व पर लागू करना चाहते हैं, तो आप फ़िल्टर संपत्ति का उपयोग करके ऐसा कर सकते हैं; बस HTML में फ़िल्टर डालें और इसे CSS में "कॉल" करें:

 h2 { filter: url(#outliner); /* You can change the color of the outline here by changing the color of the heading */ color: deepPink; }

और हमारे समाप्त डेमो, जिसमें एक HTML हेडर शामिल है, जिस पर एक फ़िल्टर लागू है:

इस फिल्टर रेसिपी के बारे में मेरी पसंदीदा बात यह है कि इसे विज़ुअल एनहांसमेंट के रूप में इस्तेमाल किया जा सकता है। यदि ब्राउज़र एसवीजी फिल्टर का समर्थन नहीं करता है, या यह सीएसएस फिल्टर का समर्थन नहीं करता है, या यह एचटीएमएल तत्वों को एसवीजी फिल्टर लगाने का समर्थन नहीं करता है, तो उपयोगकर्ता स्रोत पाठ को रूपरेखा के बिना और उस पर लागू पारभासी प्रभाव प्राप्त करेगा। ओह, और केक पर चेरी शीर्ष पर? एसवीजी और एचटीएमएल दोनों पाठ पूरी तरह से खोज और संपादन योग्य होंगे। हुर्रे प्रगतिशील सुधार! लंबे समय तक एसवीजी रहते हैं!

निष्कर्ष

एसवीजी में सिर्फ दो फ़िल्टरिंग ऑपरेशनों का उपयोग करके, आप चयनित टेक्स्ट के प्रभाव को एसवीजी या एचटीएमएल की टेक्स्ट सामग्री पर लागू कर सकते हैं। इस फ़िल्टर को HTML में रखें और ज़रूरत पड़ने पर इस्तेमाल करें।

इस श्रृंखला के अगले लेख में, हम feComponentTransfer , मेरे पसंदीदा फिल्टर प्राइमेटर्स में से एक को देखेंगे, और देखेंगे कि यह कैसे काम करता है और इसके साथ हम क्या प्रभाव पैदा कर सकते हैं। हमारे साथ रहो।

एसवीजी फिल्टर के प्रभाव। भाग 2. feMorphology के साथ पाठ की रूपरेखा