Figma, Canva या WordPress में अपनी SVG फ़ाइलों को कैसे आयात और संशोधित करें?

आपके पास SVG है। अब आगे क्या?

अधिकांश कनवर्टर डाउनलोड बटन पर रुक जाते हैं। लेकिन फ़ाइल बेकार है यदि वह आपके डाउनलोड फ़ोल्डर में रहती है। एक डिज़ाइनर इसे ब्रांडिंग लागू करने के लिए Figma में खोलता है। एक कम्युनिटी मैनेजर इसे पोस्ट बनाने के लिए Canva में डालता है। एक डेवलपर इसे हेडर लोगो के लिए WordPress में डालता है। यह अगला चरण साबित करता है कि PixelToPath एक वास्तविक वर्कफ़्लो में फिट बैठता है, न कि केवल एक डेमो में।

एक PixelToPath SVG स्थिर छवि नहीं है। यह पथों (paths) का एक सेट है: प्रत्येक आकार में भराव (fill) और संभवतः एक सीमा (stroke) होती है। लोगो के नीले रंग को बरगंडी में बदलना, आइकन को अलग करना, 1080x1920 की स्टोरी के लिए बड़ा करना: यह सब उसी टूल में किया जाता है जिसका आप पहले से उपयोग कर रहे हैं, बिना Illustrator में वापस जाए।

Figma, Canva और WordPress को यह प्रारूप क्यों पसंद है

PNG और JPG, एक बार आयात होने के बाद, बिटमैप होते हैं। Figma में PNG लोगो को दोबारा रंगने का मतलब है ऊपर एक लेयर लगाना, पथ का रंग बदलना नहीं। Canva रंगीन बिंदु (swatches) प्रदान नहीं करेगा। WordPress एक भारी फ़ाइल प्रदान करेगा, जो रेटिना डिस्प्ले पर धुंधली होगी। SVG इन तीनों समस्याओं को एक साथ हल करता है।

विशेष रूप से, PixelToPath से एक SVG आपको देता है:

• संपादन योग्य पथ: प्रति आकार एक रंग, Figma (Fill) या Canva (swatches) में संशोधित किया जा सकता है।
• एक हल्की फ़ाइल, Canva की 3 MB सीमा से काफी नीचे, और WordPress साइट पर @2x PNG से तेज़ी से लोड होने वाली।
• फ़ेविकॉन, LinkedIn बैनर या रोल-अप पर समान तीक्ष्णता: केवल एक फ़ाइल।
• एक डिलीवरेबल जिसे आप क्लाइंट को भेज सकते हैं: वे इसे अपने पास मौजूद टूल में खोलते हैं, न कि क्रिएटिव क्लाउड में।

Figma: SVG आयात करें और रंग बदलें

Figma एक SVG को वेक्टर के समूह के रूप में आयात करता है, फोटो के रूप में नहीं। यही इसका पूरा उद्देश्य है: प्रत्येक आकार एक लेयर रहता है जिसे आप दोबारा रंग सकते हैं, स्थानांतरित कर सकते हैं या छिपा सकते हैं।

1. PixelToPath से .svg डाउनलोड करें और अपनी Figma फ़ाइल खोलें।
2. एक्सप्लोरर से फ़ाइल को सीधे कैनवास पर खींचें। विकल्प: File → Place Image, या SVG रखने के लिए Ctrl+Shift+K (Mac पर Cmd+Shift+K)।
3. लेयर एक समूह के रूप में दिखाई देती है। इसके अंदर जाने के लिए डबल-क्लिक करें, या यदि आप एक-एक करके आकारों में हेरफेर करना चाहते हैं तो राइट-क्लिक → Ungroup (Shift+Ctrl+G / Shift+Cmd+G) करें।
4. एक पथ (path) चुनें। दाएँ पैनल में, Fill अनुभाग में, रंगीन बिंदु पर क्लिक करें: हेक्स, स्वैच, आईड्रॉपर। पूरा आकार बदल जाता है, किनारे तेज रहते हैं।
5. मोनोक्रोम लोगो के लिए, समूह के सभी आकारों का चयन करें और एक ही रंग लागू करें। यदि परिणाम अब वेक्टर नहीं है तो Export अनुभाग से SVG, PNG या PDF के रूप में निर्यात करें।

