शोरयुक्त SVG बनाना

SVG में noise effect जोड़ना

• वेब टेक्नोलॉजी की प्रगति वेब डिज़ाइन को कैसे प्रभावित करती है, इसमें रुचि
• डिस्प्ले की pixel density बढ़ने से फ़ोटो से vector illustration की ओर बदलाव तेज़ हुआ
• हाल के design trends में textured shadows या lighting effects के साथ noise texture दिखाई देने लगे हैं

Studio Vellekoop & León

• noise texture style के प्रति व्यक्तिगत पसंद और इसे SVG में दोबारा बनाना कितना मुश्किल है
• SVG में रुचि और अलग-अलग effects बनाने के तरीकों की खोज
• SVG optimization tool SVGO के आने और सीधे SVG लिखने के अनुभव को साझा करना

बुनियादी shapes और gradients

• SVG में circle या rectangle जैसी basic shapes आसानी से बनाई जा सकती हैं
• gradient लागू करते समय component reuse के लिए base color के अनुसार बदलने वाला gradient चाहिए
• mask के उपयोग और <defs> से shape को केवल एक बार define करके use element से reference करने का तरीका परिचित कराया गया है

परिणाम

• <feTurbulence> filter का उपयोग करके कृत्रिम noise texture बनाया गया
• color variation हटाने और चुने गए fill color के साथ स्वाभाविक रूप से मिलाने के लिए filter effect लागू किया गया
• अंत में संतोषजनक illustration बनाई गई, लेकिन Safari में यह अलग तरह से render होती है

अतिरिक्त जानकारी 7 दिसंबर 2023

• Hacker News पर लेख सबमिट किया गया और कुछ प्रतिक्रियाएँ मिलीं
• 2021 में Jimmy Chion द्वारा लिखे गए CSS Tricks के समान विषय वाले लेख का परिचय
• लेख लिखते समय पहले वाले लेख की जानकारी नहीं थी, लेकिन अब उसे पूरक सामग्री के रूप में लिंक किया गया है

GN⁺ की राय

इस लेख का सबसे महत्वपूर्ण बिंदु यह है कि इसमें वेब डिज़ाइन के नवीनतम ट्रेंड्स में से एक, noise texture, को SVG में लागू करने के तरीके की खोज की गई है। यह विषय वेब डिज़ाइनर और डेवलपर्स के लिए दिलचस्प होने के साथ-साथ, नवीनतम वेब डिज़ाइन तकनीकें सीखना चाहने वाले शुरुआती software engineers के लिए भी उपयोगी जानकारी देता है। SVG के साथ डिज़ाइन की flexibility और optimization methods के व्यावहारिक उदाहरणों के जरिए, पाठक सीख सकते हैं कि जटिल design effects को कुशलता से कैसे लागू किया जाए।

[ndrgrd]

उम्मीद के मुताबिक, Safari ने फिर निराश नहीं किया! इसे 2020s का IE कहना भी गलत नहीं होगा।

[GN⁺]

Hacker News राय

• SVG का उपयोग करके ऐसा shadow effect लागू करने की कोशिश की गई जो canvas में बनाना संभव नहीं था, लेकिन Safari में CSS shadow काम नहीं कर रहा था, इसलिए SVG native filter का उपयोग करना पड़ा। दूसरे browsers में इसका रूप अलग दिखता है, इसलिए Safari को detect करके CSS version को disable करने वाला JavaScript इस्तेमाल किया गया।

• "recursive yin-yang" की पृष्ठभूमि उस ब्लॉग में समझाई गई है, और texture के साथ प्रयोग करने की योजना है, लेकिन Safari में इसका अलग दिखना निराशाजनक है। यह जानने की उत्सुकता है कि क्या SVG interpretation का standardization होगा।

• SVG से किसी खास illustration style को दोबारा बनाना आसान नहीं है, इसलिए काफ़ी झुंझलाहट महसूस होती है। इस style को "dithering" कहा जाता है, और CSS-Tricks के "Grainy Gradients" पेज में यही तकनीक समझाई गई है। CSS का उपयोग करके इसे पूरी image पर लागू करने का एक alternative भी है।

• SVG का उपयोग करके एक जटिल conference poster बनाया गया, लेकिन browsers और programs के अनुसार rendering अलग-अलग हुई। SVG को include/link करके embed किया जा सकता है, लेकिन किसी दूसरे SVG को include करने पर यह काम नहीं करता। कभी-कभी browser "security" कारणों से embedded/linked images को दिखाता ही नहीं। जटिल SVG को PDF में बदलने पर असंगत तरीके से out-of-memory समस्याएँ आती हैं। SVG को PDF में बदलने वाले हर tool का result अलग निकलता है। Inkscape जैसे tools कभी-कभी included SVG को raster graphics की तरह संभालते हैं।

• फिल्म फोटोग्राफर फिल्म के grain को हटाने की कोशिश करते रहे, लेकिन digital फोटोग्राफर अक्सर उसे फिर से जोड़ना चाहते हैं। digital की साफ़-सुथरी look के बीच ऐसे उदाहरण आकर्षक लगते हैं।

• Inkscape विभिन्न filter effects के ज़रिए ऐसा noise जोड़ सकता है, और Plain SVG के रूप में export करने पर code में feTurbulence का उपयोग देखा जा सकता है। साथ ही, यह भी तुलना की गई कि Affinity Designer 2 noise को कैसे handle करता है। exported SVG में noise एक base64 jpeg image के रूप में शामिल होता है।

• "ApeFest" वेबसाइट CSS animation (असल में JS के ज़रिए move किया गया) का उपयोग करके "random" तरीके से चलने वाली tiled PNG overlay से dynamic noise बनाती है। तकनीकी रूप से यह सरल है, लेकिन असरदार है।

• SVG filters का appearance engine और scaling factors के हिसाब से बहुत बदल जाता है, इसलिए इन्हें केवल सूक्ष्म हिस्सों में और तब इस्तेमाल किया जाता है जब precision महत्वपूर्ण न हो। feDisplacementMap जैसे filters anti-aliasing को बिगाड़ देते हैं, जिससे उन स्थितियों के आधे उपयोग खराब हो जाते हैं जहाँ इन्हें इस्तेमाल करना चाहा जाता है।

• इसे page background के रूप में इस्तेमाल न करने की सलाह दी जाती है। पहले ऐसा करने पर अलग-अलग devices पर अजीब bugs आए, और बड़े sites में page पूरी तरह freeze हो गया या SVG ने एक निश्चित size के बाद render होना बंद कर दिया।

• Perlin Noise और उसके बाद आया Fractal Noise यथार्थता बढ़ाने या "organic" एहसास देने में बेहद प्रभावी हैं। उदाहरण के लिए, "Aladdin (1992)" में गुफा से निकलने वाले दृश्य में इनका प्रभावी उपयोग हुआ था।

• zoom level से स्वतंत्र तरीके से effects बनाने के तरीकों में रुचि है। साथ ही, randomness जोड़ने के संदर्भ में यह जिज्ञासा भी है कि क्या seed सेट करने का कोई तरीका है, ताकि दिए गए size पर एक सही render result को परिभाषित किया जा सके।