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

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

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

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

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

संक्षिप्त अवलोकन

थोड़ा दोहराएं।

FeComponentTransfer आदिम पिक्सेल में मौजूद प्रत्येक घटक R, G, B और A को बदलने की अनुमति देता है। दूसरे शब्दों में, feComponentTransfer इनपुट तत्व में प्रत्येक रंग चैनल, साथ ही अल्फा चैनल का स्वतंत्र हेरफेर प्रदान करता है।

RGBA घटकों को इन घटकों पर विभिन्न प्रकार के कार्य करके संशोधित किया जाता है। इसके लिए, प्रत्येक घटक का अपना तत्व है। ये घटक तत्व feComponentTransfer में नेस्टेड हैं। RGBA के लिए, ये घटक तत्व feFuncR , feFuncG , feFuncB और feFuncA हैं ।

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

<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>">

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

फ़ोटोशॉप में दो-रंग का प्रभाव बनाएं

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

निम्न वीडियो इस ट्यूटोरियल का एक त्वरित संस्करण है जो मुझे YouTube पर मिला।

इस वीडियो में, डिजाइनर इन चरणों का पालन करके दो-रंग का प्रभाव बनाता है:

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

आइए देखें कि इन चरणों को एसवीजी में कैसे पुन: पेश किया जा सकता है।

एसवीजी में दो-रंग प्रभाव बनाएं

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

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

