SVGcode इमेज ट्रेसिंग: निर्यात की गई आकृतियाँ जाँचें

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

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

अपनी इमेज पर आज़माएँ

पूरा टूल खोलें

PNGJPGWEBPPNGSVGअपनी इमेज यहाँ डालेंया क्लिक करें · पेस्ट करें ⌘Vइमेज चुनेंजाँचने के लिए इमेज छोड़ें

यह मुफ़्त है। इमेज डालें और बिना साइन-अप किए अपने वेक्टर का प्रीव्यू देखें।

SVGcode क्या ट्रेस करता है, और क्या तैयारी करनी है

SVGcode रेखापुंज छवियों को SVG वेक्टर ग्राफ़िक्स में परिवर्तित करता है। इसके लेखक ने Potrace-आधारित वेबअसेंबली कार्यान्वयन का वर्णन किया है जो रंग दर रंग का पता लगाता है; आधिकारिक स्रोत भंडार दस्तावेज़ जो कार्यान्वयन करते हैं। यह दृष्टिकोण की व्याख्या करता है, लेकिन निर्यात की गई फ़ाइल आपकी अपनी कलाकृति का प्रमाण है।

PNG या अन्य समर्थित रेखापुंज छवि की एक प्रति, एक ब्राउज़र जो SVGcode तक पहुंच सकता है, और कलाकृति को संसाधित करने की अनुमति से प्रारंभ करें। नीचे दिए गए क्लिपबोर्ड रूट के लिए, आपके ब्राउज़र को छवि क्लिपबोर्ड एक्सेस की अनुमति देनी होगी। कॉपी किए गए SVG मार्कअप को सहेजने के लिए एक सादा-पाठ संपादक, साथ ही पूर्णता जांच के लिए एक SVG व्यूअर या संपादक उपलब्ध रखें।

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

1. छवि लोड करें और ट्रेस मोड चुनें

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

जब अलग-अलग रंग के क्षेत्र महत्वपूर्ण हों तो Color SVG (रंग SVG) चुनें। Monochrome SVG (मोनोक्रोम SVG) का उपयोग करें जब एकल-रंग सिल्हूट इच्छित परिणाम हो। इस वॉकथ्रू में संपूर्ण रूप से कलर SVG का उपयोग किया गया; यह एक अलग मोनोक्रोम परीक्षण की रिपोर्ट नहीं करता है।

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

2. एक दृश्यमान विवरण को ध्यान में रखते हुए सेटिंग्स बदलें

एक दोष से शुरू करें जिसे आप इंगित कर सकते हैं, जैसे कलाकृति के बाहर अवांछित बिंदु या एक छोटा सा उद्घाटन जो गायब हो जाता है। एक नियंत्रण बदलें, पूर्वावलोकन के अपडेट होने तक प्रतीक्षा करें, फिर उस विवरण की दोबारा तुलना करें।

सप्रेस स्पेकल्स छोटे क्षेत्रों को हटा देता है। इसे बढ़ाने से भटके हुए बिंदुओं में मदद मिल सकती है, लेकिन उन छोटे विवरणों की जांच करें जिन्हें आप रखना चाहते हैं। इनपुट छवि को पोस्टराइज़ करें ट्रेसिंग से पहले रंग भिन्नता को कम करता है; पोस्टराइजेशन रंगों को कम स्तरों में समूहित करता है। लेखक का SVGcode वॉकथ्रू नियंत्रण और प्रति-चैनल पोस्टराइजेशन दोनों की व्याख्या करता है।

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

चित्रण

हमारे मूल फ्लैट-रंग परीक्षण ने क्या दिखाया

हमने एक 512 × 512 PNG को एक पारदर्शी पृष्ठभूमि, एक उद्घाटन के साथ एक नेवी आयताकार फ्रेम, एक सोने का आयत और एक अतिव्यापी चैती आयत के साथ बनाया। हमने उस मूल छवि को सार्वजनिक SVGcode ऐप में चिपकाया, Color SVG, सप्रेस स्पेकल्स 2 और स्ट्रोक चौड़ाई 0 का उपयोग किया, फिर दो वास्तविक SVG आउटपुट कॉपी किए।

पहली बार पोस्टराइज़ इनपुट छवि का उपयोग लाल, हरे और नीले रंग के साथ 7 चरणों में और अल्फा 1 चरण में किया गया। दूसरे ने पोस्टराइज़ इनपुट इमेज को अनचेक करके उसी छवि का उपयोग किया। उस दूसरी अवस्था में RGB और अल्फ़ा नियंत्रण अक्षम हो गए।

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

3. SVG की प्रतिलिपि बनाएँ और वास्तविक मार्कअप को सुरक्षित रखें

