AnyToSVG

हमारे बारे में

विज़ार्ड के बिना वेक्टराइज़र

AnyToSVG बिटमैप को SVG में उसी तरह के एल्गोरिद्म से बदलता है जो जानी-मानी ऑनलाइन सर्विस इस्तेमाल करती हैं — लेकिन उन्हें आपके ब्राउज़र के अंदर चलाता है, कोई सेटिंग छूने से पहले नतीजा दिखा देता है, और कभी साइन-इन नहीं मांगता।

क्यों

मैंने इसे क्यों बनाया

AnyToSVG और IconEditor.org के डेवलपर की ओर से एक नोट।

मैं करीब तीस साल से सॉफ्टवेयर बना रहा हूं, और उसका हैरान करने वाला बड़ा हिस्सा एक छोटे, उबाऊ काम में गया है: किसी का लोगो ऐसे फॉर्मेट में पहुंचाना जो बड़ा-छोटा हो सके। क्लाइंट PNG भेजता है, प्रिंट शॉप को SVG चाहिए, और जिस ऑनलाइन कन्वर्टर पर मैं जाता हूं वह अपलोड की कतार, मॉडल पिकर, तीन पैलेट के विकल्प, क्वालिटी पैनल, कलर-ग्रुपिंग पैनल से स्वागत करता है — और जब प्रीव्यू आखिरकार ठीक दिखता है, तब साइन-इन फॉर्म और क्रेडिट काउंटर।

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

आधुनिक ब्राउज़रों ने यह बदल दिया। Potrace WebAssembly में कंपाइल होकर आपकी अपनी मशीन पर नेटिव स्पीड से चलता है, और उसके आसपास का रंग-विश्लेषण सादा JavaScript है। इसलिए AnyToSVG पूरा काम लोकल करता है: इमेज डालते ही उसकी जांच होती है, सही सेटिंग चुनी जाती हैं, हर रंग ट्रेस होता है, और SVG ओरिजिनल के बगल में आ जाता है। कुछ अपलोड नहीं होता, कुछ गिना नहीं जाता, और हर स्लाइडर पर तुरंत दोबारा ट्रेस होता है क्योंकि सर्वर तक आना-जाना है ही नहीं।

यही सोच IconEditor.org की भी है, मेरा Windows आइकन एडिटर: ऐसा काम चुनें जो लोग बार-बार करते हैं, उसके सचमुच अच्छे हिस्से रखें, और वह सब हटा दें जो सिर्फ सब्सक्रिप्शन को सही ठहराने के लिए है।

लोगो लोड किए हुए AnyToSVG पेज: बाईं ओर सेटिंग, बीच में तुलना प्रीव्यू, नीचे नतीजा और डाउनलोड पैनल
लोगो डालने के बाद कन्वर्टर: छह रंग पहचाने गए, सेकंड के दसवें हिस्से में ट्रेस, डाउनलोड के लिए तैयार।

यह कैसे काम करता है

इमेज डालने पर क्या होता है

1 · विश्लेषण

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

2 · पहले ग्रेडिएंट, फिर रंग

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

3 · लेयर

फिल सबसे बड़े इलाके से ऊपर की ओर रखे जाते हैं, और हर आकार अपने ऊपर के पड़ोसी के नीचे एक पिक्सल तक जाता है, इसलिए पास-पास के आकारों के बीच बारीक गैप नहीं रहते — उस तरकीब का हल्का रूप जिसे कमर्शियल सर्विस "ओवरलैप" कहती हैं। धब्बे हटाएं के साइज़ से छोटे धब्बे गिराए नहीं जाते, आसपास के आकार में मिला दिए जाते हैं।

4 · ट्रेसिंग

हर लेयर एक ब्लैक-एंड-व्हाइट मास्क है जिसे Potrace (WebAssembly में कंपाइल) स्मूद बेज़ियर पाथ में बदलता है। स्मूदिंग, धब्बे हटाना और कर्व ऑप्टिमाइज़ेशन Potrace के स्टैंडर्ड पैरामीटर हैं, जो दो स्लाइडर और एक प्रीसेट के रूप में दिए गए हैं।

