AnyToSVG

वर्कफ़्लो · 7 मिनट का पढ़ना

PNG या JPG लोगो को SVG में कैसे बदलें (और साफ नतीजा पाएं)

ट्रेसर उतना ही अच्छा होता है जितना अच्छा आप उसे देते हैं। सोर्स फाइल और दो सेटिंग पर दस मिनट की सावधानी से फर्क पड़ता है कि वेक्टर बैनर पर छपने लायक बनेगा या उसे दोबारा बनाना पड़ेगा।

01 · सोर्स

जो सबसे अच्छा बिटमैप मिल सके, उससे शुरू करें

ज़्यादातर खराब वेक्टर पहले खराब बिटमैप थे।

कन्वर्टर खोलने से पहले एक मिनट लगाकर लोगो का सबसे बड़ा और साफ वर्ज़न खोजें। प्राथमिकता के क्रम में:

  1. पहले से बना वेक्टर। जिसमें लोगो डिज़ाइन हुआ था वह .ai, .eps, .pdf या .svg मांगें। वह मिल जाए तो ट्रेसिंग की ज़रूरत ही नहीं।
  2. ट्रांसपेरेंट बैकग्राउंड वाली PNG, 500–2000 पिक्सल की। PNG लॉसलेस है, इसलिए किनारे ठीक वैसे ही हैं जैसे डिज़ाइनर ने बनाए।
  3. बड़ी JPG। 800 px से ऊपर सादे रंगों वाले आर्टवर्क के लिए ठीक है; कंप्रेशन नॉइज़ आकारों के मुकाबले छोटा रहता है। उससे नीचे ट्रेस में JPEG के ब्लॉक और रिंगिंग दिखने लगते हैं।
  4. स्क्रीनशॉट या छोटी वेब इमेज। चलती है — छोटी इमेज ट्रेस से पहले बड़ी की जाती हैं — पर कर्व ज़्यादा गोल आएंगे और छोटा टेक्स्ट आपस में मिल सकता है।

जो भी हो, उसे पहले इमेज एडिटर में रीसाइज़ न करें। AnyToSVG 2048 px तक ट्रेस करता है और छोटी इमेज को ट्रेसिंग के लिए चुने फिल्टर से खुद बड़ा करता है; बीच में एक और रीसैंपल सिर्फ धुंधलापन जोड़ता है।

बस जल्दी वाला तरीका चाहिए? Logo to SVG पेज पर कन्वर्टर और पांच ज़रूरी सेटिंग एक ही स्क्रीन पर हैं।
वेबसाइट से लिया स्क्रीनशॉट? पहले लोगो पर राइट-क्लिक करके इमेज नए टैब में खोलें चुनें — पेज के पीछे की फाइल अक्सर दिख रही इमेज से कई गुना बड़ी होती है।

02 · इमेज डालें

पहला पास ऑटो-डिटेक्शन को करने दें

फाइल को कन्वर्टर पर खींचकर छोड़ें (या Ctrl+V से पेस्ट करें)। एक सेकंड के भीतर ओरिजिनल के बगल में SVG दिख जाएगा, और सेटिंग पैनल दिखाएगा कि क्या पहचाना गया:

  • कलर मोड, रंगों की संख्या उतनी जितने अलग रंग मिले — ज़्यादातर लोगो के लिए 2 से 8 — या
  • ब्लैक & व्हाइट मोड अगर इमेज हल्के पर गहरी लाइन ड्रॉइंग है, थ्रेशोल्ड और स्याही का रंग इमेज से चुने हुए।

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

ऑटो-डिटेक्शन के बाद सेटिंग्स पैनल: कलर मोड, छह रंग, पहचाने गए स्वैच और ट्रांसपेरेंट बैकग्राउंड चेकबॉक्स
छह रंगों वाला लोगो डालने के बाद सेटिंग्स पैनल। स्वैच के नीचे का डॉट बैकग्राउंड रंग को चिह्नित करता है।

03 · बैकग्राउंड

बैकग्राउंड ट्रांसपेरेंट करें

एक चेकबॉक्स, और उसे "बाहर" और "अंदर" का फर्क पता है।

सफेद (या किसी भी सादे) बैकग्राउंड पर रखा लोगो लगभग हमेशा उसके बिना ही देना चाहिए। ट्रांसपेरेंट बैकग्राउंड टिक करें: इमेज के किनारे को छूने वाला रंग — स्वैच की कतार में डॉट से चिह्नित — SVG से हट जाता है।

सिर्फ बाहरी इलाका जाता है। अगर लोगो में खुद वही रंग है — सफेद बैकग्राउंड पर सफेद अक्षर, किसी आकार के अंदर सफेद हाइलाइट — तो वे घिरे हिस्से बने रहते हैं, क्योंकि वे किनारे से जुड़े नहीं हैं। कोई ज़रूरी चीज़ गायब तो नहीं हुई, यह देखने के लिए प्रीव्यू का बैकग्राउंड डार्क कर लें (प्रीव्यू के ऊपर के चौकोर बटन)।

कोई और रंग हटाने के लिए उसके स्वैच पर क्लिक करें: वह ग्रे हो जाता है, उस पर लकीर आ जाती है और उसके आकार गायब हो जाते हैं। वापस लाने के लिए फिर क्लिक करें। ड्रॉप शैडो, स्कैन की कोई बेकार निशानी, या ऐसा रंग जो सिर्फ एंटी-एलियासिंग की वजह से है, उसे हटाने का यह तेज़ तरीका है।

ब्लैक-एंड-व्हाइट मोड में बैकग्राउंड वैसे ही पारदर्शी होता है — सिर्फ गहरे (या इन्वर्ट के साथ हल्के) आकार ट्रेस होते हैं।

