> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG दानेदार बनावट: नॉइज़ को कलाकृति के भीतर रखें > feTurbulence से SVG में दानेदार बनावट दें, एकरंगी नॉइज़ को SourceAlpha में रखें, दो आकारों पर समायोजित करें और अन्य गंतव्यों के लिए साफ़ पाथ मास्टर बचाएँ। Source: https://perfectvector.com/hi/blog/svg-feturbulence-grain Language: hi Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 SVG चित्रण में दानेदार बनावट जोड़ने के लिए `feTurbulence` से नॉइज़ बनाएँ, उसे हल्के एकरंगी ओवरले में बदलें और `SourceAlpha` के भीतर कंपोज़िट करें। उसे `SourceGraphic` के ऊपर मिलाएँ ताकि मूल भरण दिखता रहे। इससे रेंडर की गई बनावट जुड़ती है और कलाकृति की पाथ ज्यामिति सुरक्षित रहती है। केवल नॉइज़ प्रिमिटिव अलग परिणाम देता है: वह आकृति की बाहरी रेखा पर चलने के बजाय अपने फ़िल्टर प्रिमिटिव उपक्षेत्र को भरता है। इसलिए पत्ती आयताकार नॉइज़ पैच बन सकती है। [MDN का feTurbulence संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) यह व्यवहार बताता है। वेब चित्रण के लिए उपयोगी डिलीवरी हैं बनावट वाला प्रदर्शन संस्करण और साफ़ मास्टर। इस फ़िल्टर की दानेदार बनावट संपादन योग्य बिंदुओं या कटिंग रूपरेखाओं का संग्रह नहीं है। ## आकृति को सतह के प्रभाव से अलग रखें सरल भरे हुए पाथ से शुरू करें जो बिना दानेदार बनावट भी सही दिखता हो। प्रभाव जोड़ने से पहले उसकी बाहरी रेखा, अंतर और रंग ठीक करें। फ़िल्टर उस ज्यामिति की मरम्मत नहीं करेगा। नीचे की तीन अवस्थाएँ सीमा की समस्या समझाती हैं: | संस्करण | फ़िल्टर क्या देता है | कब इस्तेमाल करें | | ------------------- | ------------------------------------------------ | ---------------------------------------- | | सादी आकृति | मूल भरा हुआ पाथ | संपादन और साफ़ मास्टर | | केवल नॉइज़ | फ़िल्टर क्षेत्र में बना आयताकार चित्र | रूपांकन देने के बजाय नॉइज़ स्रोत जाँचना | | सीमित दानेदार बनावट | मूल कलाकृति और उसके अल्फ़ा से सीमित एकरंगी नॉइज़ | ब्राउज़र में बनावट वाला प्रदर्शन संस्करण | **सीमा महत्वपूर्ण है** ![साफ़ मूँगा रंग की पत्ती, पत्ती के बाहर फैलती दानेदार बनावट और स्पष्ट पत्ती आकृति के भीतर सीमित बनावट का चित्रण](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *चित्रण: आकृति साफ़ रहती है और नॉइज़ उसकी बाहरी आकृति में सीमित रहता है। यह वैचारिक आरेख SVG रेंडरर स्क्रीनशॉट या वेक्टराइज़ेशन परिणाम नहीं है।* `SourceGraphic` फ़िल्टर किया जाने वाला एलिमेंट देता है। `SourceAlpha` उसका अल्फ़ा चैनल देता है। फ़िल्टर कलाकृति के चित्र पर काम करता है; पाथ कमांड दोबारा नहीं लिखता। ये इनपुट और फ़िल्टर ग्राफ़ [W3C Filter Effects विनिर्देश](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) में परिभाषित हैं। शुरुआती कलाकृति में पारदर्शी क्षेत्र पहले से हों तो वे भी सीमित करने को प्रभावित करते हैं। SourceAlpha वास्तविक रेंडर की गई अपारदर्शिता का पालन करता है, अनुमानित बाहरी बाउंडिंग बॉक्स का नहीं। ## पूरा SVG दानेदार बनावट उदाहरण कॉपी करें इसे `.svg` फ़ाइल बनाकर सहेजें और ब्राउज़र में खोलें। इसमें एक मूल पत्ती पाथ, निश्चित परिणाम देने वाला नॉइज़ सीड, गहरा ओवरले और स्पष्ट सीमित करने वाला चरण है। तिरछा खुला भाग पाथ का हिस्सा है, इसलिए बनावट वाले संस्करण में भी पारदर्शी रहता है। ```xml ``` फ़िल्टर चार काम करता है: 1. `feTurbulence` नॉइज़ बनाता है और उसका नाम `noise` रखता है। 2. मैट्रिक्स लाल, हरा और नीला शून्य करता है। उसकी आख़िरी पंक्ति नॉइज़ के अल्फ़ा को `0.28` से गुणा करके `ink` नाम का हल्का काला ओवरले बनाती है। 3. `operator="in"` वाला `feComposite` उस ओवरले को वहाँ रखता है जहाँ `SourceAlpha` मौजूद है। 4. `feMerge` पहले मूल कलाकृति और उसके ऊपर सीमित ओवरले बनाता है। [MDN का feColorMatrix संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) समझाता है कि पाँच-कॉलम वाला मैट्रिक्स रंग और अल्फ़ा कैसे बदलता है। यहाँ वह नॉइज़ चित्र बदलता है, पत्ती का भरण नहीं। [MDN का feComposite संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) दूसरे इनपुट तक ओवरले सीमित करने वाले `in` ऑपरेशन को समझाता है। `0.28` इस मूँगा रंग की पत्ती का शुरुआती मान है, सार्वभौमिक दानेदार सेटिंग नहीं। बनावट कलाकृति फीकी करे तो इसे घटाएँ; इच्छित प्रदर्शन आकार पर गायब हो तो बढ़ाएँ। काले ओवरले वाली बनावट भरण गहरा करती है। वह काले रूपांकन पर दिखाई देने वाले हल्के दाने नहीं बनाएगी। मौजूदा कलाकृति का रंग बदलने वाले रंग और अल्फ़ा ऑपरेशन के लिए अलग [feColorMatrix गाइड](https://perfectvector.com/hi/blog/svg-fecolormatrix) देखें। मौजूदा पारदर्शी किनारा कठोर करने के लिए [SVG अल्फ़ा थ्रेशोल्ड](https://perfectvector.com/hi/blog/svg-alpha-threshold) देखें। इनमें से कोई भी यहाँ का उत्पन्न नॉइज़ स्रोत नहीं देता। ## परिणाम उस आकार पर जाँचें जिसमें लोग देखेंगे हमने इस मूल पाथ के तीन संस्करण बनाए: बिना फ़िल्टर, केवल नॉइज़ प्रिमिटिव वाला फ़िल्टर और ऊपर का पूरा सीमित-बनावट ग्राफ़। Chrome में **120 × 120** और **360 × 360 CSS पिक्सेल** पर रेंडर किए संस्करण जाँचे, सभी में वही `0 0 200 200` viewBox था। | जाँच | 120-पिक्सेल संस्करण | 360-पिक्सेल संस्करण | | ----------- | ---------------------------------------------------- | ------------------------------------------------------ | | सादा मास्टर | चिकनी मूँगा रंग की पत्ती, पारदर्शी खुला भाग | वही बाहरी रेखा और खुला भाग | | केवल नॉइज़ | आयताकार नॉइज़ दिखाई देने वाले रूपांकन की जगह लेता है | आयताकार नॉइज़ पत्ती की बाहरी आकृति से बाहर भी दिखता है | | सीमित बनावट | पत्ती के भीतर हल्की बनावट | अधिक दिखाई देने वाली बनावट, खुला भाग और आसपास साफ़ | ब्राउज़र DOM में हर नमूने में एक पाथ था। छहों `d` गुण समान थे। यह उदाहरण की सीमा तय करता है: रेंडर सतह बदली और दानों के पाथ नहीं जुड़े। यह बनाया गया ब्राउज़र परीक्षण है, PerfectVector या किसी मूल वेक्टर एडिटर का आउटपुट नहीं। बड़ा प्रीव्यू प्रभाव जाँचने में मदद करता है, लेकिन छोटा संस्करण तय करता है कि कलाकृति अब भी समझ आती है या नहीं। समीक्षा में दोनों आकार रखें। उसी viewBox के साथ प्रदर्शन आकार बढ़ाने से बनावट का दिखता पैमाना भी बदलता है; एक प्रीव्यू को हर उपयोग का प्रतिनिधि न मानें। ## एक बार में एक नियंत्रण से बनावट समायोजित करें छोटे वेब कार्ड चित्रण के लिए उदाहरण के मानों से शुरू करें। फिर एक पैरामीटर बदलें, उन्हीं दो आकारों की तुलना करें और पसंद आए संस्करण की प्रति रखें। | नियंत्रण | क्या तय करें | व्यावहारिक जाँच | | --------------------- | ---------------------------------------- | ----------------------------------------------------------------- | | `baseFrequency` | SVG निर्देशांकों में मोटा या बारीक बदलाव | `0.25` को `0.65` के साथ आज़माएँ; वास्तविक प्रदर्शन आकार पर जाँचें | | `numOctaves` | नॉइज़ विवरण की कितनी परतें मिलाएँ | अधिक विवरण जोड़ने से पहले `1` और `2` तुलना करें | | `seed` | नॉइज़ का कौन-सा रूप लें | अन्य सेटिंग की तुलना करते समय स्थिर रखें | | मैट्रिक्स अल्फ़ा गुणक | काला ओवरले भरण कितना गहरा करे | एक ही कलाकृति पर `0.15` और `0.28` तुलना करें | | फ़िल्टर क्षेत्र | फ़िल्टर ग्राफ़ के लिए उपलब्ध आयत | आयत को अल्फ़ा सीमांकन का विकल्प बनाए बिना गायब आउटपुट ठीक करें | `baseFrequency` दोनों अक्षों के लिए एक मान या क्षैतिज व लंबवत फ़्रीक्वेंसी के लिए दो मान स्वीकारता है। [MDN का baseFrequency संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) यह अंतर बताता है। इस पत्ती के लिए एक मान से शुरू करें; असमान मान दिशात्मक बनावट का जानबूझकर लिया चुनाव हैं। `numOctaves` नॉइज़ ऑक्टेव की संख्या नियंत्रित करता है, जैसा [MDN का numOctaves संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) बताता है। अतिरिक्त ऑक्टेव अतिरिक्त वेक्टर पाथ नहीं हैं। उन्हें तभी लें जब ज़रूरी आकार पर दिखाई देने वाली सतह बेहतर हो। उदाहरण स्पष्ट रूप से `color-interpolation-filters="sRGB"` सेट करता है। विकल्पों की तुलना में इसे वैसा ही रखें ताकि रंग प्रसंस्करण का बदलाव दानेदार बनावट की तुलना में भ्रम न पैदा करे। ## आयत, गायब भरण या गंदा किनारा ठीक करें **बनावट आयताकार पैच बनाती है।** फ़िल्टर का अंतिम आउटपुट जाँचें। वह `feTurbulence` पर समाप्त हो तो नॉइज़ चित्र लौटा रहा है। मैट्रिक्स, `SourceAlpha` कंपोज़िट और मर्ज वापस रखें। फ़िल्टर का आयत बढ़ाने से असंयमित नॉइज़ को केवल अधिक जगह मिलेगी। **पत्ती का रंग गायब होता है।** जाँचें कि पहला मर्ज नोड `SourceGraphic` लेता है। केवल अंतिम `inside` परिणाम में गहरा ओवरले है, मूल मूँगा रंग भरण नहीं। हर नामित `result` और `in` संदर्भ की वर्तनी व बड़े-छोटे अक्षर भी जाँचें। **पारदर्शी खुले भाग में नॉइज़ बचता है।** पुष्टि करें कि दूसरा कंपोज़िट इनपुट `SourceAlpha` है, आयताकार नॉइज़ या अपारदर्शी बैकग्राउंड नहीं। जिस कलाकृति में बनावट चाहिए उसी पर फ़िल्टर लगाएँ। फ़िल्टर वाले समूह में अपारदर्शी बैकग्राउंड जोड़ने से अल्फ़ा इनपुट बदलता है। **आउटपुट का हिस्सा कटता है।** फ़िल्टर पर `x`, `y`, `width` और `height` जाँचें। ये उपलब्ध फ़िल्टर क्षेत्र तय करते हैं, जैसा [MDN का filter संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) बताता है। उदाहरण थोड़ा अतिरिक्त स्थान देता है। बड़ा क्षेत्र गायब सीमांकन चरण नहीं सुधार सकता और अलग कंटेनर से लगने वाली क्लिपिंग भी ठीक नहीं करता। **छोटी कलाकृति धुँधली-गंदी दिखती है।** पहले ओवरले अल्फ़ा घटाएँ, फिर फ़्रीक्वेंसी और ऑक्टेव संख्या तुलना करें। बनावट तब भी बाहरी आकृति बिगाड़े तो उस आकार पर साफ़ संस्करण दें। ## डिलीवरी के लिए साफ़ मास्टर रखें बिना फ़िल्टर के मास्टर के लिए पाथ से `filter="url(#grain)"` हटाएँ और अब अनुपयोगी फ़िल्टर परिभाषा निकालें। पाथ का `d`, उसका भरण और viewBox सुरक्षित रखें। फ़ाइल अलग खोलकर पुष्टि करें कि पत्ती और खुला भाग मूल साफ़ संस्करण जैसे हैं। वेब ऐप के लिए बनावट वाला संस्करण उन्हीं ब्राउज़र और ठीक उसी एम्बेडिंग तरीके में जाँचें जो जारी करेंगे। यह inline SVG एक पेज में दोहराएँ तो हर फ़िल्टर को अलग ID दें और उसका `url(#...)` संदर्भ बदलें। स्वतंत्र उदाहरण एक ID लेता है क्योंकि उसमें एक ही इंस्टेंस है। सटीक रास्टर रूप चाहिए हो तो ज़रूरी आकार पर रास्टर प्रीव्यू निर्यात करें और वहीं जाँचें। संपादन योग्य या काटने योग्य ज्यामिति चाहिए हो तो साफ़ पाथ दें और स्पष्ट करें कि दानेदार बनावट प्रदर्शन प्रभाव है। फ़िल्टर नॉइज़ को वेक्टर दाने न कहें, और बाद के एडिटर, PDF निर्यातक या कटर में वही बनने का वादा न करें। वास्तविक गंतव्य जाँचें। जानबूझकर अलग-अलग संपादन योग्य दाने चाहिए हों तो वह अलग ज्यामिति का काम है। उसमें सफ़ाई का निर्णय भी चाहिए; बनावट को बहुत छोटी रूपरेखाओं के ढेर में ट्रेस करने से पहले [SVG में बहुत अधिक नोड क्यों होते हैं](https://perfectvector.com/hi/blog/svg-too-many-nodes) देखें। रास्टर पेंटिंग की दानेदार बनावट बचाना अलग शुरुआती समस्या है, जिसे [वॉटरकलर से वेक्टर](https://perfectvector.com/hi/blog/watercolor-to-vector) में बताया गया है। ## वेक्टराइज़ेशन कब मदद करता है साफ़ रूपांकन केवल PNG या JPG में बचा हो तो ब्राउज़र फ़िल्टर जोड़ने से पहले [उस स्रोत को संपादन योग्य SVG कलाकृति में बदलें](https://perfectvector.com/hi/image-to-vector)। पहले साफ़ संस्करण में प्राप्त बाहरी आकृति और खुला भाग जाँचें। PerfectVector रास्टर से वेक्टर चरण देता है; इस गाइड का प्रक्रियात्मक दानेदार ग्राफ़ अलग SVG प्रभाव है जो आप बाद में जोड़ते हैं। पाथ-आधारित मास्टर पहले से है? सीधे वही लें। फ़िल्टर के काम के लिए दूसरा रूपांतरण ज़रूरी नहीं। ज़रूरत हो तो [इमेज वेक्टराइज़ेशन गाइड](https://perfectvector.com/hi/blog/what-is-image-vectorization) स्रोत पुनर्प्राप्ति का वह चरण समझाती है। ## अक्सर पूछे जाने वाले प्रश्न **feTurbulence मेरी आकृति पर चलने के बजाय आयत क्यों बनाता है?** नॉइज़ अपने फ़िल्टर प्रिमिटिव उपक्षेत्र को भरता है। ओवरले को कलाकृति तक सीमित करने और उसका भरण बचाने के लिए उसे SourceAlpha के भीतर कंपोज़िट करें और SourceGraphic के ऊपर मिलाएँ। **क्या SVG की दानेदार बनावट पाथ में नोड जोड़ती है?** यह फ़िल्टर दानों के पाथ नहीं जोड़ता। मूल ब्राउज़र परीक्षण में छहों नमूनों में एक पाथ और समान d डेटा रहा; फ़िल्टर ने रेंडर सतह बदली। **कौन-सी दानेदार सेटिंग से शुरू करें?** मूल पत्ती उदाहरण के लिए fractalNoise, baseFrequency 0.65, दो ऑक्टेव, seed 8 और काले ओवरले का अल्फ़ा गुणक 0.28 लें। वास्तविक प्रदर्शन आकार पर तुलना करें और एक बार में एक सेटिंग बदलें। **क्या दानेदार प्रभाव को कटिंग फ़ाइल बना सकते हैं?** उत्पन्न बनावट संपादन योग्य कटिंग ज्यामिति नहीं है। अलग बिना फ़िल्टर का पाथ मास्टर रखें और वास्तविक कटिंग प्रक्रिया में ज्यामिति जाँचें। ## स्रोत 1. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — नॉइज़ बनाना और प्रिमिटिव उपक्षेत्र। 2. [W3C: फ़िल्टर प्रिमिटिव ट्री](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha और फ़िल्टर चित्र प्रसंस्करण। 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — रंग और अल्फ़ा मैट्रिक्स ऑपरेशन। 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — in ऑपरेटर से सीमित करना। 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — एक-अक्ष और दो-अक्ष फ़्रीक्वेंसी मान। 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — नॉइज़ विवरण की परतें। 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — फ़िल्टर क्षेत्र के गुण। वेब चित्रण के लिए रास्टर से साफ़ मास्टर चाहिए हो तो [चित्र से वेक्टर रूपांतरण से शुरू करें](https://perfectvector.com/hi/image-to-vector), पाथ समीक्षा करें और अलग प्रदर्शन प्रति में दानेदार बनावट जोड़ें। ## Explore - [Read the HTML article](https://perfectvector.com/hi/blog/svg-feturbulence-grain) - [FontForge SVG आयात: बनाई गई आकृतियों से ग्लिफ़ के कंटूर बनाएं](https://perfectvector.com/hi/blog/fontforge-import-svg.md) - [वेक्टर ट्रेस की गुणवत्ता कैसे परखें: एक अंक-पत्र](https://perfectvector.com/hi/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)