जब पूर्वावलोकन तैयार हो जाए, तो Copy SVG (कॉपी SVG) चुनें। क्लिपबोर्ड को पढ़ने या चिपकाने से पहले Optimizing SVG (SVG को अनुकूलित करना) समाप्त होने तक प्रतीक्षा करें। हमारी दौड़ में, तत्काल क्लिपबोर्ड पढ़ा गया खाली था; अनुकूलन के बाद इसे पढ़ने से SVG मार्कअप वापस आ गया।

मार्कअप को एक सादे-पाठ संपादक में चिपकाएँ और इसे .svg एक्सटेंशन, जैसे artwork-trace.svg के साथ सहेजें। पुष्टि करें कि इसमें एक <svg> तत्व है और यह स्क्रीनशॉट या एक रिच-टेक्स्ट दस्तावेज़ के बजाय </svg> को बंद कर रहा है। प्रत्येक सेटिंग संस्करण के लिए एक अलग फ़ाइल नाम रखें ताकि बाद में निर्यात आपके संदर्भ को प्रतिस्थापित न कर दे।

यह कॉपी-मार्कअप मार्ग है जिसे हमने पूरा किया है। SVGcode सेव SVG भी प्रदर्शित करता है, लेकिन यह वॉकथ्रू मूल फ़ाइल-सेव संवाद व्यवहार या किसी अन्य ऐप में सफल आयात को साबित नहीं करता है।

4. सहेजी गई फ़ाइल में रंग, खुलेपन और कैनवास का निरीक्षण करें

सहेजे गए SVG को अछूते स्रोत के बगल में किसी व्यूअर या संपादक में खोलें। इन्हें अलग से जांचें:

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

SVG एक यौगिक पथ के अंदर कई आकृतियों के साथ एक उद्घाटन का प्रतिनिधित्व कर सकता है; SVG पथ मानक उपपथ और छिद्रों का वर्णन करता है। आपको प्रत्येक दृश्यमान सीमा के लिए एक अलग पथ तत्व की आवश्यकता नहीं है। इसके विपरीत, अकेले कम पथ गणना यह साबित नहीं करती है कि सभी इच्छित विवरण बच गए हैं।

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

पहले असफल चेक से पुनर्प्राप्त करें

यदि कोई छेद गलत रहता है, तो SVG छेद समस्या निवारण मार्गदर्शिका लापता ट्रेस ज्यामिति को भरण-नियम व्याख्या से अलग करता है। डायरेक्ट क्लीनअप टूल के साथ डेस्कटॉप ट्रेसिंग वर्कफ़्लो के लिए, Inkscape ट्रेस बिटमैप देखें।

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

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

क्या SVGcode वास्तविक SVG पथों में PNG का पता लगा सकता है?

हाँ। हमारे मूल फ्लैट-रंग PNG ने कॉपी किए गए SVG मार्कअप का उत्पादन किया जिसमें तीन पथ और कोई एम्बेडेड छवि नहीं थी। अपनी स्वयं की निर्यात की गई फ़ाइल का निरीक्षण करें; वह परिणाम प्रत्येक छवि के लिए समान संरचना या निष्ठा की गारंटी नहीं देता है।

क्या पोस्टराइजेशन बंद करने से मूल रंग सुरक्षित रहते हैं?

हमारे नियंत्रित परीक्षण में ऐसा नहीं हुआ. दोनों सेटिंग्स ने मूल ठोस-रंग मानों को बदल दिया। अपने इच्छित पैलेट के साथ निर्यातित भरणों की तुलना करें और सटीक रंग मायने रखने पर उन्हें सही करें।

SVG कैनवास मेरे PNG आकार से भिन्न क्यों है?

हमारे परीक्षण में कॉपी किए गए SVG ने 512 × 512 इनपुट से 1024 × 1024 व्यूबॉक्स का उपयोग किया। यह मानने के बजाय कि स्रोत पिक्सेल आयाम बरकरार रहेंगे, निर्यात किए गए कैनवास, कलाकृति सीमाओं और इच्छित डिस्प्ले आकार का अलग से निरीक्षण करें।

मुझे कैसे पता चलेगा कि कोई छिद्र पारदर्शी है?

सहेजे गए SVG के पीछे एक विपरीत पृष्ठभूमि रखें। इसे उद्घाटन के माध्यम से दिखाना चाहिए। यदि ऐसा नहीं होता है, तो निरीक्षण करें कि क्या निशान ने आंतरिक रूपरेखा खो दी है या वहां एक चित्रित आकृति बनाई है।

स्रोत

1. SVGcode ऐप - छवि-अनुरेखण इंटरफ़ेस और वर्तमान नियंत्रण।
2. SVGcode लेखक का वेब.डेव पर वॉकथ्रू - रंग-दर-रंग अनुरेखण, धब्बेदार दमन और पोस्टराइजेशन।
3. आधिकारिक SVGcode रिपॉजिटरी - परियोजना कार्यान्वयन और स्रोत दस्तावेज़ीकरण।
4. W3C SVG पथ - यौगिक पथ, उपपथ और उद्घाटन।