Penpot SVG आयात: डिजाइन में संपादन योग्य आकृतियां लाएं

Penpot में SVG आयात करने के लिए डिजाइन फ़ाइल खोलकर .svg कैनवस पर खींचें या टूलबार के चित्र टूल से फ़ाइल चुनें। डैशबोर्ड की Import files कमांड Penpot परियोजना फ़ाइलों के लिए है। आइकन रखना हो तो डिजाइन के अंदर शुरू करें। Penpot की लेयर जोड़ने की गाइड और परियोजना आयात दस्तावेज अलग मार्ग बताते हैं।

आर्टवर्क दिखाई देने पर जांचें कि क्या आप 1 रंग वाले क्षेत्र को बदल सकते हैं और 1 आकृति की सीमा का संपादन कर सकते हैं। सही दिखने वाले आइकन में भी बदलाव करना कठिन हो सकता है। स्रोत पहले से वेक्टर है तो जरूरत पड़ने पर उसे सुधारें या दोबारा निर्यात करें। PNG या JPG को तभी ट्रेस करें जब आपको पिक्सेल से आकृतियां वापस हासिल करनी हों।

दोबारा उपयोग से पहले आयात जांचें

मूल SVG संभालकर रखें, किट का प्रतिनिधित्व करने वाला 1 आइकन आयात करें और उसकी प्रति पर काम करें। उसका रूप, 1 भराव, 1 वक्र और संपादन योग्य टेक्स्ट, यदि मौजूद हो, जांचें। पूरी किट पर यही प्रक्रिया दोहराने से पहले एक अलग SVG निर्यात करें और उसकी मूल फ़ाइल से तुलना करें।

कैनवस से शुरू करें, फिर लेयर देखें

वह Penpot फ़ाइल खोलें जिसमें आर्टवर्क रखना है। सहेजे गए SVG को खाली जगह में डालें, ताकि बाकी डिजाइन से अलग उसकी जांच कर सकें। खींचकर डालना विफल हो तो चित्र टूल के फ़ाइल चयन विकल्प का उपयोग करें। इससे आप जांच सकते हैं कि समस्या खींचकर डालने की प्रक्रिया में है या फ़ाइल में।

आयात किए गए आर्टवर्क को चुनें और Layers पैनल में उसकी प्रविष्टि का विस्तार करें। समूह सामग्री को व्यवस्थित रखने में उपयोगी होता है; उसका होना इस बात का प्रमाण नहीं है कि SVG बिटमैप बन गया है। आप पैनल से समूह के भीतर की चाइल्ड लेयर चुन सकते हैं या समूह में प्रवेश करने के लिए दो बार क्लिक कर सकते हैं। Penpot में Ctrl-click या Command-click से भीतर के ऑब्जेक्ट का सीधा चयन भी किया जा सकता है। इन नियंत्रणों की जानकारी लेयर चयन गाइड में है।

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

शुरुआत में सभी समूहों को अनग्रुप करने या सब कुछ फ्लैटन करने से बचें। पहले उस हिस्से को पहचानें जिसे आप बदलना चाहते हैं। समूह की चाइल्ड लेयर पहले से जरूरी नियंत्रण देती हैं तो समूह को बनाए रखें।

एक भराव और एक वक्र जांचें

ऐसा छोटा आइकन लें जिसके हिस्से स्पष्ट रूप से अलग दिखाई देते हों। गमले में लगे पौधे का आइकन उपयोगी उदाहरण है: पत्तियों का रंग बदले बिना गमले का रंग बदलना संभव होना चाहिए, और पूरे पौधे का रूप बिगाड़े बिना 1 पत्ती का संपादन हो सकना चाहिए।

आयात किए गए आइकन की प्रति पर ये जांच करें:

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

गमले और पत्तियों का रंग एक साथ बदलता है तो चयन और स्रोत की संरचना जांचें। हो सकता है कि आपने बाहरी समूह चुना हो, या स्रोत में कई क्षेत्र 1 पाथ में जुड़े हों। रंग सफलतापूर्वक बदलने से यह साबित नहीं होता कि हर आकृति की सीमा Penpot का अलग पाथ है।

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

फ़ाइल बदलने से पहले लक्षण का निदान करें

बिना बदलाव वाले SVG को संदर्भ के रूप में रखें। उसे ब्राउज़र में खोलें और वहां दिखाई देने वाले रूप की तुलना Penpot में आयात किए गए रूप से करें। ब्राउज़र में ही उसका रूप गलत है तो Penpot की प्रति सुधारने से पहले स्रोत निर्यात पर लौटें।

गायब स्ट्रोक और अदृश्य कला

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

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

केवल इसलिए हर style, मास्क या परिभाषा न हटाएं कि किसी पुराने वैकल्पिक उपाय में ऐसा बताया गया है। इन एलिमेंट में रूप से जुड़ी जानकारी हो सकती है। समस्या स्रोत में स्ट्रोक बनाने के तरीके में है तो गायब SVG स्ट्रोक के विस्तृत निदान का पालन करें। स्ट्रोक को आउटलाइन में बदलने से पहले संपादन योग्य मास्टर संभालकर रखें।

सही दिखता लेकिन न संपादित होता टेक्स्ट

बटन के लेबल में 1 शब्द बदलकर देखें। लोगो के लिए तय करें कि क्या अक्षरों की आकृतियां सुरक्षित रखना ही पर्याप्त है। ये अलग-अलग जरूरतें हैं।

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

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

PerfectVector कब उपयोगी है