यदि Figma वेक्टर लेयर्स के बजाय एक सपाट छवि दिखाता है, तो फ़ाइल में एक बिटमैप (एन्कैप्सुलेटेड PNG) शामिल था। PixelToPath के ब्लैक एंड व्हाइट या पोस्टर प्रीसेट निर्यात के साथ ऐसा नहीं है। मूल को इन दो मोड में से एक के साथ फिर से कनवर्ट करें, फोटो नहीं।

Canva: SVG छोड़ें और दोबारा रंगें

Canva, Free और Pro दोनों में SVG स्वीकार करता है। रंग बदलना तब काम करता है जब फ़ाइल सरल हो: सपाट रंग, कम नोड्स, कोई ग्रेडिएंट नहीं। यह बिल्कुल वैसा ही है जैसा PixelToPath, पोस्टर या ब्लैक एंड व्हाइट के साथ बनाता है।

1. Canva में, एक डिज़ाइन खोलें। बायाँ पैनल → Uploads → Upload files. अपना .svg चुनें (3 MB से कम; PixelToPath निर्यात इसके काफी नीचे है)।
2. एक बार फ़ाइल आपके अपलोड में आ जाने के बाद, इसे पृष्ठ पर खींचें। इसे कोनों से आकार दें: वेक्टर तेज रहता है, यहां तक कि स्टोरी या A4 प्रारूप में भी।
3. SVG पर क्लिक करें। टूलबार में, रंगीन बिंदु (swatches) दिखाई देते हैं, फ़ाइल के प्रत्येक रंग के लिए एक। एक बिंदु पर क्लिक करें, नया रंग चुनें: Canva इसे उस रंग के सभी आकारों पर लागू करता है।
4. यदि कोई बिंदु दिखाई नहीं देता है, तो SVG बहुत जटिल है (ग्रेडिएंट, बहुत अधिक रंग, फोटो-प्रकार के पथ)। PixelToPath पर वापस आएं, पोस्टर या ब्लैक एंड व्हाइट पर स्विच करें, फिर से निर्यात करें, फिर से आयात करें।

Canva SVG 1.1 प्रोफ़ाइल, एक ही रंग के समूहीकृत आकार और शून्य बनावट (texture) की अनुशंसा करता है। PixelToPath के लोगो प्रीसेट पहले से ही इन बाधाओं का सम्मान करते हैं। फ़ाइल को "तैयार" करने के लिए Illustrator का उपयोग करने की आवश्यकता नहीं है।

WordPress: जोखिम खोले बिना SVG अपलोड की अनुमति दें

WordPress डिफ़ॉल्ट रूप से SVG को अस्वीकार करता है, और यह कोई सनक नहीं है। SVG XML है: इसमें JavaScript, बाहरी इकाइयाँ, XSS पेलोड हो सकता है। एक विज़िटर, या समझौता किया गया संपादक खाता, जो एक दुर्भावनापूर्ण SVG अपलोड करता है, व्यवस्थापक में कोड निष्पादित कर सकता है। इसलिए अवरोधन। आपको प्रारूप को अनुमति देनी होगी और फ़ाइल को साफ़ करना होगा।

केवल functions.php में image/svg+xml न जोड़ें। फ़ाइल को साफ़ किए बिना, आप एक भेद्यता खोलते हैं। सुरक्षित तरीका: एक अनुरक्षित प्लगइन जो स्क्रिप्ट, ऑनलोड इवेंट और XML संस्थाओं को साफ़ करता है। Safe SVG (10up), एक मिलियन से अधिक इंस्टॉलेशन।

