# तस्वीर से 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` में।