04 · किनारे

दांतेदार, उबड़-खाबड़ या टूटे किनारे ठीक करना

प्रीव्यू में ज़ूम करें (उस पर स्क्रॉल करें, या + दबाएं) और एक कर्व और एक कोना जांचें। फिर:

  • लहराते कर्व — सोर्स छोटा या कंप्रेस्ड है। स्मूदिंग बढ़ाएं या स्मूथ प्रीसेट चुनें। JPG हो तो एडवांस्ड में पहले नॉइज़ घटाएं भी टिक करें।
  • गोल हो गए कोने जो तीखे होने चाहिए — स्मूदिंग घटाएं या शार्प चुनें। Potrace हर कोने पर अलग तय करता है; 0.5 से कम वैल्यू लगभग सब कोने रखती है।
  • धूल और छोटे टापू — धब्बे हटाएं बढ़ाएं। उतने सोर्स पिक्सल से छोटी हर चीज़ अनदेखी हो जाती है। 2 px एंटी-एलियासिंग का मलबा साफ कर देता है; स्कैन को 10 या ज़्यादा लग सकते हैं।
  • पतली लाइनें जो टूट जाती हैं — शायद वे धब्बे के साइज़ से पतली हैं, या कोई रंग पड़ोसी में मिल गया। धब्बे हटाएं घटाएं, या रंगों की संख्या एक बढ़ाएं।

05 · रंग

रंगों की संख्या सही रखना

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

  • सादा लोगो: ठीक उतने रंग जितने डिज़ाइन में हैं। ऑटो-डिटेक्शन आम तौर पर इसे सही पकड़ता है।
  • ग्रेडिएंट वाला लोगो: ग्रेडिएंट पहचानें टिक रहने दें। स्मूद शेड वाले हिस्से पर लीनियर या रेडियल ग्रेडिएंट बैठाया जाता है और वह असली <linearGradient> / <radialGradient> फिल वाले एक आकार के रूप में लिखा जाता है — स्वैच की कतार उसे ग्रेडिएंट स्वैच के रूप में दिखाती है। तब रंगों की संख्या सिर्फ सादे हिस्सों पर लागू होती है। अगर कोई ग्रेडिएंट पकड़ में नहीं आता (भारी JPEG नॉइज़, या आकार के साथ मुड़ती शेडिंग), तो पहले नॉइज़ घटाएं टिक करें; न बने तो रंगों की संख्या बढ़ाएं और शेडिंग ऐसी पट्टियां बन जाएगी जिन्हें आप अपने वेक्टर एडिटर में दोबारा बना सकते हैं।
  • फोटो या पेंटिंग: पोस्टराइज़्ड लुक के लिए 12–32। देखें ट्रेसिंग क्या कर सकती है और क्या नहीं।

कलर लेयर को स्टैक्ड पर ही रहने दें, जब तक आप आकारों को असल में काटने या एडिटर में अलग करने वाले न हों; पास-पास के रंगों के बीच बारीक गैप यही रोकता है।

ग्रेडिएंट पहचान चालू करके ट्रेस की गुब्बारे की पट्टियां: स्मूद शेडिंग, हर पट्टी का एक आकार
ग्रेडिएंट पहचानें चालू — 6 ग्रेडिएंट, 15 आकार, 6.7 KB।
वही पट्टियां 13 सादे रंगों से ट्रेस की हुई: तीखे किनारों वाली पट्टियां
बंद — 13 रंग, 29 आकार, 56 KB, और पट्टियां।

06 · जांचें और दें

कहीं भेजने से पहले

तीस सेकंड की जांच दोबारा प्रिंट कराने से बचाती है।

  1. तुलना व्यू में डिवाइडर को पूरी इमेज पर खींचें। लाइन गुज़रने पर जो चीज़ आकार बदलती है, उसे करीब से देखना बनता है।
  2. सबसे छोटे टेक्स्ट या सबसे पतली लाइन पर 400 % तक ज़ूम करें। यहां पढ़ने लायक है तो बैनर पर भी पढ़ने लायक होगी।
  3. नतीजा पैनल के आंकड़े पढ़ें। साफ लोगो मुट्ठीभर आकार और कुछ किलोबाइट का होता है; सैकड़ों आकार आम तौर पर नॉइज़, JPG या ज़्यादा रंगों की निशानी हैं।
  4. SVG डाउनलोड करें, फिर उसे एक बार ब्राउज़र या वेक्टर एडिटर में खोलें। फाइल सादी है: हर रंग का एक <path> और fill, ओरिजिनल पिक्सल कोऑर्डिनेट में, न ग्रुप न ट्रांसफॉर्म — हाथ से रंग बदलना आसान।
  5. किसी को बिटमैप ही चाहिए तो PNG 2× या 4× बटन इस्तेमाल करें: वे वेक्टर से रेंडर होते हैं, इसलिए नतीजा आपकी शुरुआती फाइल से ज़्यादा शार्प होता है।

और अगर नतीजा काफी अच्छा नहीं है — बहुत धुंधला सोर्स, बिज़नेस कार्ड की फोटो, नरम परछाइयों वाला लोगो — तो यह दोबारा बनाने का इशारा है। ट्रेसिंग जो है उसकी वफादार कॉपी बनाती है; जो पिक्सल में कभी था ही नहीं, उसे गढ़ नहीं सकती।

पढ़ते-पढ़ते आज़माएं

कन्वर्टर फ्री है, अकाउंट नहीं चाहिए, और लगभग एक सेकंड में SVG आपकी ओरिजिनल इमेज के बगल में दिख जाता है।

कन्वर्टर खोलें