1. WordPress व्यवस्थापक में: Plugins → Add New. Safe SVG (लेखक: 10up) खोजें। स्थापित करें और सक्रिय करें।
2. Settings → Media पर जाएँ। SVG अपलोड को प्रशासकों (या विश्वसनीय भूमिकाओं) तक सीमित करें। यदि साइट में कई योगदानकर्ता हैं, तो सभी लेखक खातों के लिए प्रारूप न खोलें।
3. Media → Add New. PixelToPath .svg छोड़ें। प्लगइन इसे आयात पर साफ़ करता है और लाइब्रेरी में पूर्वावलोकन दिखाता है, जो WordPress मूल रूप से नहीं करता है।
4. किसी पोस्ट या पृष्ठ में, एक छवि ब्लॉक डालें और SVG चुनें। हेडर लोगो के लिए, Customize / Site Identity का उपयोग करें, या थीम टेम्प्लेट (साइट संपादक) में एक छवि ब्लॉक का उपयोग करें।
5. डेवलपर विकल्प: मीडिया लाइब्रेरी से न गुजरें। फ़ाइल को थीम (assets/logo.svg) में रखें और टेम्प्लेट में इसे संदर्भित करें, या इसे CSS के साथ स्टाइल करने के लिए इनलाइन करें। कोई अपलोड नहीं, इसलिए कोई मीडिया लाइब्रेरी हमले की सतह नहीं।

Safe SVG यह भी सीमित कर सकता है कि किसे अपलोड करने का अधिकार है। प्लगइन को अपडेट रखें: फ़ाइल की सफ़ाई ही वास्तविक नियंत्रण है, केवल "SVG अनुमति दें" बॉक्स नहीं।

इन टूल में कौन सा PixelToPath SVG पेस्ट करें?

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

• लोगो, आइकन, लेटरिंग: ब्लैक एंड व्हाइट या पोस्टर। ये सपाट रंग हैं, Figma और Canva उन्हें एक क्लिक में दोबारा रंग देते हैं।
• यदि आप रंग बदलने की योजना बना रहे हैं तो फोटो से बचें। यह मोड कई छोटे आकार बनाता है; Canva अक्सर कोई उपयोगी रंग बिंदु नहीं दिखाएगा।
• कनवर्ट करने से पहले मूल को क्रॉप करें: कम पृष्ठभूमि, कम नोड्स, Figma लेयर में अधिक पठनीय SVG।
• प्रति उपयोग एक संस्करण: Figma के लिए मोनोक्रोम SVG (ब्रांडिंग), Canva के लिए रंगीन SVG (पोस्ट), WordPress के लिए वही साफ़ की गई फ़ाइल (हेडर)।

जहाँ यह वर्कफ़्लो दैनिक जीवन को बदलता है

जैसे ही SVG टूल में आता है, आप प्रत्येक भिन्नता पर दोबारा कनवर्ट करना बंद कर देते हैं:

• Figma ब्रांडिंग: क्लाइंट का PNG एक घटक बन जाता है जिसे आप फिर से बनाए बिना रंग बदलते हैं (प्राथमिक, उलटा, मोनोक्रोम)।
• Canva पोस्ट: केवल एक SVG, छह अभियान रंग, साफ़ स्टोरीज़ और हिंडोला।
• WordPress लोगो: हेडर में एक फ़ाइल, मोबाइल और रेटिना पर स्पष्ट, ऐतिहासिक PNG से हल्की।
• फ्रीलांस डिलीवरेबल: आप SVG प्लस Figma / Canva निर्देश देते हैं। क्लाइंट अब अटका नहीं है।
• इंटरफ़ेस आइकन: उन्हें एक साथ Figma में आयात करें, उन्हें 24 px ग्रिड पर संरेखित करें, सेट निर्यात करें।

फ़ोटो के लिए PNG रखें। किसी भी चीज़ के लिए जिसका रंग बदलना चाहिए या स्पष्ट रहना चाहिए, PixelToPath + Figma / Canva / WordPress की जोड़ी पर्याप्त है।