SVG पैटर्न जनरेटर

SVG पैटर्न जनरेटर क्या है?

SVG पैटर्न जनरेटर वेब डिज़ाइनरों और फ्रंट-एंड डेवलपरों के लिए एक मुफ़्त इन-ब्राउज़र टूल है, जिन्हें ग्राफ़िक्स एडिटर खोले बिना हल्की, दोहराने योग्य बैकग्राउंड चाहिए। आप ड्रॉपडाउन से एक पैटर्न (बिंदु, ग्रिड, धारियाँ, तिरछी, शतरंज) चुनते हैं, आकृतियों के लिए अग्रभूमि रंग और टाइल के लिए पृष्ठभूमि रंग सेट करते हैं, और टाइल का आकार तथा स्ट्रोक की मोटाई नियंत्रित करने के लिए स्केल और मोटाई वाले संख्यात्मक इनपुट का उपयोग करते हैं। आउटपुट एक ही टाइल है जो स्पष्ट SVG के रूप में बनी होती है, जिसे निर्बाध रूप से दोहराने के लिए डिज़ाइन किया गया है, इसलिए फ़ाइल का आकार बहुत छोटा रहता है और पैटर्न बिना धुंधला हुए स्केल होता है। कॉपी-योग्य आउटपुट को कच्चे SVG मार्कअप और CSS background-image नियम के बीच बदलने के लिए Format टॉगल का उपयोग करें, फिर उसे कॉपी करें या साइटों, कार्डों, हीरो सेक्शनों और UI मॉकअप में उपयोग हेतु .svg फ़ाइल डाउनलोड करें।

SVG पैटर्न जनरेटर का उपयोग कैसे करें

1. ड्रॉपडाउन से एक पैटर्न चुनें: बिंदु, ग्रिड, धारियाँ, तिरछी, या शतरंज।
2. आकृतियों के लिए अग्रभूमि रंग और टाइल के लिए पृष्ठभूमि रंग टाइप करें या चुनें।
3. स्केल (पिक्सेल में टाइल का आकार) और मोटाई (बिंदु की त्रिज्या या रेखा की मोटाई) वाले संख्यात्मक इनपुट सेट करें।
4. सेटिंग्स खोलें और आउटपुट को SVG तथा CSS के बीच बदलने के लिए Format टॉगल का उपयोग करें।
5. लाइव पूर्वावलोकन को पैटर्न टाइल करते हुए देखें, फिर SVG या CSS कॉपी करें, या .svg फ़ाइल सहेजने के लिए डाउनलोड पर क्लिक करें।

उदाहरण

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

मैं कौन-से पैटर्न बना सकता हूँ?

पाँच टाइल-योग्य पैटर्न: बिंदु, ग्रिड, धारियाँ, तिरछी रेखाएँ और एक शतरंज बोर्ड। प्रत्येक एक छोटी SVG टाइल के रूप में बना होता है जो निर्बाध रूप से दोहराता है, इसलिए यह किसी भी आकार पर स्पष्ट रहता है और फ़ाइल को बहुत छोटा रखता है।

स्केल और मोटाई क्या नियंत्रित करते हैं?

स्केल एक टाइल का पिक्सेल में आकार है, जो तय करता है कि दोहराने वाली आकृतियाँ कितनी दूर हैं। मोटाई टाइल के भीतर बिंदु की त्रिज्या या रेखा की मोटाई है। मोटाई को स्केल के सापेक्ष स्वतः सीमित किया जाता है ताकि पैटर्न कभी टाइल को अत्यधिक न भर दे।

SVG और CSS आउटपुट में क्या अंतर है?

SVG आपको एक स्वतंत्र .svg फ़ाइल या इनलाइन उपयोग के लिए कच्चा मार्कअप देता है। CSS आपको एक background-image नियम देता है जो data URI के साथ background-repeat: repeat का उपयोग करता है, जो स्टाइलशीट में चिपकाने के लिए तैयार है। दोनों के बीच बदलने के लिए सेटिंग्स में Format टॉगल का उपयोग करें।

क्या मैं HEX टाइप करने के बजाय रंग दृश्य रूप से चुन सकता हूँ?

हाँ। अपने ब्राउज़र का मूल रंग चयनकर्ता खोलने के लिए अग्रभूमि या पृष्ठभूमि फ़ील्ड के बगल वाले रंग चिप पर क्लिक करें, या सीधे #4f86f7 जैसा HEX मान टाइप करें। जैसे-जैसे आप बदलते हैं, पूर्वावलोकन और आउटपुट अपडेट होते हैं।

क्या मेरे रंग या फ़ाइलें कहीं अपलोड होती हैं?

नहीं। पैटर्न पूरी तरह आपके ब्राउज़र में SVG स्ट्रिंग के रूप में बनाया जाता है, और डाउनलोड स्थानीय रूप से Blob के रूप में बनाया जाता है। कोई भी रंग, कोड या फ़ाइल कभी किसी सर्वर पर नहीं भेजी जाती, इसलिए यह ऑफ़लाइन काम करता है और आपके काम को निजी रखता है।