SVG कैसे संपादित करें: विज़ुअल एडिटर या कोड

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

संरचना में बड़ा बदलाव करने वाली कमांड चुनने से पहले पहचानें कि आपने क्या चुना है। एक समूह, कई हिस्सों वाला एक पाथ और एम्बेड किया गया PNG कैनवास पर एक ही ऑब्जेक्ट जैसे दिख सकते हैं। हर स्थिति का समाधान अलग है।

कॉपी बनाएँ और SVG ऑब्जेक्ट पहचानें

आपको SVG फ़ाइल, काम करने की कॉपी, एडिटर और SVG समर्थित व्यूअर चाहिए। एक्सपोर्ट की गई कॉपी जाँच में सही मिलने तक मूल फ़ाइल रखें।

SVG का पूरा नाम Scalable Vector Graphics है। इसका XML मार्कअप वेक्टर आकृतियाँ और पाथ बता सकता है, लेकिन इसमें एम्बेड की गई इमेज भी हो सकती हैं। पाथ किसी रेखा या आकृति को बताता है; नोड उस पाथ पर वेक्टर एडिटर में संपादित किया जा सकने वाला बिंदु है। केवल SVG एक्सटेंशन से पता नहीं चलता कि दिखाई देने वाले चित्र में ये बिंदु उपलब्ध हैं या नहीं।

कॉपी खोलें और Layers या Objects पैनल में चुना हुआ ऑब्जेक्ट देखें। ज़रूरत हो तो टेक्स्ट एडिटर में मार्कअप देखें। संरचना बदलने से पहले ऑब्जेक्ट का प्रकार तय करें:

<image> एलिमेंट PNG या JPEG सामग्री को संदर्भित कर सकता है। बाहरी फ़ाइल का नाम .svg होने से वे पिक्सेल पाथ नहीं बनते। बड़ा करने पर खंडित किनारे एक संकेत हैं; ऑब्जेक्ट पैनल और स्रोत संदर्भ अधिक स्पष्ट पहचान देते हैं। कुछ एडिटर सही वेक्टर SVG को भी एक ग्राफ़िक ऑब्जेक्ट के रूप में डालते हैं, इसलिए एक साथ चुना जाना अकेले बहुत कम साबित करता है।

कंपाउंड पाथ छेद सुरक्षित रख सकता है, जैसे “O” का बीच। उसे अलग करने से छेद बदल सकते हैं। Ungroup उपलब्ध न हो या असर न करे तो SVG ऑब्जेक्ट प्रकार की पहचान देखें।

विज़ुअल एडिटर या कोड चुनें

Inkscape मुफ़्त और ओपन सोर्स है, macOS, Windows और Linux पर चलता है और SVG इसका मुख्य फ़ॉर्मैट है। Illustrator पहले से आपकी प्रक्रिया में है तो वह भी विकल्प है। Figma डिज़ाइन टूलों के बीच सामग्री SVG में ले जा सकता है, लेकिन उसका इम्पोर्ट मार्गदर्शन SVG marker और pattern एलिमेंट को शामिल नहीं करता। किसी एडिटर को चुनने से पहले जटिल इम्पोर्ट जाँचें।

Canva का दस्तावेज़ित SVG एडिटर तरीका बुनियादी रंग और लेआउट बदलाव शामिल करता है। छोटे काम के लिए ब्राउज़र एडिटर उपयोगी हैं। फ़ाइल के fill, stroke, टेक्स्ट और प्रभाव का समर्थन तथा वर्तमान एक्सपोर्ट शर्तें जाँचें। समर्थित ठोस fill को सटीक रंग के अनुसार समान संरेखण वाली फ़ाइलों में अलग करने के लिए SVG Color Separator लें; पाथ का आकार बदलना हो तो वेक्टर एडिटर लें।

आकृतियाँ विज़ुअली बदलें, फिर एक्सपोर्ट जाँचें

एडिटर के अनुसार कमांड के नाम अलग होंगे, लेकिन काम का क्रम यह है:

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