5 · SVG तैयार करना

Potrace के कोऑर्डिनेट वापस ओरिजिनल पिक्सल ग्रिड में बदले जाते हैं, हर फिल का एक <path> — सादा रंग या <defs> में <linearGradient> / <radialGradient> — और कुछ नहीं: न ट्रांसफॉर्म, न ग्रुप, न मेटाडेटा। छिपाए गए रंग और बाहरी बैकग्राउंड बस छोड़ दिए जाते हैं।

6 · ब्राउज़र से कुछ बाहर नहीं जाता

ऊपर का सब कुछ आपकी मशीन पर Web Worker में चलता है। इकलौता अपवाद वह फॉर्मेट है जिसे आपका ब्राउज़र नहीं खोल सकता (TIFF, PSD, HEIC, PDF): वह फाइल हमारे सर्वर पर मेमोरी में PNG में बदली जाती है और तुरंत हटा दी जाती है।

सूरज की चमक पर ज़ूम किया तुलना व्यू: डिवाइडर के बाईं ओर बिटमैप, दाईं ओर रेडियल SVG ग्रेडिएंट
स्टेप 2 व्यवहार में। सूरज की चमक और उसके आसपास का आसमान एक स्मूद इलाके के रूप में पहचाने गए और एक ही रेडियल ग्रेडिएंट के रूप में लिखे गए; डिवाइडर PNG (बाएं) को SVG (दाएं) से अलग करता है।
नतीजा पैनल: 6.7 KB, 15 आकार, 6 ग्रेडिएंट समेत 11 फिल
इससे आपको क्या मिलता है। गुब्बारे का सैंपल सिर्फ सादे रंगों से ट्रेस करें तो 13 रंग और 56 KB; ग्रेडिएंट पहचान के साथ 11 फिल, 15 आकार और 6.7 KB।

जान-बूझकर छोटा बनाया

श्रेय और सीमाएं

ट्रेसिंग इंजन Peter Selinger का Potrace है, जो esm-potrace-wasm बिल्ड के ज़रिए GPL के तहत इस्तेमाल हुआ है; उसका लाइसेंस स्क्रिप्ट के साथ ही आता है। रंग-विश्लेषण, लेयरिंग और SVG तैयार करना AnyToSVG का अपना JavaScript है, जो बिना मिनिफाई किए परोसा जाता है। दूसरे डोमेन से कोई थर्ड-पार्टी स्क्रिप्ट, फॉन्ट या ट्रैकर लोड नहीं होता।

ईमानदार सीमाएं: इमेज सबसे लंबी तरफ 2048 पिक्सल तक ट्रेस होती है, इसलिए 6000 पिक्सल का स्कैन पहले छोटा किया जाता है। फोटो पोस्टराइज़्ड निकलती हैं — ट्रेसिंग यही करती है। स्मूद शेडिंग पहचानकर असली SVG ग्रेडिएंट (लीनियर या रेडियल) के रूप में लिखी जाती है, पर जटिल आकार का पीछा करती शेडिंग फिर भी कुछ सादे रंगों में सिमट जाती है। लाइन-आर्ट की सेंटरलाइन ट्रेसिंग (पेन प्लॉटर के लिए एक स्ट्रोक वाले पाथ) सपोर्टेड नहीं है; आकार हमेशा भरी हुई आउटलाइन होते हैं।

एक नज़र में

ज़रूरी बातें

कीमत
फ्री
अकाउंट
ज़रूरी नहीं
इनपुट
PNG · JPG · GIF · WebP · BMP · SVG · TIFF · PSD · HEIC · PDF
आउटपुट
SVG · PNG (1× / 2× / 4×) · क्लिपबोर्ड
रंग
2 – 32, या ब्लैक & व्हाइट
अधिकतम साइज़
20 MB · ≤ 2048 px पर ट्रेस
स्टोरेज
सर्वर पर कुछ नहीं

सवाल, बग या आइडिया?

[email protected] पर लिखें — या बस कन्वर्टर पर इमेज डालकर खुद देख लें।

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