SVG दानेदार बनावट: नॉइज़ को कलाकृति के भीतर रखें

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

केवल नॉइज़ प्रिमिटिव अलग परिणाम देता है: वह आकृति की बाहरी रेखा पर चलने के बजाय अपने फ़िल्टर प्रिमिटिव उपक्षेत्र को भरता है। इसलिए पत्ती आयताकार नॉइज़ पैच बन सकती है। MDN का feTurbulence संदर्भ यह व्यवहार बताता है।

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

आकृति को सतह के प्रभाव से अलग रखें

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

नीचे की तीन अवस्थाएँ सीमा की समस्या समझाती हैं:

सीमा महत्वपूर्ण है

SourceGraphic फ़िल्टर किया जाने वाला एलिमेंट देता है। SourceAlpha उसका अल्फ़ा चैनल देता है। फ़िल्टर कलाकृति के चित्र पर काम करता है; पाथ कमांड दोबारा नहीं लिखता। ये इनपुट और फ़िल्टर ग्राफ़ W3C Filter Effects विनिर्देश में परिभाषित हैं।

शुरुआती कलाकृति में पारदर्शी क्षेत्र पहले से हों तो वे भी सीमित करने को प्रभावित करते हैं। SourceAlpha वास्तविक रेंडर की गई अपारदर्शिता का पालन करता है, अनुमानित बाहरी बाउंडिंग बॉक्स का नहीं।

पूरा SVG दानेदार बनावट उदाहरण कॉपी करें

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

फ़िल्टर चार काम करता है:

1. feTurbulence नॉइज़ बनाता है और उसका नाम noise रखता है।
2. मैट्रिक्स लाल, हरा और नीला शून्य करता है। उसकी आख़िरी पंक्ति नॉइज़ के अल्फ़ा को 0.28 से गुणा करके ink नाम का हल्का काला ओवरले बनाती है।
3. operator="in" वाला feComposite उस ओवरले को वहाँ रखता है जहाँ SourceAlpha मौजूद है।
4. feMerge पहले मूल कलाकृति और उसके ऊपर सीमित ओवरले बनाता है।

MDN का feColorMatrix संदर्भ समझाता है कि पाँच-कॉलम वाला मैट्रिक्स रंग और अल्फ़ा कैसे बदलता है। यहाँ वह नॉइज़ चित्र बदलता है, पत्ती का भरण नहीं। MDN का feComposite संदर्भ दूसरे इनपुट तक ओवरले सीमित करने वाले in ऑपरेशन को समझाता है।

0.28 इस मूँगा रंग की पत्ती का शुरुआती मान है, सार्वभौमिक दानेदार सेटिंग नहीं। बनावट कलाकृति फीकी करे तो इसे घटाएँ; इच्छित प्रदर्शन आकार पर गायब हो तो बढ़ाएँ। काले ओवरले वाली बनावट भरण गहरा करती है। वह काले रूपांकन पर दिखाई देने वाले हल्के दाने नहीं बनाएगी।

मौजूदा कलाकृति का रंग बदलने वाले रंग और अल्फ़ा ऑपरेशन के लिए अलग feColorMatrix गाइड देखें। मौजूदा पारदर्शी किनारा कठोर करने के लिए SVG अल्फ़ा थ्रेशोल्ड देखें। इनमें से कोई भी यहाँ का उत्पन्न नॉइज़ स्रोत नहीं देता।

परिणाम उस आकार पर जाँचें जिसमें लोग देखेंगे

हमने इस मूल पाथ के तीन संस्करण बनाए: बिना फ़िल्टर, केवल नॉइज़ प्रिमिटिव वाला फ़िल्टर और ऊपर का पूरा सीमित-बनावट ग्राफ़। Chrome में 120 × 120 और 360 × 360 CSS पिक्सेल पर रेंडर किए संस्करण जाँचे, सभी में वही 0 0 200 200 viewBox था।

ब्राउज़र DOM में हर नमूने में एक पाथ था। छहों d गुण समान थे। यह उदाहरण की सीमा तय करता है: रेंडर सतह बदली और दानों के पाथ नहीं जुड़े। यह बनाया गया ब्राउज़र परीक्षण है, PerfectVector या किसी मूल वेक्टर एडिटर का आउटपुट नहीं।

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

एक बार में एक नियंत्रण से बनावट समायोजित करें

छोटे वेब कार्ड चित्रण के लिए उदाहरण के मानों से शुरू करें। फिर एक पैरामीटर बदलें, उन्हीं दो आकारों की तुलना करें और पसंद आए संस्करण की प्रति रखें।

baseFrequency दोनों अक्षों के लिए एक मान या क्षैतिज व लंबवत फ़्रीक्वेंसी के लिए दो मान स्वीकारता है। MDN का baseFrequency संदर्भ यह अंतर बताता है। इस पत्ती के लिए एक मान से शुरू करें; असमान मान दिशात्मक बनावट का जानबूझकर लिया चुनाव हैं।

numOctaves नॉइज़ ऑक्टेव की संख्या नियंत्रित करता है, जैसा MDN का numOctaves संदर्भ बताता है। अतिरिक्त ऑक्टेव अतिरिक्त वेक्टर पाथ नहीं हैं। उन्हें तभी लें जब ज़रूरी आकार पर दिखाई देने वाली सतह बेहतर हो।

उदाहरण स्पष्ट रूप से color-interpolation-filters="sRGB" सेट करता है। विकल्पों की तुलना में इसे वैसा ही रखें ताकि रंग प्रसंस्करण का बदलाव दानेदार बनावट की तुलना में भ्रम न पैदा करे।