रंग बदलने में fill, आकृति के अंदर का रंग, और stroke, बाहरी सीमा का रंग, अलग समझें। एक दिखाई देने वाला रंग कई ऑब्जेक्ट में हो सकता है। समान fill का चयन मदद करता है, लेकिन बदलाव से पहले चयन जाँचें; दूसरा हिस्सा भी वही रंग साझा कर सकता है। SVG रंग बदलने की गाइड विरासत में मिले स्टाइल और न बदलने वाले रंग समझाती है।

एडिटर अपना फ़ॉर्मैट या अतिरिक्त मेटाडेटा इस्तेमाल करता है तो संपादन योग्य मुख्य कॉपी रखें। Adobe के SVG सेव विकल्प में फ़ॉन्ट, CSS प्रॉपर्टी, रैस्टर इमेज और Illustrator संपादन डेटा की सेटिंग हैं। एक्सपोर्ट के बाद सही दिखने वाली फ़ाइल में भी अलग मार्कअप या रैस्टर की गई सामग्री हो सकती है। इमेज के साथ ज़रूरी ऑब्जेक्ट और हुक भी मिलाएँ।

छोटे, नियंत्रित बदलाव के लिए SVG कोड बदलें

SVG कॉपी VS Code या दूसरे प्लेन-टेक्स्ट एडिटर में खोलें। नेमस्पेस, एलिमेंट नाम और उद्धरण चिह्न बनाए रखें। एक बदलाव करके फ़ाइल रेंडर करें, फिर अगला बदलाव करें।

पाथ बदले बिना fill बदलें

यह उदाहरण triangle.svg के नाम से सहेजें और SVG समर्थित व्यूअर में खोलें:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. पाथ के fill एट्रिब्यूट में #3b82f6 की जगह #f97316 लिखें।
2. सहेजें और दोबारा खोलें या रिफ़्रेश करें।
3. जाँचें कि त्रिकोण नारंगी है और सीमा वही है। d पाथ डेटा, id और class मूल जैसे रहने चाहिए।

रंग न बदले तो style एट्रिब्यूट, क्लास नियम, विरासत वाला रंग या stroke जाँचें, जो दृश्य परिणाम नियंत्रित कर सकता है। पूरी फ़ाइल में हर जगह रंग बदलने के बजाय ज़िम्मेदार रंग नियम बदलें।

तरीके की जानकारी: हमने fill बदलने से पहले और बाद में उदाहरण को SVG रेंडरर से रेंडर करके परिणाम के पिक्सेल जाँचे। त्रिकोण का रंग बदला और पाथ डेटा, ID व क्लास वही रहे। यह छोटा उदाहरण किसी डिज़ाइन ऐप में जटिल SVG का इम्पोर्ट या एक्सपोर्ट नहीं जाँचता।

viewBox से खाली किनारे हटाएँ

मूल viewBox में चार संख्याएँ होती हैं: न्यूनतम x, न्यूनतम y, चौड़ाई और ऊँचाई। ये SVG के निर्देशांक क्षेत्र का वह आयत बताती हैं जो दिखाई देने वाले व्यूपोर्ट पर मैप होता है।

उदाहरण में त्रिकोण x=8 से 40 और y=8 से 40 तक है। पाथ डेटा बदले बिना viewBox="0 0 48 48" को viewBox="8 8 32 32" करें। सहेजें और फिर रेंडर करें। खाली किनारे हटने से अब त्रिकोण उसी 48 × 48 व्यूपोर्ट में अधिक जगह भरता है।

यह बदलाव कैनवास मैपिंग बदलता है, पाथ ज्यामिति या मूल width और height नहीं। असली चित्र में stroke और प्रभाव के लिए जगह छोड़ें; तंग ज्यामिति बॉक्स उन्हें काट सकता है। अक्सर सुरक्षित विज़ुअल तरीका पेज या आर्टबोर्ड को चित्र पर फिट करके एक्सपोर्ट की कॉपी जाँचना है। फ़ाइल गलत भौतिक आकार पर इम्पोर्ट हो तो SVG माप और viewBox गाइड देखें।

