SVG के रंग कैसे बदलें और सामान्य समस्याएँ ठीक करें

SVG फ़ाइल का रंग बदलने के 3 वास्तविक तरीके हैं, और सभी मुफ़्त हैं। ऑनलाइन SVG रंग बदलने वाले टूल में अपलोड करें और बदलने वाले रंग के नमूने पर क्लिक करें। Inkscape जैसे वेक्टर ऐप में खोलें, आकृति चुनें और नया भराव चुनें। या टेक्स्ट संपादक में फ़ाइल खोलकर हेक्स कोड बदलें, क्योंकि SVG केवल टेक्स्ट है। वेक्टर का रंग बदलने में गुणवत्ता भी नहीं घटती: आप निर्देश दोबारा लिखते हैं, पिक्सेल पर रंग नहीं करते, इसलिए कुछ धुँधला या खराब नहीं होता।

कौन-सा तरीका चुनें, यह फ़ाइल के भीतर की चीज़ों पर निर्भर है। और जब SVG रंग बदलने से मना करे, तो कारण लगभग हमेशा फ़ाइल के भीतर होता है, आपके टूल में नहीं। यह मार्गदर्शिका पहले 3 तरीके बताती है, फिर कारण पहचानती है: रंग न बदलने के 6 सामान्य कारण, जिसमें वह भी है जिसे कोई रंग टूल ठीक नहीं कर सकता।

SVG अपने रंग कहाँ रखता है

SVG फ़ाइल टेक्स्ट में लिखी आकृतियों की सूची है। हर आकृति में अंदर के लिए fill और आउटलाइन के लिए stroke हो सकता है, जैसा MDN की SVG भराव और स्ट्रोक मार्गदर्शिका बताती है। कोई एक “चित्र का रंग” नहीं है जिसे एक जगह बदल दें। स्क्रीन पर एक रंग दिखने वाला डिज़ाइन एक साफ़ पाथ हो सकता है, या 40 अलग पाथ जिनका भराव संयोग से समान है।

यही पूरी बात है। नीचे हर तरीका आकृतियाँ खोजने और उनका fill या stroke दोबारा लिखने का अलग रास्ता है। इसी वजह से फ़ाइलों के परिणामों में बहुत अंतर है: आकृतियाँ जितनी कम और साफ़ हों, रंग बदलना उतना आसान।

अपना तरीका चुनें

तरीका 1: ऑनलाइन SVG रंग बदलने वाला टूल

1. ब्राउज़र में मुफ़्त SVG रंग टूल खोलें और फ़ाइल अपलोड करें (अच्छे टूल चिपकाया SVG कोड भी स्वीकार करते हैं)।
2. टूल मिले हुए रंगों की सूची देता है। उपयोगी टूल समान भराव ग्रुप करते हैं, इसलिए “नीला” एक नमूना रहता है, भले दर्जनों आकृतियों पर हो।
3. नमूने पर क्लिक करें, नया रंग चुनें और पूर्वावलोकन देखें।
4. परिणाम डाउनलोड करें और पुष्टि के लिए एक बार ब्राउज़र टैब में खोलें।

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

तरीका 2: वेक्टर डिज़ाइन ऐप

Inkscape मुफ़्त है और इस काम की हर आवश्यकता पूरी करता है; Illustrator और Figma इसी तरह काम करते हैं।

1. SVG खोलें और बदलने वाला हिस्सा क्लिक करें। पूरा डिज़ाइन एक ब्लॉक की तरह चुने तो वह ग्रुप है: भीतर जाने के लिए डबल-क्लिक करें या ग्रुप की आकृतियों को अलग करें।
2. Fill & Stroke पैनल (Inkscape) या भराव नमूने (Illustrator, Figma) में रंग बदलें।
3. एक दिखने वाला रंग कई आकृतियों में बँटा हो तो एक-एक क्लिक न करें। Inkscape में आकृति पर राइट-क्लिक करके Select Same → Fill Color इस्तेमाल करें, या Illustrator का दस्तावेज़ित Select → Same → Fill Color इस्तेमाल करें। वही भराव साझा करने वाली हर आकृति चुनी जाती है और एक बदलाव सबका रंग बदलता है।
4. Plain SVG के रूप में निर्यात करें या सहेजें।