आयत, गायब भरण या गंदा किनारा ठीक करें

बनावट आयताकार पैच बनाती है। फ़िल्टर का अंतिम आउटपुट जाँचें। वह feTurbulence पर समाप्त हो तो नॉइज़ चित्र लौटा रहा है। मैट्रिक्स, SourceAlpha कंपोज़िट और मर्ज वापस रखें। फ़िल्टर का आयत बढ़ाने से असंयमित नॉइज़ को केवल अधिक जगह मिलेगी।

पत्ती का रंग गायब होता है। जाँचें कि पहला मर्ज नोड SourceGraphic लेता है। केवल अंतिम inside परिणाम में गहरा ओवरले है, मूल मूँगा रंग भरण नहीं। हर नामित result और in संदर्भ की वर्तनी व बड़े-छोटे अक्षर भी जाँचें।

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

आउटपुट का हिस्सा कटता है। फ़िल्टर पर x, y, width और height जाँचें। ये उपलब्ध फ़िल्टर क्षेत्र तय करते हैं, जैसा MDN का filter संदर्भ बताता है। उदाहरण थोड़ा अतिरिक्त स्थान देता है। बड़ा क्षेत्र गायब सीमांकन चरण नहीं सुधार सकता और अलग कंटेनर से लगने वाली क्लिपिंग भी ठीक नहीं करता।

छोटी कलाकृति धुँधली-गंदी दिखती है। पहले ओवरले अल्फ़ा घटाएँ, फिर फ़्रीक्वेंसी और ऑक्टेव संख्या तुलना करें। बनावट तब भी बाहरी आकृति बिगाड़े तो उस आकार पर साफ़ संस्करण दें।

डिलीवरी के लिए साफ़ मास्टर रखें

बिना फ़िल्टर के मास्टर के लिए पाथ से filter="url(#grain)" हटाएँ और अब अनुपयोगी फ़िल्टर परिभाषा निकालें। पाथ का d, उसका भरण और viewBox सुरक्षित रखें। फ़ाइल अलग खोलकर पुष्टि करें कि पत्ती और खुला भाग मूल साफ़ संस्करण जैसे हैं।

वेब ऐप के लिए बनावट वाला संस्करण उन्हीं ब्राउज़र और ठीक उसी एम्बेडिंग तरीके में जाँचें जो जारी करेंगे। यह inline SVG एक पेज में दोहराएँ तो हर फ़िल्टर को अलग ID दें और उसका url(#...) संदर्भ बदलें। स्वतंत्र उदाहरण एक ID लेता है क्योंकि उसमें एक ही इंस्टेंस है।

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

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

वेक्टराइज़ेशन कब मदद करता है

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

पाथ-आधारित मास्टर पहले से है? सीधे वही लें। फ़िल्टर के काम के लिए दूसरा रूपांतरण ज़रूरी नहीं। ज़रूरत हो तो इमेज वेक्टराइज़ेशन गाइड स्रोत पुनर्प्राप्ति का वह चरण समझाती है।

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

feTurbulence मेरी आकृति पर चलने के बजाय आयत क्यों बनाता है? नॉइज़ अपने फ़िल्टर प्रिमिटिव उपक्षेत्र को भरता है। ओवरले को कलाकृति तक सीमित करने और उसका भरण बचाने के लिए उसे SourceAlpha के भीतर कंपोज़िट करें और SourceGraphic के ऊपर मिलाएँ।

क्या SVG की दानेदार बनावट पाथ में नोड जोड़ती है? यह फ़िल्टर दानों के पाथ नहीं जोड़ता। मूल ब्राउज़र परीक्षण में छहों नमूनों में एक पाथ और समान d डेटा रहा; फ़िल्टर ने रेंडर सतह बदली।

कौन-सी दानेदार सेटिंग से शुरू करें? मूल पत्ती उदाहरण के लिए fractalNoise, baseFrequency 0.65, दो ऑक्टेव, seed 8 और काले ओवरले का अल्फ़ा गुणक 0.28 लें। वास्तविक प्रदर्शन आकार पर तुलना करें और एक बार में एक सेटिंग बदलें।

क्या दानेदार प्रभाव को कटिंग फ़ाइल बना सकते हैं? उत्पन्न बनावट संपादन योग्य कटिंग ज्यामिति नहीं है। अलग बिना फ़िल्टर का पाथ मास्टर रखें और वास्तविक कटिंग प्रक्रिया में ज्यामिति जाँचें।

स्रोत

1. MDN: feTurbulence — नॉइज़ बनाना और प्रिमिटिव उपक्षेत्र।
2. W3C: फ़िल्टर प्रिमिटिव ट्री — SourceGraphic, SourceAlpha और फ़िल्टर चित्र प्रसंस्करण।
3. MDN: feColorMatrix — रंग और अल्फ़ा मैट्रिक्स ऑपरेशन।
4. MDN: feComposite — in ऑपरेटर से सीमित करना।
5. MDN: baseFrequency — एक-अक्ष और दो-अक्ष फ़्रीक्वेंसी मान।
6. MDN: numOctaves — नॉइज़ विवरण की परतें।
7. MDN: filter — फ़िल्टर क्षेत्र के गुण।

वेब चित्रण के लिए रास्टर से साफ़ मास्टर चाहिए हो तो चित्र से वेक्टर रूपांतरण से शुरू करें, पाथ समीक्षा करें और अलग प्रदर्शन प्रति में दानेदार बनावट जोड़ें।