चित्र गायब, कटा या खिंचा हो तो मूल viewBox वापस रखें और चार मान तथा अनुपात जाँचें। सभी नोड खिसकाकर कैनवास समस्या “ठीक” न करें।

ट्रेस किया गया SVG कब सफ़ाई माँगता है?

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

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

बिखरी संरचना

सरल संरचना

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

PerfectVector में यह प्रक्रिया कैसी है?

PerfectVector तब उपयोगी है जब मूल PNG या JPEG अथवा SVG के अंदर रैस्टर सामग्री से पाथ बनाने हैं। मौजूदा वेक्टर चित्र सुरक्षित रखना हो तो ऊपर के सामान्य एडिटर तरीके लें।

अपने कन्वर्ज़न में यह क्रम रखें:

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

रैस्टर अक्षर ज्यामिति के रूप में बनते हैं, इसलिए उनके संपादन योग्य टाइप किए टेक्स्ट बनने की उम्मीद न करें। महत्वपूर्ण अक्षर, कर्व या छोटी जगह ट्रेस में न बचे तो हाथ से सुधार या दोबारा ड्रॉ करने का विकल्प रखें।

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

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

क्या SVG को VS Code में बदल सकता हूँ? हाँ। छोटे fill बदलाव, माप, viewBox या ज़रूरी ID व क्लास के लिए XML मार्कअप बदलें। कॉपी सहेजें और बाद में रेंडर करें। कर्व का आकार बदलने के लिए विज़ुअल एडिटर लें।

SVG में अलग आकृतियाँ क्यों नहीं चुन पाता? ऑब्जेक्ट का प्रकार देखें। समूह, कई सबपाथ वाला एक पाथ, क्लिप चित्र या एम्बेड इमेज हो सकती है। वास्तविक समूह के अंदर जाएँ या अनग्रुप करें; ज्यामिति के लिए पाथ नोड बदलें; रैस्टर तभी वेक्टराइज़ करें जब पाथ चाहिए।

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

क्या PerfectVector परिणाम अनलॉक करने से पहले बदल सकता हूँ? अपने कन्वर्ज़न में पहले प्रीव्यू मिलाएँ, फिर संपादन और एक्सपोर्ट नियंत्रण लेने से पहले परिणाम अनलॉक करें। एक्सपोर्ट किए SVG को उपयोग वाले ऐप में जाँचें।

स्रोत

1. W3C — Scalable Vector Graphics (SVG) 2 — SVG दस्तावेज़, आकृतियाँ, पाथ और स्टाइल का मॉडल।
2. W3C — SVG में एम्बेड सामग्री — रैस्टर इमेज SVG दस्तावेज़ में एम्बेड रह सकती हैं।
3. W3C — SVG निर्देशांक प्रणाली, रूपांतरण और इकाइयाँ — viewBox मैपिंग और ज्यामिति बनाम व्यूपोर्ट माप।
4. Inkscape — परिचय — एडिटर के प्लेटफ़ॉर्म, SVG फ़ॉर्मैट और ओपन सोर्स की आधिकारिक जानकारी।
5. Adobe — Illustrator में चित्र सहेजना — SVG एक्सपोर्ट सेटिंग और सुरक्षित Illustrator संपादन डेटा।
6. Figma — डिज़ाइन टूलों के बीच सामग्री कॉपी करना — SVG स्थानांतरण और marker/pattern इम्पोर्ट सीमाएँ।
7. Canva — SVG एडिटर — दस्तावेज़ित बुनियादी रंग, आकार और लेआउट प्रक्रिया।
8. PerfectVector — मूल्य नीति — वर्तमान प्रीव्यू, परिणाम अनलॉक और दोबारा डाउनलोड शर्तें।

उपयोगी SVG रखें और उसकी मौजूदा ज्यामिति बदलें। स्रोत रैस्टर है या ट्रेस बदलना है तो मूल इमेज PerfectVector में आज़माएँ, स्रोत से प्रीव्यू मिलाएँ, संपादन से पहले अनलॉक करें और अगले ऐप में एक्सपोर्ट की गई आकृतियाँ व माप जाँचें।