आपके पास रास्टर आइकन या चित्र है और Penpot में संपादन योग्य आकृति-सीमाएं चाहिए तो PerfectVector उपयोगी है। PNG या JPG को SVG पाथ में बदलें, बाहरी आकृति और रंग वाले क्षेत्र जांचें, फिर परिणाम आयात करके 1 भराव और 1 वक्र वाला परीक्षण करें। ट्रेस किए गए परिणाम को फिर भी उस आर्टवर्क के अनुसार परखना जरूरी है जिसे आप इस्तेमाल करना चाहते हैं।

SVG में रखा गया रास्टर चित्र केवल कंटेनर बदलने से पत्ती या गमले की संपादन योग्य आकृति-सीमाएं हासिल नहीं करता। Penpot के आयातक में चित्रों के लिए अलग हैंडलर है। वह उस चित्र को Penpot के उन पाथ ऑब्जेक्ट में नहीं बदलता जिन्हें आयातक कोड में दूसरी जगह संभाला जाता है।

मूल वेक्टर निर्यात उपलब्ध है तो उसका उपयोग करें। सरल इंटरफ़ेस प्रतीक को Penpot की अपनी आकृतियों से बनाने पर ट्रेसिंग की तुलना में ज्यामिति पर अधिक सोच-समझकर नियंत्रण मिल सकता है। फोटो और अधिक बनावट वाले आर्टवर्क को चित्र ही रखें, जब उनके पिक्सेल डिजाइन का हिस्सा हों। चित्र वेक्टराइज़ेशन का परिचय बताता है कि ट्रेसिंग क्या वापस हासिल कर सकती है और क्या बदलती है।

किट बनाने से पहले एक नमूना निर्यात करें

जिस डिजाइन पर आप काम कर रहे हैं उसे Penpot में रखें और वितरण के लिए अलग SVG निर्यात करें। आइकन या उसका बोर्ड चुनें, Design पैनल के Export भाग में प्लस बटन से निर्यात प्रीसेट जोड़ें और SVG चुनें। Penpot की लेयर निर्यात गाइड में यह प्रक्रिया बताई गई है।

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

बड़ी किट में नमूना जोड़ने से पहले पुष्टि करें:

• जिन क्षेत्रों के रंग अलग-अलग बदलने हैं, उन्हें स्वतंत्र रूप से चुना जा सकता है।
• जिन आकृति-सीमाओं का आकार आप बदलना चाहते हैं, उनके लिए उपयोगी संपादन नियंत्रण उपलब्ध हैं।
• काम वाले डिजाइन में संपादन योग्य लेबल टेक्स्ट के रूप में बने रहते हैं।
• निर्यात किए गए आइकन की सीमाएं और पैडिंग आपकी मंशा के अनुसार हैं।
• इंटरफ़ेस में इस्तेमाल होने वाले वास्तविक आकार पर भी आइकन स्पष्ट पहचान में आता है।

फिर पूरे सेट में यही जांच करें। हर अलग आयात सही होने के बाद PNG आइकन से SVG UI किट बनाने की प्रक्रिया में साझा ग्रिड, देखने में संतुलित आकार और नाम रखने के नियम जोड़े जाते हैं।

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

Penpot Import files SVG क्यों अस्वीकार करता है? यह डायलॉग Penpot परियोजना फ़ाइलें आयात करता है। SVG ग्राफिक रखने के लिए डिजाइन फ़ाइल खोलें और चित्र टूल इस्तेमाल करें या SVG को कैनवस पर खींचकर डालें।

SVG आयात हर हिस्सा संपादन योग्य बनाता है? सामान्य वेक्टर आकृतियां Penpot के अपने ऑब्जेक्ट बन सकती हैं, लेकिन दूसरी सामग्री कच्ची SVG सामग्री या चित्र के रूप में रह सकती है। आर्टवर्क को दोबारा इस्तेमाल करने से पहले उस भराव, वक्र या टेक्स्ट बदलाव का परीक्षण करें जिसकी आपको जरूरत है।

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

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

स्रोत

1. Penpot: लेयर — आर्टवर्क डालना, चाइल्ड ऑब्जेक्ट चुनना और पाथ के नोड संपादित करना।
2. Penpot: Penpot फ़ाइल निर्यात और आयात — Penpot की अपनी परियोजना आयात करने का मार्ग, जो कैनवस पर आर्टवर्क डालने से अलग है।
3. Penpot: SVG आकृति आयातक — जारी संस्करण में Penpot की अपनी आकृतियों, चित्रों और कच्ची SVG सामग्री को अलग-अलग संभालना।
4. Penpot: कच्ची SVG सामग्री के विकल्प — केवल रूप बदलने वाले नियंत्रणों से यह तय नहीं होता कि Penpot के अपने पाथ की तरह संपादन संभव है।
5. Penpot: रंग और स्ट्रोक — निदान की जांचों में इस्तेमाल होने वाले भराव, स्ट्रोक और सिरों की शैली के नियंत्रण।
6. Penpot: टेक्स्ट और टाइपोग्राफी — Penpot की अपनी टेक्स्ट लेयर बनाना और उनकी सामग्री संपादित करना।
7. Penpot: लेयर निर्यात — लेयर या बोर्ड के लिए SVG निर्यात प्रीसेट जोड़ना।

---

आपका स्रोत PNG या JPG है और आपको संपादन योग्य आकृतियां चाहिए तो PerfectVector से SVG तैयार करें। उसे Penpot में आयात करें, 1 भराव बदलें और आर्टवर्क को अपनी डिजाइन किट में शामिल करने से पहले 1 वक्र का परीक्षण करें।