आकृतियाँ हिलाने या वक्र फिर बनाने जैसे रंग से आगे के काम के लिए भी डिज़ाइन ऐप ही सही जगह है। बड़े टूल संग्रह के लिए SVG संपादित करने की मार्गदर्शिका देखें।

तरीका 3: टेक्स्ट संपादक

SVG टेक्स्ट है, इसलिए कोई भी संपादक चलेगा: Notepad, TextEdit, VS Code।

1. .svg फ़ाइल खोलें और fill= खोजें।
2. मान बदलें, जैसे fill="#1e3a5f" को fill="#c2410c", और सहेजें।
3. परिणाम जाँचने के लिए ब्राउज़र टैब में फ़ाइल रीफ़्रेश करें।

3 सावधानियाँ हैं। रंग हेक्स के साथ नामों (fill="black") में भी लिखे हो सकते हैं। आउटलाइन stroke= में होती है, fill= में नहीं। कई निर्यात फ़ाइलें रंग आकृति पर रखती ही नहीं: वे क्लास इस्तेमाल करती हैं और असली हेक्स ऊपर के <style> ब्लॉक में होता है (.st0{fill:#1e3a5f;})। स्टाइल ब्लॉक का हेक्स बदलें और उस क्लास की हर आकृति बदल जाएगी।

एक रंग के आइकन में यह तरीका बेहतरीन है, जहाँ एक खोज-और-बदलाव काम पूरा करता है। पूरे फ़ोल्डर में बैच काम के लिए भी उपयोगी है। 40 रंग वाले चित्र के लिए यह धीमा रास्ता है।

अगर SVG वेबसाइट पर है

क्या CSS से SVG का रंग बदल सकते हैं? सबसे सीधा रास्ता HTML में इनलाइन SVG मार्कअप है। तब fill CSS प्रॉपर्टी की तरह काम करता है, और भराव को currentColor करने से आइकन आसपास के टेक्स्ट का रंग लेता है। बाहरी <img> से लोड SVG को चित्र माना जाता है; MDN बताता है कि इस व्यवस्था में JavaScript SVG की संरचना नहीं बदल सकता, और पेज की स्टाइल उसके अंदर के पाथ सीधे नहीं चुनती।

फ़ाइल इनलाइन नहीं कर सकते तो ऊपर के फ़ाइल संपादन तरीके इस्तेमाल करें: SVG के भीतर रंग बदलें और दोबारा लोड करें। प्रस्तुति का तरीका चुनने के लिए उसी कला और पेज CSS परीक्षण से इनलाइन SVG और बाहरी चित्र की तुलना करें।

एक रंग की इंटरफ़ेस सिलुएट के लिए SVG CSS मास्क और पारदर्शी आइकन आकृतियाँ दूसरा रास्ता देती हैं: स्रोत चित्र के पाथ रंग वैसे रखते हुए CSS से आइकन तत्व रंगें।

वापस बदले जा सकने वाले रंग प्रभाव के लिए feColorMatrix की सीधे भराव बदलने से तुलना करें। फ़िल्टर स्रोत के रंग निर्देश जस के तस रखते हुए रेंडर हुए रंग बदलता है, जो संपादन योग्य कला देते समय मायने रखता है।

SVG का रंग क्यों नहीं बदलता

ट्यूटोरियल यही हिस्सा छोड़ते हैं, और वास्तव में अधिकतर रंग बदलाव यहीं असफल होते हैं। तालिका में क्रम से देखें।

इनमें से 2 को करीब से देखना चाहिए।

अचानक दिखा पृष्ठभूमि बॉक्स

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

वह SVG जो वेक्टर नहीं है

कठिन स्थिति ऐसी दिखती है: कोई आकृति चुनी नहीं जाती, हर भराव बदलाव बेअसर रहता है और ज़ूम करने पर किनारे पिक्सेल वाले दिखते हैं। टेक्स्ट संपादक में खोलें तो <path> तत्वों के बजाय एक <image> टैग में बहुत सारा base64 टेक्स्ट मिलता है। यह .svg के भीतर लिपटी रास्टर तस्वीर है। वास्तविक ट्रेसिंग न करने वाले कन्वर्टर ऐसी फ़ाइलें बनाते हैं। कोई रंग टूल मदद नहीं कर सकता क्योंकि रंग बदलने योग्य आकृतियाँ हैं ही नहीं। “रंग देने” वाले फ़िल्टर केवल पिक्सेल पर टिंट लगाते हैं, आम तौर पर खराब ढंग से। दोनों फ़ाइलें स्क्रीन पर समान दिखती हैं, लेकिन कोड में अंतर स्पष्ट है:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

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

कट फ़ाइल का रंग बदलना: हर रंग एक लेयर है

Cricut या Silhouette आपके SVG के हर रंग को लेयर मानता है। हर लेयर का अर्थ एक और पास, सामग्री की एक और शीट और अधिक अतिरिक्त सामग्री हटाना है। इसलिए कट फ़ाइल का रंग बदलना वास्तव में लेयर की योजना है: 2 तत्वों को एक भराव देना उन्हें एक कट में मिलाता है, और रंग बाँटना नई लेयर बनाता है।

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

रंग बदलने के बाद अलग डाउनलोड चाहिए तो हर सटीक रंग को संरेखित SVG फ़ाइल में सहेजें।

PerfectVector के साथ यह कैसा दिखता है

पहले एक सीमा साफ़ करें: PerfectVector आपके मौजूदा SVG संपादित नहीं करता। यह चित्रों (PNG, JPG, WebP) को SVG में बदलता है। लेकिन “इस SVG का रंग कैसे बदलूँ” वाली आश्चर्यजनक मात्रा में परेशानी उसी रूपांतरण चरण से आती है: मुश्किल करने वाली फ़ाइल आम तौर पर खराब ट्रेस होती है या वास्तविक वेक्टर होती ही नहीं।

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

रंग बदलना क्या नहीं कर सकता

• ग्रेडिएंट एक रंग नमूना नहीं है। वह रंग बिंदुओं के बीच बदलाव है। बिंदु संपादित कर सकते हैं, लेकिन साधारण “यह रंग बदलें” प्रक्रिया शायद बदलाव का केवल हिस्सा बदले। इसी वजह से सीधे बदलाव के बाद ग्रेडिएंट कला अजीब दिखती है।
• स्क्रीन के रंग प्रिंट के रंग नहीं हैं। SVG स्क्रीन के लिए रंग निर्देश रखता है, जबकि प्रिंट को सटीक ब्रांड, स्पॉट या काली स्याही का निश्चित संयोजन चाहिए हो सकता है। निर्यात से दिखाई देने वाला रंग बदले तो रंग सूची बदलने से पहले SVG रंग बदलाव का कारण पहचानें। प्रिंट शॉप का माँगा उत्पादन फ़ॉर्मैट रंग का अंतिम प्राधिकार रहता है।
• रंग बदलने से ज्यामिति साफ़ नहीं होती। नया भराव पतली कतरनों को नहीं मिलाता, अंतराल नहीं बंद करता और नोड नहीं घटाता। नए रंग वाला खराब ट्रेस अब भी खराब ट्रेस है।

सहेजने से पहले

• रंग बदली फ़ाइल नए ब्राउज़र टैब में खोलें और मूल से मिलाएँ।
• आउटलाइन जाँचें: जहाँ ज़रूरी था वहाँ भराव के साथ स्ट्रोक भी बदले?
• अनचाहा पृष्ठभूमि आयत देखें जिसका रंग शायद गलती से बदल गया हो।
• कट फ़ाइल में रंग मिलाने के बाद लेयर गिनें; कम लगभग हमेशा बेहतर है।
• मूल फ़ाइल की बिना बदलाव वाली प्रति रखें।

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

Illustrator या Photoshop के बिना SVG फ़ाइल का रंग कैसे बदलूँ? मुफ़्त ऑनलाइन SVG रंग टूल इस्तेमाल करें (अपलोड, नमूने पर क्लिक, डाउनलोड), या मुफ़्त डेस्कटॉप वेक्टर संपादक Inkscape। एक रंग के आइकन के लिए किसी टेक्स्ट संपादक में फ़ाइल खोलकर fill= के बाद का हेक्स बदलना भी काम करता है। इनमें कोई शुल्क नहीं लगता।

हर कोशिश के बाद SVG काला क्यों रहता है? वेबसाइट पर हो तो CSS img टैग से लोड SVG की स्टाइल नहीं बदल सकता; इनलाइन करें या फ़ाइल संपादित करें। संपादक में हो तो बीच में ग्रुप, रंग देने वाला स्ट्रोक या स्टाइल ब्लॉक में परिभाषित रंग जाँचें। कुछ चुना न जाए और ज़ूम पर पिक्सेल दिखें तो फ़ाइल .svg में लिपटा रास्टर है और रंग बदलने योग्य आकृतियाँ नहीं हैं।

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

क्या एक SVG फ़ाइल में एक से अधिक रंग हो सकते हैं? हाँ। हर आकृति का अपना भराव और स्ट्रोक होता है, इसलिए SVG में आकृतियों जितने रंग और ग्रेडिएंट हो सकते हैं। इसी वजह से कई रंगों की कला का रंग बदलना कई भराव बदलना है, एक वैश्विक सेटिंग नहीं।

Cricut प्रोजेक्ट के लिए SVG के रंग कैसे बदलूँ? Cricut Design Space में लेयर के रंग बदल सकते हैं, लेकिन वह प्रति लेयर बदलता है, प्रति आकृति नहीं। कौन-से हिस्से एक रंग साझा करें और साथ कटें, यह पुनर्गठित करने के लिए अपलोड से पहले SVG संपादित करें: एक लेयर पर चाहिए रंग मिलाएँ और अलग कटने वाली चीज़ को अलग भराव दें।

क्या SVG का रंग बदलने से गुणवत्ता घटती है? नहीं। वेक्टर का रंग टेक्स्ट में निर्देश है, इसलिए बदलना ज्यामिति छुए बिना निर्देश दोबारा लिखता है। PNG संपादन के विपरीत SVG के रंग जितनी बार चाहें बदल सकते हैं और गुणवत्ता बिल्कुल नहीं घटती।

स्रोत

1. MDN: SVG भराव और स्ट्रोक — fill, stroke, अपारदर्शिता और संबंधित SVG रंग प्रॉपर्टी समझाता है।
2. MDN: वेब में वेक्टर ग्राफ़िक्स जोड़ना — इनलाइन SVG और <img> से लोड SVG की तुलना करता है।
3. Adobe Illustrator: समान भराव और स्ट्रोक वाली वस्तुएँ चुनना — साझा रंग गुणों से कला चुनना बताता है।
4. W3C: SVG 2 एम्बेड सामग्री — SVG दस्तावेज़ में रास्टर <image> सामग्री परिभाषित करता है।
5. Canva: SVG संपादक — Canva के SVG अपलोड, रंग बदलाव और डाउनलोड दावों का वर्तमान स्रोत।

फ़ाइल साथ दे तो SVG का रंग बदलना तेज़ है: अपने पास की फ़ाइल के अनुसार तरीका चुनें और टूल से संघर्ष करने से पहले कारण पहचानें। फ़ाइल स्वयं समस्या हो तो संघर्ष छोड़ें। मूल चित्र को साफ़, संपादन योग्य SVG में बदलें और जब आसान हो तभी रंग चुन लें।