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

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

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

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

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

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

आगे बढ़ना: शिक्षण संसाधन और एसवीजी फ़िल्टरिंग प्रयोग

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

   
   
   
   

2. जब मैंने पहली बार SVG फ़िल्टर की दुनिया में कदम रखा, तो माइकल मुल्नी मेरी पढ़ाई के लिए मेरा संक्रमणकालीन संसाधन था। मैंने उनके लेख से बहुत कुछ सीखा, वेब प्लेटफ़ॉर्म प्रलेखन में एसवीजी फ़िल्टर के प्रवेश के लिए उनका योगदान , और उनके कोडपेन प्रयोग , जो शाब्दिक रूप से एसवीजी फ़िल्टर की सोने की खान हैं! इस अजीब लोगो को पूरी तरह से SVG फिल्टर्स के साथ फिर से देखें:

   
   
   

3. डेविड डेली का एसवीजी फिल्टर के लिए एक शानदार परिचय है , जिसमें वह संभावित प्रभावों की एक विस्तृत श्रृंखला को दर्शाता है , जिसे उसने सामंतवाद के साथ बनाया था , जिसमें भारी बादलों और बोके जैसे प्रभावों तक सीमित नहीं है।

   
   

   नीचे अन्य फिल्टर आदिम के साथ feTurbulence के परिणामों को समायोजित करने के परिणाम हैं। रंग समायोजन और संतृप्ति feColorMatrix का उपयोग करके किया गया था, और प्रवर्धन feColvMverix का उपयोग करके किया गया था।

   
   

   
   Ris_1। उत्पन्न शोर के साथ क्या किया जा सकता है, इसके उदाहरण।

   
   

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

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

   
   Ris_2। डर्क वेबर अपने स्मैशिंग मैगज़ीन के लेख में कुछ पाठ प्रभाव पर चर्चा करते हैं।

   
   

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

   
   

   
   Ris_3। Yoksel दृश्य SVG फ़िल्टर संपादक।

   
   

6. अंतिम लेकिन कम से कम, आप एसवीजी फिल्टर तत्वों, गुणों और एसवीजी फिल्टर विनिर्देश में विशेषताओं के बारे में जानने के लिए आवश्यक सब कुछ पा सकते हैं।

   
   

एसवीजी फिल्टर क्यों?

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

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

निष्कर्ष

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

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

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