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

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

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

यह एसवीजी फिल्टर के बारे में एक श्रृंखला का पहला लेख है। यह मार्गदर्शिका आपको यह समझने में मदद करेगी कि यह क्या है और आपको अपने स्वयं के दृश्य प्रभाव बनाने के लिए उनका उपयोग करने का तरीका दिखाता है।

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

अब हमारे पास CSS में 11 फ़िल्टर फ़ंक्शंस हैं जो धुंधला होने से लेकर रंग बदलने और संतृप्ति तक कई प्रभाव डालते हैं, और बहुत कुछ। इस बारे में अधिक जानकारी के लिए, CSS संदर्भ देखें ।

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

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

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

** धब्बा लगाने का प्रभाव () ** कार्य - गाऊसी धब्बा
Ris_1। ब्लर लगाने का प्रभाव () CSS फ़ंक्शन गॉसियन ब्लर है।

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

कुल्हाड़ियों के साथ SVG फ़ंक्शन ** ब्लर () ** को अलग से लागू करने का प्रभाव
Ris_2। धब्बा () एसवीजी फ़ंक्शन को कुल्हाड़ियों के साथ अलग से लागू करने का प्रभाव।

एसवीजी फिल्टर एचटीएमएल तत्वों और एसवीजी दोनों तत्वों पर लागू किया जा सकता है। एसवीजी फ़िल्टरिंग प्रभाव सीएसएस में HTML तत्व के लिए यूआरएल () फिल्टर फ़ंक्शन का उपयोग करके लागू किया जा सकता है। उदाहरण के लिए, यदि आपके पास SVG में परिभाषित पहचानकर्ता MyAwesomeEffect के साथ फ़िल्टर प्रभाव है (हम निकट भविष्य में SVG में फ़िल्टर प्रभाव को परिभाषित करने के बारे में बात करेंगे), तो आप इस प्रभाव को HTML तत्व या छवि पर लागू कर सकते हैं:

