यह पेज हिन्दी में दिखाया जा रहा है, क्योंकि आपका ब्राउज़र यही भाषा माँगता है।
इस पेज का कोड चालू नहीं हुआ।
index.html को सीधे किसी फ़ोल्डर से खोलने पर ब्राउज़र JavaScript मॉड्यूल रोक देता है, इसलिए कोई तस्वीर चुनने पर कुछ नहीं होगा। इसके बजाय फ़ोल्डर को http पर सर्व कीजिए:
ऊपर फ़ाइल चुनते ही यह खुल जाएगा।तैयार — इंटरनेट काट दीजिए, यह फिर भी चलता रहेगा।इस ब्राउज़र में उपलब्ध नहीं (बाकी सब फिर भी चलता है)।ऑफ़लाइन कैश के लिए https:// या localhost चाहिए।यहाँ कैश नहीं हो सकता, पर अपलोड फिर भी कुछ नहीं होता।आपकी फ़ाइलें कहीं नहीं गईं। {total} फ़ाइलें लोड हुईं, और वे सब इसी साइट की अपनी हैं। {platform}किसी चीज़ ने {hosts} से संपर्क किया, और यह टूल ऐसा कभी नहीं करता। यह देखने लायक बात है। {platform}विज्ञापन, माप और दान वाले बटन के लिए साइट की अपनी स्क्रिप्ट {hosts} होस्ट से आईं। उनमें से किसी को न कोई फ़ाइल मिली, न उसका एक बाइट।विज्ञापन, माप और दान वाले बटन के लिए साइट की अपनी स्क्रिप्ट {hosts} होस्ट से आईं। उनमें से किसी को न कोई फ़ाइल मिली, न उसका एक बाइट।कुछ गड़बड़ हो गई: {detail}। दोबारा शुरू करने के लिए पेज फिर से लोड कीजिए।{count} फ़ाइल पढ़ी जा रही है…{count} फ़ाइलें पढ़ी जा रही हैं…कोई उदाहरण आज़माइएउदाहरण बनाया जा रहा है…यह ब्राउज़र उदाहरण नहीं बना सका। इसके बजाय कोई फ़ाइल चुनिए।
तस्वीर से SVG — लोगो, स्टेंसिल या सिल्हूट को ट्रेस करके कर्व बनाइए
एक आकार, एक आउटलाइन। जो नहीं होना चाहिए, उस पर बस उँगली रख दीजिए।
● यह टूल तस्वीरें कभी अपलोड नहीं करता। यहाँ कोई सर्वर है ही नहीं।
तस्वीर को आपका अपना ब्राउज़र आपकी डिस्क से पढ़ता है, src/mask.js उसे हर पिक्सल के लिए एक बिट में बदलता है, src/contour.js आकार के किनारे-किनारे घूमता है, और src/fit.js उस पर कर्व बिठाता है — कुल छह सौ के आसपास पंक्तियाँ, जिन्हें आप पढ़ सकते हैं, पीछे कोई इंजन नहीं और चलाने के लिए कुछ डाउनलोड नहीं। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं: न कुछ मँगाने को, न कुछ भेजने को, और मान लीजिए कोई रास्ता होता भी, तो इस पेज के दूसरी तरफ़ ऐसा कोई सर्वर ही नहीं है जिसे ड्रॉइंग भेजी जा सके।
✗ कोई अपलोड नहीं
✗ कोई खाता नहीं
✗ कोई वॉटरमार्क नहीं
✓ ऑफ़लाइन चलता है
✓ ओपन सोर्स
लाइव जाँच:जाँच जारी…
ऑफ़लाइन:जाँच जारी…
हमारी बात पर भरोसा मत कीजिए। DevTools खोलिए, Network टैब पर नज़र रखिए, और कुछ ट्रेस कीजिए। एक भी रिक्वेस्ट में न कोई तस्वीर जाती है, न थंबनेल, न फ़ाइल का नाम, न आपकी चुनी फ़ाइल का एक बाइट। या फिर इंटरनेट काट दीजिए और तब भी एक ट्रेस करके देखिए।
प्राइवेसी का यह दावा कैसे जाँचा जा सकता है
आपकी तस्वीर के जाने की कोई जगह ही नहीं। Content-Security-Policy में वह हर पता लिखा है जिससे यह पेज संपर्क कर सकता है, और उनमें से एक भी इस साइट का नहीं है। यहाँ ऐसी कोई जगह नहीं जहाँ आपकी फ़ाइलें इकट्ठा हो सकें, और कोड में ऐसा कुछ नहीं जो उन्हें वहाँ भेजे, अगर होती भी।
यहाँ कुछ भी कुछ मँगाता नहीं।src/ में कहीं भी न कोई fetch है, न XMLHttpRequest, न sendBeacon। पूरा टूल एक तस्वीर के पिक्सलों पर गणित है: एक थ्रेशोल्ड, जो मिला उसके किनारे का एक चक्कर, और थोड़ा-सा कर्व बिठाना।
डाउनलोड करने को कोई इंजन नहीं। ट्रेस करना आम तौर पर किसी और का प्रोग्राम होता है, और वेब पर इसका मतलब है पहले क्लिक से पहले कई मेगाबाइट कंपाइल किया हुआ कोड। यहाँ ऐसा कुछ नहीं। पूरी चीज़ इसी ऑरिजिन से आई कुछ सौ पंक्तियों की सीधी-सादी JavaScript है, और इसीलिए यह पेज खुलते ही काम करता है, किसी इंतज़ार के बाद नहीं।
Google क्या लोड करता है, और उसे क्या नहीं दिया जाता। विज्ञापन और मापने वाली स्क्रिप्टें Google से आती हैं, और चंदे का बटन Buy Me a Coffee से। इनमें से किसी को आपकी तस्वीर के बारे में कुछ नहीं दिया जाता। जो भी पंक्ति उसे पढ़ती, थ्रेशोल्ड लगाती या ट्रेस करती है, वह इसी ऑरिजिन से आती है और रिपॉज़िटरी में दर्ज है।
ऑफ़लाइन चलता है। नेटवर्क काट दीजिए, टूल वैसा का वैसा रहता है, क्योंकि इसमें कभी कोई नेटवर्क वाला कदम था ही नहीं। यही सबसे सीधा सबूत है।
खुद जाँच लीजिए। ऊपर लिखी किसी भी बात को भरोसे पर मानने की ज़रूरत नहीं। यह पेज रिपॉज़िटरी के टेम्पलेट और कॉन्फ़िग से बनता है, एक ऐसी बिल्ड स्क्रिप्ट के ज़रिए जिसे आप पढ़ भी सकते हैं और खुद चला भी सकते हैं। उसका नतीजा dist ब्रांच पर कमिट रहता है, यानी जो सर्व हो रहा है और सोर्स से बिल्ड करने पर जो बनता है, दोनों का फ़र्क आप खुद देख सकते हैं:
सबसे पहले पढ़ने लायक फ़ाइलें ये हैं — Content-Security-Policy के लिए config/site.toml, तस्वीर हर पिक्सल के एक बिट में कैसे बदलती है, इसके लिए src/mask.js; आकार के किनारे का चक्कर src/contour.js में; सीढ़ी कर्व कैसे बनती है, यह src/fit.js में; और जब अलग करने को उजाला-अँधेरा हो ही नहीं, तब बैकग्राउंड कैसे निकाला जाता है, यह src/subject.js में।
अगर आपके दफ़्तर का सुरक्षा सॉफ़्टवेयर अपलोड की चेतावनी दे। वह उस पल पर नज़र रखता है जब ब्राउज़र में फ़ाइल चुनी जाती है, और यह नहीं जान सकता कि पन्ना उसे भेजने वाला है या नहीं — इसलिए चुनने पर ही चेतावनी देता है। यहाँ से कुछ नहीं भेजा जाता: ब्राउज़र के डेवलपर टूल खोलिए, Network पर जाइए, और एक फ़ाइल चुनिए। उसे ले जाने वाला कोई अनुरोध नहीं है, और पन्ने की अपनी स्थानीय झलक के अलावा कोई अनुरोध ही नहीं। यही जाँच आपकी IT टीम आधे मिनट में कर सकती है।
1 तस्वीर चुनिए
2 बताइए कि आकार क्या है
ट्रेस करने के लिए हर पिक्सल का एक बिट चाहिए — भीतर, या बाहर। यह तय करने के दो तरीके हैं, और वे अलग-अलग तस्वीरों के लिए ठीक हैं। सफ़ेद कागज़ पर बनी ड्रॉइंग उजाले और अँधेरे से अलग हो जाती है। किसी चीज़ की फ़ोटो नहीं होती: गहरे स्लेटी पत्थर पर गहरी लाल मूर्ति, गहरे पर गहरा है, और कोई चमक उन्हें अलग नहीं करती। उसके लिए चाहिए विषय, जो तस्वीर के किनारों से समझता है कि बैकग्राउंड क्या है और जो बैकग्राउंड नहीं है, वह सब रख लेता है।
3 आउटलाइन जाँचिए, और जो गलत हुआ उसे ठीक कीजिए
लाल रेखा वह आउटलाइन है जैसी वह अभी है, उन्हीं पिक्सलों के ऊपर खींची हुई जिनसे वह निकली है — यह सवाल तय होने की बस यही एक जगह है, क्योंकि कोई आउटलाइन उन पिक्सलों के हिसाब से सही या गलत होती है, और किसी चीज़ के हिसाब से नहीं। किसी भी एक तस्वीर को खींचिए, दोनों खिसकती हैं; पहिया घुमाकर ज़ूम कीजिए, और जो कुछ नहीं होना चाहिए उस पर क्लिक कीजिए। एक क्लिक उस रंग का पूरा धब्बा उठाता है, यानी आप एक पिक्सल नहीं, एक आकार की ओर इशारा कर रहे हैं; वापस लाने के लिए फिर क्लिक कीजिए।
हर आकार के लिए निकालिए रेखा पिक्सलों से कितनी दूर जा सकती है। लगभग एक से नीचे यह कुछ करती ही नहीं, क्योंकि सीढ़ी का एक पायदान अपनी रेखा से पूरा एक पिक्सल बाहर होता है; लगभग दो से ऊपर यह असली कर्व खाने लगती है।
कोनों की धार आउटलाइन को कितना मुड़ना चाहिए ताकि वह मोड़ कर्व में गोल होने के बजाय कोना बना रहे। बहुत कम रखिए, तो हर कँपकँपी कोना बन जाती है और गोला बहुभुज बनकर लौटता है।
तस्वीर
SVG
रेखा कितनी चिकनी हो
पिक्सलों की सीढ़ी कर्व कैसे बनती है, यह दो संख्याएँ तय करती हैं। ज़्यादातर तस्वीरों में इनमें से किसी को छूने की ज़रूरत नहीं, और दोनों जान लेने लायक हैं, उस वक्त के लिए जब ज़रूरत पड़े।
यह ब्राउज़र तस्वीर को डिकोड नहीं कर सका।वह फ़ाइल खुल नहीं सकी: {why}{name} — {width} × {height}ट्रेस हो रही तस्वीर, {width} गुणा {height} पिक्सलनिकाला गया: {level}{level}एक टुकड़ा मिला, जो तस्वीर का {share}% है।{islands} अलग-अलग टुकड़े मिले और सबसे बड़ा रखा गया, जो तस्वीर का {share}% है।आपके बैकग्राउंड बताए {count} रंग इस्तेमाल हो रहे हैं।तस्वीर के किनारे की पट्टी से बैकग्राउंड सीखा जा रहा है।{zoom}×हर आकार के लिए{value}{value}°ठीक वही रंग±{value}इस्तेमाल में नहीं — एक क्लिक पूरा जुड़ा आकार उठाता हैआकार का हिस्सा: {size} पिक्सल, तस्वीर का {share}%। बाहर करने के लिए क्लिक कीजिए।आकार का हिस्सा नहीं: {size} पिक्सल, तस्वीर का {share}%। भरने के लिए क्लिक कीजिए।{size} पिक्सल से ज़्यादा — चलते-चलते आउटलाइन बनाने के लिए बहुत बड़ा। फिर भी उठाने के लिए क्लिक कीजिए।{size} पिक्सल। किनारा इतना लंबा है कि चलते-चलते खींचा नहीं जा सकता।यह रंग: बैकग्राउंड में गिने जाने वालों में जोड़ने के लिए क्लिक कीजिए।वह रंग भूल जाइएवे {count} रंग भूल जाइएएक आकार, {points} बिंदु, {bytes}। {ms} ms में ट्रेस।{loops} आकार, {points} बिंदु, {bytes}। {ms} ms में ट्रेस।आपका {count} सुधार।आपके {count} सुधार।यह {loops} अलग-अलग आकारों और {bytes} की ड्रॉइंग बनकर निकला, और फ़ोटो को लाइन ड्रॉइंग की तरह ट्रेस करने पर वह ऐसी ही दिखती है। फ़ाइल अब भी आपकी है, डाउनलोड कर लीजिए, पर यह धीरे खुलेगी और फ़ोटो जैसी नहीं दिखेगी। इसके बजाय ऊपर विषय आज़माइए।{stem}.svg
क्या इससे काम बन गया?
क्या गड़बड़ हुई?
शुक्रिया — इससे मदद मिलती है।
सिर्फ़ आपका जवाब भेजा जाता है, वह भी तभी जब आप बटन दबाते हैं। आपकी फ़ाइल, उसका नाम या उससे जुड़ी कोई बात कभी नहीं।
# तस्वीर से SVG — लोगो, स्टेंसिल या सिल्हूट को ट्रेस करके कर्व बनाइए
एक आकार, एक आउटलाइन। जो नहीं होना चाहिए, उस पर बस उँगली रख दीजिए।
> काली-सफ़ेद तस्वीर को ट्रेस करके असली SVG आउटलाइन बनाइए, अपने ब्राउज़र में ही। लोगो, स्टेंसिल, दस्तखत, लाइन ड्रॉइंग और सिल्हूट ऐसे कर्व बन जाते हैं जिन्हें आप किसी भी साइज़ तक बड़ा कर सकते हैं। ट्रेस में जो गलत आ गया, उसे एक क्लिक से हटाइए। कुछ अपलोड नहीं होता।
यह पेज एक इंटरैक्टिव टूल है जो पूरी तरह आपके ब्राउज़र में चलता है, https://abox.tools/hi/image-to-svg/ पर — आप इसे जो भी देते हैं, वह कहीं अपलोड नहीं होता। आगे वह सब कुछ है जो यह पेज इस टूल के बारे में शब्दों में कहता है; इसे इस्तेमाल करने के लिए यह पता खोलें।
## यह टूल तस्वीरें **कभी अपलोड नहीं करता**। यहाँ कोई सर्वर है ही नहीं।
तस्वीर को आपका अपना ब्राउज़र आपकी डिस्क से पढ़ता है, `src/mask.js` उसे हर पिक्सल के लिए एक बिट में बदलता है, `src/contour.js` आकार के किनारे-किनारे घूमता है, और `src/fit.js` उस पर कर्व बिठाता है — कुल छह सौ के आसपास पंक्तियाँ, जिन्हें आप पढ़ सकते हैं, पीछे कोई इंजन नहीं और चलाने के लिए कुछ डाउनलोड नहीं। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं: न कुछ मँगाने को, न कुछ भेजने को, और मान लीजिए कोई रास्ता होता भी, तो इस पेज के दूसरी तरफ़ ऐसा कोई सर्वर ही नहीं है जिसे ड्रॉइंग भेजी जा सके।
- ✗ कोई अपलोड नहीं
- ✗ कोई खाता नहीं
- ✗ कोई वॉटरमार्क नहीं
- ✓ ऑफ़लाइन चलता है
- ✓ ओपन सोर्स
## तस्वीर को बिना अपलोड किए SVG में कैसे ट्रेस करें
1. **तस्वीर चुनिए।** लोगो, स्टेंसिल, दस्तखत, मुहर, स्कैन की हुई ड्रॉइंग, सिल्हूट। जिसमें भी कोई साफ़ आकार हो, वह अच्छे से ट्रेस होता है; किसी कमरे की फ़ोटो नहीं, और उसके बारे में नीचे साफ़ चेतावनी है, आखिर में कोई झटका नहीं। फ़ाइल सीधे आपकी डिस्क से पढ़ी जाती है और इस बीच कुछ भी कहीं नहीं भेजा जाता।
2. **बताइए कि आकार क्या है।** कागज़ पर बनी ड्रॉइंग **उजाले और अँधेरे** से अलग हो जाती है, और उसका लेवल आपके लिए निकाल दिया जाता है। किसी चीज़ की फ़ोटो नहीं होती — गहरे स्लेटी पत्थर पर गहरी लाल मूर्ति, गहरे पर गहरा है, और कोई चमक उन्हें अलग नहीं करती। उसके लिए चाहिए **विषय**, जो तस्वीर के किनारे की एक पट्टी से सीखता है कि बैकग्राउंड क्या है और जो बैकग्राउंड नहीं है, वह सब रख लेता है।
3. **सेटिंग नहीं, लाल रेखा देखिए।** आउटलाइन उन्हीं पिक्सलों के ऊपर खींची जाती है जिनसे वह निकली है, क्योंकि यह सवाल तय होने की बस यही एक जगह है: कोई आउटलाइन उन पिक्सलों के हिसाब से सही या गलत होती है, और किसी चीज़ के हिसाब से नहीं। किसी भी एक तस्वीर को खींचिए, दोनों खिसकती हैं; और पहिया घुमाकर इतना ज़ूम कीजिए कि दिखे रेखा असल में कर क्या रही है।
4. **जो नहीं होना चाहिए, उसे क्लिक करके हटाइए।** कोई धब्बा, स्टेपल की पिन, मुहर, कैप्शन, परछाईं। एक क्लिक एक पिक्सल नहीं, उस रंग का पूरा धब्बा उठाता है, यानी आप एक आकार की ओर इशारा कर रहे हैं; वापस लाने के लिए फिर क्लिक कीजिए। घिरे हुए बैकग्राउंड के टुकड़े पर क्लिक करने से वह भर जाता है, और जो छेद छेद नहीं होना चाहिए, वह इसी तरह बंद होता है।
5. **चिकनाई तभी बदलिए जब ज़रूरत हो।** *बारीकी* यह है कि सरल होते समय रेखा पिक्सलों से कितनी दूर जा सकती है, और जब तक आप कुछ और न कहें, यह हर आकार के लिए अलग निकाली जाती है। *कोनों की धार* तय करती है कि आउटलाइन को कितना मुड़ना चाहिए ताकि वह मोड़ गोल होने के बजाय कोना बना रहे। ज़्यादातर तस्वीरों में इन दोनों को छूने की ज़रूरत नहीं पड़ती।
6. **SVG ले लीजिए।** एक फ़ाइल, एक `<path>`, और फ़िल रूल की कोई चिंता नहीं: आउटलाइन एक दिशा में घूमती हैं और छेद दूसरी में, और यही बात चालीस छेदों वाले आकार को एक ही एलिमेंट बनाती है। यह Illustrator, Inkscape, Figma, ब्राउज़र और कटिंग मशीन में खुलता है।
## विस्तार से
[तस्वीर को SVG में कैसे ट्रेस करें](https://abox.tools/hi/guides/trace-an-image-into-an-svg/): लोगो, स्टेंसिल, दस्तखत या सिल्हूट को अपने ब्राउज़र में असली वेक्टर आउटलाइन बनाइए। कौन-सी तस्वीरें अच्छे से ट्रेस होती हैं, कौन-सी कभी नहीं होंगी, और ट्रेसर जो हिस्से गलत करता है उन्हें कैसे ठीक करें।
## बॉक्स में और भी टूल
- [ऊँचाई तुलना चार्ट](https://abox.tools/hi/compare-heights/): ऊँचाइयाँ टाइप कीजिए, तस्वीर ले जाइए। इसे बनाने के लिए कुछ भी बाहर नहीं भेजा जाता।
- [इमेज कंप्रेसर](https://abox.tools/hi/compress-image/): साइज़ आप बताइए। बाकी हिसाब यह लगा लेगा।
- [इमेज रिसाइज़र](https://abox.tools/hi/resize-image/): साइज़ बताइए। डिब्बा खींचिए। फ़ॉर्मैट चुनिए।
- [HEIC से JPG](https://abox.tools/hi/heic-to-jpg/): iPhone जो फ़ोटो बनाता है, उस फ़ॉर्मैट में जिसे सब खोल लेते हैं।
## सवाल
### क्या मेरी तस्वीर कहीं अपलोड होती है?
नहीं। फ़ाइल को आपका अपना ब्राउज़र आपके अपने हार्डवेयर पर पढ़ता है, इसी ऑरिजिन से आई कुछ सौ पंक्तियों की JavaScript उसे ट्रेस करती है, और वह डाउनलोड बनकर वापस आती है। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं — यह न कभी कुछ मँगाता है, न कभी कुछ भेजता है — और पेज की `Content-Security-Policy` में वह हर पता लिखा है जिससे यह संपर्क कर सकता है, और उनमें से एक भी इस साइट का नहीं।
### क्या यह मेरी फ़ोटो को SVG बना देगा?
किसी काम के तरीके से नहीं, और पेज आपको यह खुद बता देगा, बजाय इसके कि आपको डाउनलोड के बाद पता चले। ट्रेस करना मिलते-जुलते रंग के हर धब्बे को अपना अलग आकार बना देता है, इसलिए फ़ोटो हज़ारों एक-दूसरे पर चढ़े धब्बों और JPEG से कई गुना बड़ी फ़ाइल बनकर लौटती है, जो धीरे खुलती है और फ़ोटो जैसी दिखती नहीं। अच्छे से ट्रेस वह तस्वीर होती है जिसमें कोई *आकार* हो: लोगो, स्टेंसिल, दस्तखत, लाइन ड्रॉइंग, सिल्हूट। किसी एक चीज़ की फ़ोटो के लिए *विषय* वाली सेटिंग उसे एक ठोस सिल्हूट की तरह काट देगी, जो अलग बात है, और सचमुच काम की है।
### आकार ढूँढ़ने के दो तरीकों में फ़र्क क्या है?
वे जो सवाल पूछते हैं। **उजाला और अँधेरा** पूछता है कि क्या हर पिक्सल एक लेवल से ज़्यादा गहरा है, जो कागज़ पर स्याही के लिए बिलकुल सही है और तब बेकार, जब विषय और बैकग्राउंड बराबर गहरे हों। **विषय** पूछता है कि बैकग्राउंड क्या है — इसे वह तस्वीर के किनारे की एक पट्टी से सीखता है, हर पिक्सल को उसके सामने मापता है, और जो सबसे बड़ी चीज़ बैकग्राउंड नहीं है, उसे रख लेता है। यह कमोबेश सादे बैकग्राउंड के सामने रखी किसी चीज़ की फ़ोटो पर चलता है, और उस तस्वीर पर नाकाम होता है जो इतनी कसकर काटी गई हो कि विषय तीन तरफ़ से बाहर निकल रहा हो, क्योंकि तब जिन किनारों से वह सीखता है, वे खुद विषय हैं। ऐसा हो तो आप बैकग्राउंड खुद दिखा सकते हैं।
### ट्रेस किए आकार में छेद क्यों हैं, या पतले हिस्से क्यों गायब हो जाते हैं?
क्योंकि हर पिक्सल के एक बिट में बदलते ही तस्वीर में वे थे ही। *ट्रेसर को क्या मिला* चालू करके देखिए: बारह-एक पिक्सल से नीचे किसी अक्षर की आँख पहले ही भर चुकी होती है और उसकी डंडियाँ आपस में मिल चुकी होती हैं, और जो छेद है ही नहीं, उसे कोई ट्रेस वापस नहीं ला सकता। इलाज पीछे है — थ्रेशोल्ड खिसकाइए, या बड़े स्कैन से शुरू कीजिए। *विषय* मोड में *इतने तक की दरारें बंद कीजिए* छोटे छेद सील करता है और *पूरा ठोस भरिए* उस हर छेद को बंद करता है जहाँ बैकग्राउंड तस्वीर के किनारे से पहुँच ही नहीं पाता।
### जो हिस्से इसने गलत किए, क्या मैं उन्हें ठीक कर सकता हूँ?
हाँ, और तीसरा कदम ज़्यादातर इसी के लिए है। ड्रॉइंग में जो कुछ नहीं होना चाहिए, उस पर क्लिक कीजिए, वह गायब हो जाता है; फिर क्लिक कीजिए, वापस आ जाता है। एक क्लिक उस रंग का पूरा धब्बा उठाता है, इसलिए एक क्लिक एक पिक्सल नहीं, पूरा धब्बा या पूरी मुहर हटा देता है। घिरे हुए बैकग्राउंड के टुकड़े पर क्लिक करने से वह भर जाता है। सुधार थ्रेशोल्ड से अलग रखे जाते हैं, इसलिए बाद में स्लाइडर खिसकाने से वे फेंके नहीं जाते।
### SVG कितनी बड़ी होगी?
आकार के लिए, तस्वीर से छोटी: ट्रेस किया सिल्हूट आम तौर पर एक से पाँच किलोबाइट का होता है, और लोगो कुछ और। पेज आपको डाउनलोड के बगल में सही-सही संख्या बताता है। फ़ोटो के लिए यह बहुत बड़ी होगी, और यही सबसे साफ़ निशानी है कि उस फ़ाइल के लिए यह गलत टूल है — और कोई हज़ार अलग-अलग आकारों के बाद पेज बनाना बंद कर देता है और यह बात कह देता है।
### क्या यह रंगों में ट्रेस करता है?
नहीं। यह एक रंग का एक आकार बनाता है, और यही वह मामला है जो घटिया फ़ोटोकॉपी नहीं, ड्रॉइंग बनकर निकलता है। रंगों में ट्रेस करने का मतलब है कुछ ही रंगों में घटाना और हर एक को अपनी अलग परत की तरह ट्रेस करना, और नतीजा उसे माँगने वाले ज़्यादातर लोगों को निराश करता है। रंग चाहिए तो आकार यहाँ ट्रेस कीजिए और उसे अपने ड्रॉइंग प्रोग्राम में भरिए।
### SVG मिलने के बाद मैं उसका क्या कर सकता हूँ?
उसे बिना धुँधला हुए किसी भी साइज़ तक बड़ा कीजिए, एक एट्रिब्यूट से उसका रंग बदलिए, उसे एनिमेट कीजिए, छापिए, या कटिंग मशीन या लेज़र को भेजिए। यह एक ही `<path>` है जिसमें गलत करने को कोई फ़िल रूल नहीं, इसलिए Illustrator, Inkscape, Figma, ब्राउज़र और ज़्यादातर CNC सॉफ़्टवेयर इसे एक जैसा पढ़ते हैं।
### क्या तस्वीर के साइज़ की कोई सीमा है?
आपकी मशीन की, हमारी नहीं। 300 dpi पर स्कैन किया A4 पन्ना — कोई नौ मेगापिक्सल — सेकंड के एक हिस्से में ट्रेस हो जाता है। बड़ी तस्वीरें भी चलती हैं; बस ज़्यादा समय लेती हैं, और काम आपके अपने प्रोसेसर पर होता है, कहीं किसी कतार में नहीं।
### क्या यह मुफ़्त है, और क्या मुझे खाता चाहिए?
यह मुफ़्त है, और न कोई खाता है, न लॉगिन, न ट्रायल, न वॉटरमार्क। फ़ाइलों की संख्या या साइज़ की भी कोई सीमा नहीं, क्योंकि उनका खर्च उठाने वाला कोई सर्वर है ही नहीं — काम आपकी अपनी मशीन पर होता है। साइट पर विज्ञापन हैं, और वही इसका खर्च चलाते हैं; विज्ञापनों को आपकी फ़ाइलों के बारे में कुछ नहीं दिया जाता।
### क्या यह ऑफ़लाइन चलता है?
हाँ। पेज एक बार लोड कीजिए, फिर इंटरनेट काट दीजिए, और यह चलता रहता है। यही सबसे सीधा तरीका भी है यह साबित करने का कि कुछ अपलोड नहीं हो रहा: जो टूल आपकी तस्वीर ट्रेस होने के लिए बाहर भेजता, वह तार खींचते ही रुक जाता।
## प्राइवेसी का यह दावा कैसे जाँचा जा सकता है
- **आपकी तस्वीर के जाने की कोई जगह ही नहीं।** Content-Security-Policy में वह हर पता लिखा है जिससे यह पेज संपर्क कर सकता है, और उनमें से एक भी इस साइट का नहीं है। यहाँ ऐसी कोई जगह नहीं जहाँ आपकी फ़ाइलें इकट्ठा हो सकें, और कोड में ऐसा कुछ नहीं जो उन्हें वहाँ भेजे, अगर होती भी।
- **यहाँ कुछ भी कुछ मँगाता नहीं।** `src/` में कहीं भी न कोई `fetch` है, न `XMLHttpRequest`, न `sendBeacon`। पूरा टूल एक तस्वीर के पिक्सलों पर गणित है: एक थ्रेशोल्ड, जो मिला उसके किनारे का एक चक्कर, और थोड़ा-सा कर्व बिठाना।
- **डाउनलोड करने को कोई इंजन नहीं।** ट्रेस करना आम तौर पर किसी और का प्रोग्राम होता है, और वेब पर इसका मतलब है पहले क्लिक से पहले कई मेगाबाइट कंपाइल किया हुआ कोड। यहाँ ऐसा कुछ नहीं। पूरी चीज़ इसी ऑरिजिन से आई कुछ सौ पंक्तियों की सीधी-सादी JavaScript है, और इसीलिए यह पेज खुलते ही काम करता है, किसी इंतज़ार के बाद नहीं।
- **Google क्या लोड करता है, और उसे क्या नहीं दिया जाता।** विज्ञापन और मापने वाली स्क्रिप्टें Google से आती हैं, और चंदे का बटन Buy Me a Coffee से। इनमें से किसी को आपकी तस्वीर के बारे में कुछ नहीं दिया जाता। जो भी पंक्ति उसे पढ़ती, थ्रेशोल्ड लगाती या ट्रेस करती है, वह इसी ऑरिजिन से आती है और रिपॉज़िटरी में दर्ज है।
- **ऑफ़लाइन चलता है।** नेटवर्क काट दीजिए, टूल वैसा का वैसा रहता है, क्योंकि इसमें कभी कोई नेटवर्क वाला कदम था ही नहीं। यही सबसे सीधा सबूत है।
**खुद जाँच लीजिए।** ऊपर लिखी किसी भी बात को भरोसे पर मानने की ज़रूरत नहीं। यह पेज रिपॉज़िटरी के टेम्पलेट और कॉन्फ़िग से बनता है, एक ऐसी बिल्ड स्क्रिप्ट के ज़रिए जिसे आप पढ़ भी सकते हैं और खुद चला भी सकते हैं। उसका नतीजा `dist` ब्रांच पर कमिट रहता है, यानी जो सर्व हो रहा है और सोर्स से बिल्ड करने पर जो बनता है, दोनों का फ़र्क आप खुद देख सकते हैं: https://github.com/A-Box-of-Tools/website
सबसे पहले पढ़ने लायक फ़ाइलें ये हैं — Content-Security-Policy के लिए `config/site.toml`, तस्वीर हर पिक्सल के एक बिट में कैसे बदलती है, इसके लिए `src/mask.js`; आकार के किनारे का चक्कर `src/contour.js` में; सीढ़ी कर्व कैसे बनती है, यह `src/fit.js` में; और जब अलग करने को उजाला-अँधेरा हो ही नहीं, तब बैकग्राउंड कैसे निकाला जाता है, यह `src/subject.js` में।
तस्वीर को बिना अपलोड किए SVG में कैसे ट्रेस करें
तस्वीर चुनिए। लोगो, स्टेंसिल, दस्तखत, मुहर, स्कैन की हुई ड्रॉइंग, सिल्हूट। जिसमें भी कोई साफ़ आकार हो, वह अच्छे से ट्रेस होता है; किसी कमरे की फ़ोटो नहीं, और उसके बारे में नीचे साफ़ चेतावनी है, आखिर में कोई झटका नहीं। फ़ाइल सीधे आपकी डिस्क से पढ़ी जाती है और इस बीच कुछ भी कहीं नहीं भेजा जाता।
बताइए कि आकार क्या है। कागज़ पर बनी ड्रॉइंग उजाले और अँधेरे से अलग हो जाती है, और उसका लेवल आपके लिए निकाल दिया जाता है। किसी चीज़ की फ़ोटो नहीं होती — गहरे स्लेटी पत्थर पर गहरी लाल मूर्ति, गहरे पर गहरा है, और कोई चमक उन्हें अलग नहीं करती। उसके लिए चाहिए विषय, जो तस्वीर के किनारे की एक पट्टी से सीखता है कि बैकग्राउंड क्या है और जो बैकग्राउंड नहीं है, वह सब रख लेता है।
सेटिंग नहीं, लाल रेखा देखिए। आउटलाइन उन्हीं पिक्सलों के ऊपर खींची जाती है जिनसे वह निकली है, क्योंकि यह सवाल तय होने की बस यही एक जगह है: कोई आउटलाइन उन पिक्सलों के हिसाब से सही या गलत होती है, और किसी चीज़ के हिसाब से नहीं। किसी भी एक तस्वीर को खींचिए, दोनों खिसकती हैं; और पहिया घुमाकर इतना ज़ूम कीजिए कि दिखे रेखा असल में कर क्या रही है।
जो नहीं होना चाहिए, उसे क्लिक करके हटाइए। कोई धब्बा, स्टेपल की पिन, मुहर, कैप्शन, परछाईं। एक क्लिक एक पिक्सल नहीं, उस रंग का पूरा धब्बा उठाता है, यानी आप एक आकार की ओर इशारा कर रहे हैं; वापस लाने के लिए फिर क्लिक कीजिए। घिरे हुए बैकग्राउंड के टुकड़े पर क्लिक करने से वह भर जाता है, और जो छेद छेद नहीं होना चाहिए, वह इसी तरह बंद होता है।
चिकनाई तभी बदलिए जब ज़रूरत हो।बारीकी यह है कि सरल होते समय रेखा पिक्सलों से कितनी दूर जा सकती है, और जब तक आप कुछ और न कहें, यह हर आकार के लिए अलग निकाली जाती है। कोनों की धार तय करती है कि आउटलाइन को कितना मुड़ना चाहिए ताकि वह मोड़ गोल होने के बजाय कोना बना रहे। ज़्यादातर तस्वीरों में इन दोनों को छूने की ज़रूरत नहीं पड़ती।
SVG ले लीजिए। एक फ़ाइल, एक <path>, और फ़िल रूल की कोई चिंता नहीं: आउटलाइन एक दिशा में घूमती हैं और छेद दूसरी में, और यही बात चालीस छेदों वाले आकार को एक ही एलिमेंट बनाती है। यह Illustrator, Inkscape, Figma, ब्राउज़र और कटिंग मशीन में खुलता है।
विस्तार से
तस्वीर को SVG में कैसे ट्रेस करेंलोगो, स्टेंसिल, दस्तखत या सिल्हूट को अपने ब्राउज़र में असली वेक्टर आउटलाइन बनाइए। कौन-सी तस्वीरें अच्छे से ट्रेस होती हैं, कौन-सी कभी नहीं होंगी, और ट्रेसर जो हिस्से गलत करता है उन्हें कैसे ठीक करें।
नहीं। फ़ाइल को आपका अपना ब्राउज़र आपके अपने हार्डवेयर पर पढ़ता है, इसी ऑरिजिन से आई कुछ सौ पंक्तियों की JavaScript उसे ट्रेस करती है, और वह डाउनलोड बनकर वापस आती है। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं — यह न कभी कुछ मँगाता है, न कभी कुछ भेजता है — और पेज की Content-Security-Policy में वह हर पता लिखा है जिससे यह संपर्क कर सकता है, और उनमें से एक भी इस साइट का नहीं।
क्या यह मेरी फ़ोटो को SVG बना देगा?
किसी काम के तरीके से नहीं, और पेज आपको यह खुद बता देगा, बजाय इसके कि आपको डाउनलोड के बाद पता चले। ट्रेस करना मिलते-जुलते रंग के हर धब्बे को अपना अलग आकार बना देता है, इसलिए फ़ोटो हज़ारों एक-दूसरे पर चढ़े धब्बों और JPEG से कई गुना बड़ी फ़ाइल बनकर लौटती है, जो धीरे खुलती है और फ़ोटो जैसी दिखती नहीं। अच्छे से ट्रेस वह तस्वीर होती है जिसमें कोई आकार हो: लोगो, स्टेंसिल, दस्तखत, लाइन ड्रॉइंग, सिल्हूट। किसी एक चीज़ की फ़ोटो के लिए विषय वाली सेटिंग उसे एक ठोस सिल्हूट की तरह काट देगी, जो अलग बात है, और सचमुच काम की है।
आकार ढूँढ़ने के दो तरीकों में फ़र्क क्या है?
वे जो सवाल पूछते हैं। उजाला और अँधेरा पूछता है कि क्या हर पिक्सल एक लेवल से ज़्यादा गहरा है, जो कागज़ पर स्याही के लिए बिलकुल सही है और तब बेकार, जब विषय और बैकग्राउंड बराबर गहरे हों। विषय पूछता है कि बैकग्राउंड क्या है — इसे वह तस्वीर के किनारे की एक पट्टी से सीखता है, हर पिक्सल को उसके सामने मापता है, और जो सबसे बड़ी चीज़ बैकग्राउंड नहीं है, उसे रख लेता है। यह कमोबेश सादे बैकग्राउंड के सामने रखी किसी चीज़ की फ़ोटो पर चलता है, और उस तस्वीर पर नाकाम होता है जो इतनी कसकर काटी गई हो कि विषय तीन तरफ़ से बाहर निकल रहा हो, क्योंकि तब जिन किनारों से वह सीखता है, वे खुद विषय हैं। ऐसा हो तो आप बैकग्राउंड खुद दिखा सकते हैं।
ट्रेस किए आकार में छेद क्यों हैं, या पतले हिस्से क्यों गायब हो जाते हैं?
क्योंकि हर पिक्सल के एक बिट में बदलते ही तस्वीर में वे थे ही। ट्रेसर को क्या मिला चालू करके देखिए: बारह-एक पिक्सल से नीचे किसी अक्षर की आँख पहले ही भर चुकी होती है और उसकी डंडियाँ आपस में मिल चुकी होती हैं, और जो छेद है ही नहीं, उसे कोई ट्रेस वापस नहीं ला सकता। इलाज पीछे है — थ्रेशोल्ड खिसकाइए, या बड़े स्कैन से शुरू कीजिए। विषय मोड में इतने तक की दरारें बंद कीजिए छोटे छेद सील करता है और पूरा ठोस भरिए उस हर छेद को बंद करता है जहाँ बैकग्राउंड तस्वीर के किनारे से पहुँच ही नहीं पाता।
जो हिस्से इसने गलत किए, क्या मैं उन्हें ठीक कर सकता हूँ?
हाँ, और तीसरा कदम ज़्यादातर इसी के लिए है। ड्रॉइंग में जो कुछ नहीं होना चाहिए, उस पर क्लिक कीजिए, वह गायब हो जाता है; फिर क्लिक कीजिए, वापस आ जाता है। एक क्लिक उस रंग का पूरा धब्बा उठाता है, इसलिए एक क्लिक एक पिक्सल नहीं, पूरा धब्बा या पूरी मुहर हटा देता है। घिरे हुए बैकग्राउंड के टुकड़े पर क्लिक करने से वह भर जाता है। सुधार थ्रेशोल्ड से अलग रखे जाते हैं, इसलिए बाद में स्लाइडर खिसकाने से वे फेंके नहीं जाते।
SVG कितनी बड़ी होगी?
आकार के लिए, तस्वीर से छोटी: ट्रेस किया सिल्हूट आम तौर पर एक से पाँच किलोबाइट का होता है, और लोगो कुछ और। पेज आपको डाउनलोड के बगल में सही-सही संख्या बताता है। फ़ोटो के लिए यह बहुत बड़ी होगी, और यही सबसे साफ़ निशानी है कि उस फ़ाइल के लिए यह गलत टूल है — और कोई हज़ार अलग-अलग आकारों के बाद पेज बनाना बंद कर देता है और यह बात कह देता है।
क्या यह रंगों में ट्रेस करता है?
नहीं। यह एक रंग का एक आकार बनाता है, और यही वह मामला है जो घटिया फ़ोटोकॉपी नहीं, ड्रॉइंग बनकर निकलता है। रंगों में ट्रेस करने का मतलब है कुछ ही रंगों में घटाना और हर एक को अपनी अलग परत की तरह ट्रेस करना, और नतीजा उसे माँगने वाले ज़्यादातर लोगों को निराश करता है। रंग चाहिए तो आकार यहाँ ट्रेस कीजिए और उसे अपने ड्रॉइंग प्रोग्राम में भरिए।
SVG मिलने के बाद मैं उसका क्या कर सकता हूँ?
उसे बिना धुँधला हुए किसी भी साइज़ तक बड़ा कीजिए, एक एट्रिब्यूट से उसका रंग बदलिए, उसे एनिमेट कीजिए, छापिए, या कटिंग मशीन या लेज़र को भेजिए। यह एक ही <path> है जिसमें गलत करने को कोई फ़िल रूल नहीं, इसलिए Illustrator, Inkscape, Figma, ब्राउज़र और ज़्यादातर CNC सॉफ़्टवेयर इसे एक जैसा पढ़ते हैं।
क्या तस्वीर के साइज़ की कोई सीमा है?
आपकी मशीन की, हमारी नहीं। 300 dpi पर स्कैन किया A4 पन्ना — कोई नौ मेगापिक्सल — सेकंड के एक हिस्से में ट्रेस हो जाता है। बड़ी तस्वीरें भी चलती हैं; बस ज़्यादा समय लेती हैं, और काम आपके अपने प्रोसेसर पर होता है, कहीं किसी कतार में नहीं।
क्या यह मुफ़्त है, और क्या मुझे खाता चाहिए?
यह मुफ़्त है, और न कोई खाता है, न लॉगिन, न ट्रायल, न वॉटरमार्क। फ़ाइलों की संख्या या साइज़ की भी कोई सीमा नहीं, क्योंकि उनका खर्च उठाने वाला कोई सर्वर है ही नहीं — काम आपकी अपनी मशीन पर होता है। साइट पर विज्ञापन हैं, और वही इसका खर्च चलाते हैं; विज्ञापनों को आपकी फ़ाइलों के बारे में कुछ नहीं दिया जाता।
क्या यह ऑफ़लाइन चलता है?
हाँ। पेज एक बार लोड कीजिए, फिर इंटरनेट काट दीजिए, और यह चलता रहता है। यही सबसे सीधा तरीका भी है यह साबित करने का कि कुछ अपलोड नहीं हो रहा: जो टूल आपकी तस्वीर ट्रेस होने के लिए बाहर भेजता, वह तार खींचते ही रुक जाता।