FeColorMatrix के साथ स्केल चित्र बदलें

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

 <svg viewBox="0 0 266 400"> <filter id="duotone"> <feColorMatrix type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"> </feColorMatrix> <!-- ... --> </filter> <image xlink:href="..." width="100%" x="0" y="0" height="100%" filter="url(#duotone)"></image> </svg>

निम्नलिखित आकृति में, दाईं ओर की छवि बाईं ओर की छवि के लिए उपरोक्त फ़िल्टर लागू करने का परिणाम है:

Ris_1। परिणाम (दाएं) feColorMatrix फ़िल्टर ऑपरेशन का उपयोग करके बाईं ओर की छवि को ग्रेस्केल में परिवर्तित करने के लिए।

आप सबकुछ सीख सकते हैं feColorMatrix और इस लेख में ऊना क्रावट्स द्वारा इसका उपयोग कैसे करें।

अब चूंकि हमारी छवि अनिवार्य रूप से एक ग्रे ग्रेडिएंट की है, हमें ग्रे ग्रेडिएंट प्रदर्शित करने के लिए दो-रंग ग्रेडिएंट मैप बनाने की आवश्यकता है।

तालिका घटक स्थानांतरण फ़ंक्शन का उपयोग करके एक ढाल मानचित्र बनाना

एसवीजी में, आप ग्रेडिएंट मैप बनाने के लिए एक प्रकार की तालिका के साथ feComponentTransfer आदिम का उपयोग कर सकते हैं।

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

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

मान लीजिए कि हम अपने दो-टोन प्रभाव के लिए दो रंगों का उपयोग करना चाहते हैं:

Ris_2। मूल दो रंग।

इन दो रंगों का उपयोग ढाल प्रदर्शन बनाने के लिए किया जाएगा:

दो रंग मूल्यों द्वारा निर्मित ढाल
Ris_3। दो रंग मूल्यों द्वारा बनाई गई एक ढाल।

... जिसके लिए हम अपने ग्रेस्केल मैप से मिलान करने जा रहे हैं।

Ris_4। दो-रंग वाले नक्शे को दो-रंग के ढाल के साथ प्रदर्शित करें।

FeComponentTransfer में इन रंगों का उपयोग करने के लिए, हमें प्रत्येक रंग के चैनल R, G और B के मान प्राप्त करने की आवश्यकता है। चूंकि टेबलवैल्यूज़ में आंशिक मूल्य होते हैं, इसलिए हमें RGB मानों को भिन्न करने की आवश्यकता है। रंग मान आमतौर पर [0.255] सीमा में होते हैं। उन्हें अंशों में बदलने के लिए, उन्हें 255 से विभाजित करें।

उदाहरण के लिए, गुलाबी में निम्नलिखित RGB मान हैं:

 R: 254 G: 32 B: 141

उन्हें एक अंश में परिवर्तित करना, हमें प्राप्त होता है:

 R: 254/255 = .996078431 G: 32/255 = .125490196 B: 141/255 = .552941176

इसी तरह पीले मूल्यों के लिए हमें मिलता है:

 R: .984313725 G: .941176471 B: .478431373

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

 <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="table" tableValues=".996078431 .984313725"></feFuncR> <feFuncG type="table" tableValues=".125490196 .941176471"></feFuncG> <feFuncB type="table" tableValues=".552941176 .478431373"></feFuncB> </feComponentTransfer>

पिछले लेख में, हमने देखा कि असतत फ़ंक्शन का उपयोग करते समय, ब्राउज़र तालिका मान में n मान के लिए n पर्वतमाला बनाता है। जब हम टेबल फ़ंक्शन का उपयोग करते हैं, तो ब्राउज़र एन मानों के लिए एक एन -1 रेंज बनाता है। क्योंकि हमने प्रत्येक घटक के लिए दो तालिकाएँ प्रदान कीं , जिसका अर्थ है कि हम प्रत्येक के लिए एक सीमा ([गुलाबी, पीला]) प्राप्त करेंगे।

अब feComponentTransfer अपना काम करेगा: ब्राउज़र छवि स्रोत के प्रत्येक पिक्सेल को अनुक्रम में स्कैन करेगा। प्रत्येक पिक्सेल के लिए, यह लाल, हरे और नीले घटकों का मूल्य प्राप्त करेगा। चूंकि हमारी छवि में भूरे रंग के शेड हैं, इसलिए आर / जी / बी का मान सीमा [0, 1] = [काला, सफेद] (0 - पूरी तरह से काला, 1 - पूरी तरह से सफेद और उनके बीच ग्रे के रंगों) में होगा। तब प्रत्येक घटक के मूल्य को टेबलवैल्यूज़ में निर्दिष्ट नई सीमा तक मैप किया जाएगा।

तो:

लाल घटक के मूल्य को [[.996078431, .984313725] श्रेणी में मैप किया जाएगा;
घटक के नीले मूल्य को श्रेणी [.125490196, .941176471] में मैप किया जाएगा;
घटक के हरे मूल्य को श्रेणी [.552941176, .478431373] पर मैप किया जाएगा।

इस प्रकार, जब तक ब्राउज़र छवि के सभी पिक्सेल से गुजरता है, तब तक आपने ग्रेस्केल ग्रेडिएंट में सभी RGB मानों को दो-रंग के ग्रेडिएंट डिस्प्ले के RGB मानों से बदल दिया है। नतीजतन, छवि दो-रंग हो जाएगी।

Ris_6। हमारे ढाल मानचित्र में एक ग्रेस्केल छवि (बाएं) प्रदर्शित करने का परिणाम (दाएं)।

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

 <svg viewBox="0 0 266 400"> <filter id="duotone"> <!-- Grab the SourceGraphic (implicit) and convert it to grayscale --> <feColorMatrix type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"> </feColorMatrix> <!-- Map the grayscale result to the gradient map provided in tableValues --> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="table" tableValues=".996078431 .984313725"></feFuncR> <feFuncG type="table" tableValues=".125490196 .941176471"></feFuncG> <feFuncB type="table" tableValues=".552941176 .478431373"></feFuncB> </feComponentTransfer> </filter> <image xlink:href=".." width="100%" x="0" y="0" height="100%" filter="url(#duotone)"></image> </svg>

आप यहां डेमो के साथ खेल सकते हैं:

आप आगे जा सकते हैं और ग्रेडिएंट मैप के लिए केवल दो रंग मान प्रदान करने के बजाय, टेबलवैल्यू में तीन रंग मान प्रदान करते हैं, एक ढाल मानचित्र बनाते हैं जिसमें दो के बजाय तीन रंग होते हैं।

गामा ट्रांसफर फ़ंक्शन के साथ कंट्रास्ट और रंग की तीव्रता नियंत्रण

गामा घटक स्थानांतरण फ़ंक्शन का उपयोग करके, हम अपने ग्राफिक्स स्रोत के गामा सुधार कर सकते हैं। गामा सुधार एक छवि के प्रकाश स्तर को नियंत्रित करने का एक कार्य है।

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

 C' = amplitude * pow(C, exponent) + offset

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

छवि के अंधेरे और हल्के दोनों क्षेत्रों के विपरीत समायोजन करना कभी-कभी उपयोगी हो सकता है यदि आपको "चमक" की मात्रा नहीं मिलती है जिसे आप छवि में देखना चाहते हैं।

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

Duotone फ़िल्टर परिणाम
Ris_7। डुओटोन फ़िल्टर का परिणाम है।

दाईं ओर की दो-रंग की छवि थोड़ी पीला दिखती है, और रंग थोड़े धुंधले हैं। मैं इसके विपरीत जोड़ना चाहता हूं ताकि यह अधिक जीवंत दिखे। चलो थोड़ा आयाम और प्रतिपादक बढ़ाएँ:

 <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncR> <feFuncG type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncG> <feFuncB type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncB> </feComponentTransfer>

मैं प्रकाश क्षेत्रों को अधिक चमकदार बनाने में सक्षम था, और अंधेरे अधिक गहन थे:

पिछले कोड का परिणाम
Ris_8। गामा सुधार का परिणाम।

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

स्केल छवि के लिए गामा सुधार परिणाम
Ris_9। एक ग्रेस्केल छवि के लिए गामा सुधार का परिणाम।

बेशक, आप विपरीत कर सकते हैं और इसके विपरीत को बढ़ाने के बजाय, आप अंधेरे क्षेत्रों को थोड़ा हल्का कर सकते हैं। इस मामले में, आपको आयाम और / या घातांक विशेषताओं के मूल्यों को कम करना चाहिए, और उन्हें नहीं बढ़ाना चाहिए। दोनों के लिए डिफ़ॉल्ट मान 1. ऑफसेट विशेषता का डिफ़ॉल्ट मान 0 है।

निम्नलिखित डेमो में गामा मूल्यों के साथ खेलें, यह समझने के लिए कि वे छवि की चमक और विपरीत को कैसे प्रभावित करते हैं:

स्नातक मानचित्र SVG टूल

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

योकसेल एसवीजी फ़िल्टर ** ग्रेडिएंट मैप ** टूल
Ris_10। Yoksel स्नातक मानचित्र SVG फ़िल्टर उपकरण।

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

अन्य तरीकों से ग्रेस्केल छवि बनाने का परिणाम
Ris_11। अन्य तरीकों से एक ग्रेस्केल छवि बनाने का परिणाम है।

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

निष्कर्ष

आदिम feComponentTransfer हमें छवियों के रंग और अल्फा घटकों पर बहुत नियंत्रण देता है और हमें हमारे कोड संपादकों के आराम में फ़ोटोशॉप-क्लास प्रभाव बनाने की अनुमति देता है।

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

एसवीजी फ़िल्टरिंग प्रभाव। भाग 4. feComponentTransfer के साथ दो-रंग की छवियां