.el { filter: url(#myAwesomeEffect); }

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

लेकिन ब्राउज़र समर्थन के बारे में आप क्या पूछते हैं ..?

ब्राउज़र का समर्थन

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

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

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

तो, एसवीजी में फ़िल्टरिंग प्रभाव को कैसे परिभाषित करें और बनाएं?

<फ़िल्टर> तत्व

एसवीजी में रैखिक ग्रेडिएंट्स, मास्क, पैटर्न और अन्य ग्राफिक प्रभावों की तरह, फ़िल्टर में आसानी से नामित विशेष तत्व होता है: <फ़िल्टर> ।

इसे कभी भी सीधे प्रदर्शित नहीं किया जाता है, लेकिन इसका उपयोग केवल एक ऐसी वस्तु के रूप में किया जाता है जिसे एसवीजी या फिल्टर (सीएलआर) फ़ंक्शन के सीएसएस में फिल्टर विशेषता का उपयोग करके संदर्भित किया जा सकता है। स्पष्ट संदर्भ के बिना प्रदर्शित नहीं होने वाले तत्वों को आमतौर पर एसवीजी में <defs> तत्वों के अंदर टेम्पलेट के रूप में परिभाषित किया जाता है। लेकिन एसवीजी <फ़िल्टर> को डीफ़्स तत्व में लपेटने की आवश्यकता नहीं है। आप फ़िल्टर को किसी डिफ़ेंस तत्व में लपेटते हैं या नहीं, यह वैसे भी प्रदर्शित नहीं होगा।

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

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

 <svg width="600" height="450" viewBox="0 0 600 450"> <filter id="myFilter"> <!-- filter effects go in here --> </filter> <image xlink:href="..." width="100%" height="100%" x="0" y="0" filter="url(#myFilter)"></image> </svg>

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

फिल्टर आदिम

इस प्रकार, एसवीजी में, प्रत्येक <फिल्टर> तत्व में बाल तत्वों के रूप में फिल्टर प्राइमेटिव्स का एक सेट होता है। प्रत्येक फ़िल्टर आदिम एक या कई इनपुट पर एक प्राथमिक ग्राफिक ऑपरेशन करता है, एक ग्राफिक परिणाम बनाता है।

फ़िल्टर प्रिमिटिव्स को उनके द्वारा किए जाने वाले ग्राफ़िक ऑपरेशन के बाद आसानी से नाम दिया गया है। उदाहरण के लिए, एक आदिम जो गाऊसी ब्लर प्रभाव को एक ग्राफिक स्रोत पर लागू करता है, उसे feGaussianBlur कहा जाता है। सभी प्राइमेटिक्स में एक ही उपसर्ग होता है: " फ़िल्टर प्रभाव " के लिए छोटा। फिर से, एसवीजी में नाम समझने के लिए सुविधाजनक हैं कि यह तत्व क्या है या यह क्या करता है।

निम्न कोड स्निपेट दिखाता है कि यदि आप छवि पर 5px गाऊसी कलंक लगाते हैं तो एक साधारण फ़िल्टर कैसा दिखेगा:

 <svg width="600" height="450" viewBox="0 0 600 450"> <filter id="myFilter"> <feGaussianBlur stDeviation="5"></feGaussianBlur> </filter> <image xlink:href="..." width="100%" height="100%" x="0" y="0" filter="url(#myFilter)"></image> </svg>

वर्तमान में, SVG फ़िल्टर विनिर्देश 17 फ़िल्टर प्राइमिटिव को परिभाषित करता है जो बेहद शक्तिशाली ग्राफिक प्रभाव बनाने में सक्षम हैं, जिसमें शोर और बनावट पीढ़ी, प्रकाश प्रभाव, रंग हेरफेर (चैनल से चैनल), और बहुत कुछ तक सीमित नहीं है।

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

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

फ़िल्टर आदिम अन्य डेटा प्रकारों को इनपुट के रूप में उपयोग कर सकता है, जिनमें से सबसे महत्वपूर्ण हैं:

सोर्सग्राफिक : वह तत्व जिससे पूरा फिल्टर लगाया जाता है; उदाहरण के लिए, एक छवि या पाठ का एक टुकड़ा।
SourceAlpha : यह SourceGraphic की तरह ही है, सिवाय इसके कि इस ग्राफिक में तत्व का केवल अल्फा चैनल है। उदाहरण के लिए, जेपीईजी छवि के लिए, यह एक काले रंग की आयत है जो छवि का आकार है।

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

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

 <svg width="600" height="400" viewBox="0 0 850 650"> <filter id="filter"> <feOffset in="SourceAlpha" dx="20" dy="20"></feOffset> <!-- since the previous filter did not have a result defined and this following one does not have the input set, the result of the above primitive is automatically used as input to the following filter --> <feGaussianBlur stdDeviation="10" result="DROP"></feGaussianBlur> <!-- setting/defining the result names in all caps is a good way to make them more distinguishable and the overall code more readable --> <feFlood flood-color="#000" result="COLOR"></feFlood> <!-- This primitive is using the outputs of the previous two primitives as input, and outputting a new effect --> <feComposite in="DROP" in2="COLOR" operator="in" result="SHADOW1"></feComposite> <feComponentTransfer in="SHADOW1" result="SHADOW"> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> <!-- You can use ANY two results as inputs to any primitive, regardless of their order in the DOM.--> <feMerge> <feMergeNode in="SHADOW"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#filter)"></image> </svg>

अब, आखिरी अवधारणा जिसे मैं अपने पहले फ़िल्टर उदाहरण पर जाने से पहले संक्षेप में बताना चाहता हूं वह है फ़िल्टर क्षेत्र की अवधारणा।

निस्पंदन क्षेत्र

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

एसवीजी तत्वों में "क्षेत्र" होते हैं जिनकी सीमाएं तत्व को सीमा देने वाले आयत के किनारों द्वारा परिभाषित की जाती हैं। एक बाउंडिंग बॉक्स (जिसे "बीबॉक्स" के रूप में भी संक्षिप्त किया गया है) एक तत्व के आसपास का सबसे छोटा संलग्नक है। उदाहरण के लिए, निम्नलिखित आकृति में, पाठ के एक टुकड़े के लिए, इस तरह के आयत को गुलाबी रंग में हाइलाइट किया गया है।

Ris_3। पाठ के एक टुकड़े के चारों ओर सबसे छोटा घेरा।

कृपया ध्यान दें कि इस आयत में कुछ और ऊर्ध्वाधर स्थान हो सकते हैं, क्योंकि सीमा की आयत की ऊंचाई की गणना करते समय पाठ की रेखा की ऊंचाई को ध्यान में रखा जाता है।

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

उदाहरण के लिए, यदि आप हमारे पाठ के टुकड़े पर एक धब्बा प्रभाव लागू करते हैं, तो आप देख सकते हैं कि पाठ को बाध्य करने वाले आयत के बाएं और दाएं किनारों के साथ काट दिया गया है:

Ris_4। पाठ पर लागू धब्बा प्रभाव पाठ को बाध्य करने वाले आयत के दाएं और बाएं दोनों तरफ काट दिया जाता है।

तो हम इसे कैसे रोकें? इसका उत्तर है: फ़िल्टर क्षेत्र का विस्तार करके। हम उस सीमा का विस्तार कर सकते हैं जिसमें फ़िल्टर <x> तत्व की x , y , चौड़ाई और ऊंचाई विशेषताओं को बदलकर लागू किया जाता है।

विनिर्देश के अनुसार,

अक्सर फ़िल्टर क्षेत्र में फ़ील्ड प्रदान करना आवश्यक होता है, क्योंकि फ़िल्टर प्रभाव किसी दिए गए ऑब्जेक्ट के लिए बाउंडिंग बॉक्स के बाहर कुछ बिट्स को प्रभावित कर सकता है। ऐसा करने के लिए, आप एक्स और वाई संपत्तियों के प्रतिशत में नकारात्मक मान दे सकते हैं, और चौड़ाई और ऊंचाई के गुणों को 100% से अधिक मान सकते हैं।

डिफ़ॉल्ट रूप से, फ़िल्टर में ऐसे क्षेत्र होते हैं जो चारों दिशाओं में बाउंडिंग बॉक्स की चौड़ाई और ऊंचाई का 10% बढ़ाते हैं। दूसरे शब्दों में, x , y , चौड़ाई और ऊंचाई विशेषताओं के लिए डिफ़ॉल्ट मान हैं:

 <filter x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox"> <!-- filter operations here --> </filter>

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

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

ऑब्जेक्टबाउंडिंगबॉक्स । यह डिफ़ॉल्ट मान है। जब FilterUnits को ऑब्जेक्टबाउंडबॉक्स में सेट किया जाता है , तो x , y , चौड़ाई और ऊंचाई विशेषता मान तत्व के बाउंडिंग बॉक्स के आकार के प्रतिशत या अंश होते हैं। इसका मतलब यह भी है कि यदि आप चाहें तो प्रतिशत के बजाय भिन्नात्मक मूल्यों का उपयोग कर सकते हैं।
userSpaceOnUse अगर filterUnits userSpaceOnUse पर सेट है, तो x, y, चौड़ाई और ऊंचाई विशेषताओं के निर्देशांक उपयोगकर्ता द्वारा उपयोग किए जाने वाले वर्तमान समन्वय प्रणाली के सापेक्ष हैं। दूसरे शब्दों में, यह एसवीजी में प्रयुक्त वर्तमान समन्वय प्रणाली के सापेक्ष है, जो माप की इकाइयों के रूप में पिक्सेल का उपयोग करता है और, एक नियम के रूप में, स्वयं एसवीजी के आकार के सापेक्ष, यह मानते हुए कि व्यूबॉक्स मूल्य मूल समन्वय प्रणाली के मूल्यों के अनुरूप है।

एसवीजी में समन्वय प्रणालियों के बारे में आपको जो कुछ भी जानने की जरूरत है वह इस लेख में पाया जा सकता है, जिसे मैंने कई साल पहले लिखा था।

 <!-- Using objectBoundingBox units --> <filter id="filter" x="5%" y="5%" width="100%" height="100%"> <!-- Using userSpaceOnUse units --> <filter id="filter" filterUnits="userSpaceOnUse" x="5px" y="5px" width="500px" height="350px">

त्वरित टिप: feFlood के साथ वर्तमान फ़िल्टर क्षेत्र की कल्पना करना

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

इसलिए, यदि हम मानते हैं कि हमारे पास एक पाठ का टुकड़ा है, जिस फ़िल्टर क्षेत्र को हम देखना चाहते हैं, तो कोड कुछ इस तरह दिखाई दे सकता है:

 <svg width="600px" height="400px" viewBox="0 0 600 400"> <filter id="flooder" x="0" y="0" width="100%" height="100%"> <feFlood flood-color="#EB0066" flood-opacity=".9"></feFlood> </filter> <text dx="100" dy="200" font-size="150" font-weight="bold" filter="url(#flooder)">Effect!</text> </svg>

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

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

रंग के साथ फ़िल्टर टेक्स्ट क्षेत्र को भरने से पहले और बाद में
Ris_5। रंग के साथ फ़िल्टर के पाठ क्षेत्र को भरने से पहले और बाद में।

इसे बदलने के लिए, हमें नीचे रंग की परत को स्थानांतरित करने और शीर्ष पर मूल पाठ परत दिखाने की आवश्यकता है।

यदि आपके पास कई संदर्भ परतें हैं जिन्हें एसवीजी फ़िल्टर में एक-दूसरे के ऊपर प्रदर्शित किया जाना चाहिए, तो आप <feMerge> फ़िल्टर संवेदनशील का उपयोग कर सकते हैं। जैसा कि नाम से ही स्पष्ट है, feMerge आदिम का उपयोग तत्वों या प्रभावों की परतों को एक साथ मिलाने के लिए किया जाता है।

आदिम में विशेषता नहीं है। <FeMerge> के अंदर परतों को मर्ज करने के लिए, दो या अधिक <feMergeNode> का उपयोग किया जाता है , जिनमें से प्रत्येक की अपनी विशेषता है , जो उस परत का प्रतिनिधित्व करता है जिसे हम जोड़ना चाहते हैं।

परत का बिछाने (या "नोड") स्रोत के आदेश पर निर्भर करता है <feMergeNode> - पहला <feMergeNode> "पीछे" या "नीचे" दूसरा प्रदर्शित होता है। अंतिम <feMergeNode> सबसे ऊपरी परत का प्रतिनिधित्व करता है। और इसी तरह।

इसलिए, पाठ के साथ हमारे उदाहरण में, रंग भराव एक परत है, और पाठ स्रोत (ग्राफिक्स स्रोत) एक अलग परत है, और हम पाठ को रंग भरने के शीर्ष पर रखना चाहते हैं। हमारा कोड इस तरह दिखेगा:

 <svg width="600px" height="400px" viewBox="0 0 600 400"> <filter id="flooder"> <feFlood flood-color="#EB0066" flood-opacity=".9" result="FLOOD"></feFlood> <feMerge> <feMergeNode in="FLOOD" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <text dx="100" dy="200" font-size="150" font-weight="bold" filter="url(#flooder)">Effect!</text> </svg>

ध्यान दें कि मैंने परिणाम विशेषता में feFlood का नाम कैसे दिया, ताकि मैं इनपुट के रूप में <feMergeNode> परत में इस नाम का उपयोग कर सकूं । चूंकि हम धारा के रंग के शीर्ष पर स्रोत पाठ को प्रदर्शित करना चाहते हैं, इसलिए हम इस पाठ को SourceGraphic का उपयोग करके संदर्भित करते हैं । निम्नलिखित डेमो परिणाम दिखाता है:

एक छवि के लिए एक छाया लागू करें

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

तो छाया कैसे निर्मित होती है?

एक छाया आमतौर पर एक तत्व के पीछे या उसके नीचे एक हल्के भूरे रंग की परत होती है जिसमें तत्व के समान आकार (या आकार) होता है। दूसरे शब्दों में, आप इस तत्व की एक धुंधली ग्रे कॉपी पर विचार कर सकते हैं।

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

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

इस SourceAlpha लेयर में गॉसियन ब्लर लगाने के लिए feGaussianBlur आदिम का इस्तेमाल किया जाएगा। आवश्यक धब्बा की मात्रा stdDeviation विशेषता (मानक विचलन के लिए कम) में सेट की गई है। यदि आप stdDeviation विशेषता का एक मान सेट करते हैं, तो इस मान का उपयोग इनपुट डेटा के एकसमान धुंधलापन को लागू करने के लिए किया जाएगा। आप दो संख्यात्मक मान भी निर्दिष्ट कर सकते हैं, फिर पहले का उपयोग क्षैतिज दिशा में तत्व को धुंधला करने के लिए किया जाएगा, और दूसरा ऊर्ध्वाधर धुंधला के लिए। छाया के लिए, हमें एक समान धब्बा लागू करने की आवश्यकता है, इसलिए हमारा कोड इसके साथ शुरू होगा:

 <svg width="600" height="400" viewBox="0 0 850 650"> <filter id="drop-shadow"> <-- Grab a blakc copy of the source image and blur it by 10 --> <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="DROP"></feGaussianBlur> </filter> <image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#drop-shadow)"></image> </svg>

उपरोक्त कोड स्निपेट निम्नलिखित प्रभाव की ओर जाता है, जहां वर्तमान में केवल छवि का धुंधला अल्फा चैनल प्रदर्शित होता है:

ब्लर (छाया) के साथ ब्लैक कॉपी इमेज बनाई गई
Ris_6। कलंक (छाया) के साथ छवि की काली प्रतिलिपि बनाई गई।

फिर हम छाया का रंग बदलना चाहते हैं और इसे ग्रे बनाते हैं । हम फ़िल्टर क्षेत्र में रंग भरने को लागू करके ऐसा करेंगे, और फिर हमारे द्वारा बनाई गई छाया परत के साथ इस रंग भराव की परत को मिलाएं।

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

FeComposite आदिम में एक ऑपरेटर विशेषता है, जिसका उपयोग यह इंगित करने के लिए किया जाता है कि हम किस यौगिक ऑपरेशन का उपयोग करना चाहते हैं।

कम्पोजिट ऑपरेटर का उपयोग करते हुए , रंग भराव परत "क्लिप्ड" होगी, और केवल वह रंग क्षेत्र जो हमारी छाया परत से मेल खाता है, प्रदर्शित किया जाएगा। दोनों परतों को मिलाया जाएगा जहां वे अंतर करते हैं, अर्थात्। ग्रे रंग का उपयोग हमारी काली छाया को रंग देने के लिए किया जाएगा।

feComposite , in in2 . — , — . , operator , :

 <svg width="600" height="400" viewBox="0 0 850 650"> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="DROP"></feGaussianBlur> <feFlood flood-color="#bbb" result="COLOR"></feFlood> <feComposite in="COLOR" in2="DROP" operator="in" result="SHADOW"></feComposite> </filter> <image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#drop-shadow)"></image> </svg>

, feGaussianBlur feFlood . :

_7. .

, , / . . , , , .

SVG feOffset . in result : dx dy , , X Y .

, , feMerge , , — mergeNode , mergeNode , SourceGraphic . :

 <svg width="600" height="400" viewBox="0 0 850 650"> <filter id="drop-shadow"> <!-- Get the source alpha and blur it; we'll name the result "DROP" --> <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="DROP"></feGaussianBlur> <!-- flood the region with a ligh grey color; we'll name this layer "COLOR" --> <feFlood flood-color="#bbb" result="COLOR"></feFlood> <!-- Composite the DROP and COLOR layers together to colorize the shadow. The result is named "SHADOW" --> <feComposite in="COLOR" in2="DROP" operator="in" result="SHADOW"></feComposite> <!-- Move the SHADOW layer 20 pixels down and to the right. The new layer is now called "DROPSHADOW" --> <feOffset in="SHADOW" dx="20" dy="20" result="DROPSHADOW"></feOffset> <!-- Layer the DROPSHADOW and the Source Image, ensuring the image is positioned on top (remember: MergeNode order matters) --> <feMerge> <feMergeNode in="DROPSHADOW"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <!-- Apply the filter to the source image in the `filter` attribute --> <image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#drop-shadow)"></image> </svg>

SVG, SVG. , .

…

, . , , , , , , .

, , feFlood , , , , . , . , , , , - , , , .

feColorMatrix , feComponentTransfer . feComponentTransfer , feColorMatrix , .

feColorMatrix . Una Kravet , .

, R(), G(), B() A() -. , . :

 <filter id="myFilter"> <feColorMatrix type="matrix" values="R 0 0 0 0 0 G 0 0 0 0 0 B 0 0 0 0 0 A 0 "/> </feColorMatrix> </filter>

, .

, , RGB, - :

 <filter id="filter"> <!-- Get the source alpha and blur it, --> <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="DROP"></feGaussianBlur> <!-- offset the drop shadow --> <feOffset in="SHADOW" dx="20" dy="20" result="DROPSHADOW"></feOffset> <!-- make the shadow translucent by reducing the alpha channel value to 0.3 --> <feColorMatrix type="matrix" in="DROPSHADOW" result="FINALSHADOW" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0"> </feColorMatrix> <!-- Merge the shadow and the source image --> <feMerge> <feMergeNode in="FINALHADOW"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter>

निष्कर्ष

. , . , . , , , , , . , . , , , . .

, SVG- , . हमारे साथ रहो।

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