दो फ़ाइलें, दोनों के आखिर में .svg
दो “कन्वर्ट किए गए” SVG किसी टेक्स्ट एडिटर में खोलें। पहले में सिर्फ़ एक <image> एलिमेंट है, जिसका href एक लंबी data:image/png;base64,… स्ट्रिंग है। दूसरे में <path> एलिमेंट हैं, हर एक में d="M12 4 L…" वाला कोऑर्डिनेट डेटा और एक fill रंग। दोनों ब्राउज़र में खुलते हैं और ओरिजिनल साइज़ पर दोनों सही दिखते हैं। लेकिन वेक्टर सिर्फ़ दूसरा है।
रैपर ठीक वैसा ही है जैसा नाम से लगता है: ओरिजिनल बिटमैप, जो एक SVG कंटेनर के अंदर रखा है। इसे बड़ा करें तो ब्राउज़र पिक्सेल को अपस्केल करता है, इसलिए किनारे वैसे ही धुंधले होते हैं जैसे PNG के होते। कटिंग मशीनें और वेक्टर एडिटर इसके अंदर कोई शेप नहीं चुन सकते, क्योंकि इसमें शेप हैं ही नहीं — बस पिक्सेल का एक आयत है।
ट्रेस किया गया SVG तस्वीर को ज्योमेट्री के रूप में बताता है। हर रंग का हिस्सा सीधी लाइनों और Bézier कर्व से बनी एक बंद आउटलाइन बन जाता है; रेंडरर उस आउटलाइन को आपके मांगे किसी भी साइज़ पर भरता है, इसलिए किनारे 10 mm पर भी शार्प रहते हैं और 10 m पर भी।
png2svg.art क्या देता है
ट्रेसर आपकी इमेज के पिक्सेल को कुछ फ़्लैट रंगों में बांटता है, फिर हर रंग के हिस्से की आउटलाइन सीधी लाइनों और Bézier कर्व से बनाता है। जहां दो रंग मिलते हैं, वहां उनकी एक ही सीमा होती है, इसलिए उनके बीच कोई गैप नहीं खुलता। नतीजे में हर शेप के लिए एक <path> होता है, उसके रंग से भरा हुआ, ऑब्जेक्ट के हिसाब से ग्रुप किया हुआ और इस हिसाब से एक-दूसरे के अंदर रखा हुआ कि कौन किसे घेरता है (लेयर को रंग के हिसाब से पर सेट करने पर हर रंग का एक <path>)। छेद, जैसे “O” के अंदर का हिस्सा, SVG के किसी भी fill rule में खुले रहते हैं। कोई <image> एलिमेंट नहीं, कोई एम्बेड किया हुआ बिटमैप नहीं और कोई स्क्रिप्ट नहीं: सेव होने से पहले हर नतीजे की जांच होती है, और उसमें सिर्फ़ पाथ, ग्रुप और टाइटल हो सकते हैं।
क्योंकि ज्योमेट्री असली है, प्रीव्यू पाथ की असली संख्या और इस्तेमाल हुआ पैलेट बताता है। अगर कोई लोगो 6 रंगों के साथ 6 पाथ के रूप में आता है, तो फ़ाइल में सचमुच यही है।
हमारे एक उदाहरण वर्डमार्क का “Fe”, बराबर बड़ा किया हुआ: 256 px का PNG अपना पिक्सेल ग्रिड दिखाता है (बाएं); फ़ुल-साइज़ इमेज से ट्रेस किया गया SVG वही किनारे कर्व के रूप में बनाता है, जो किसी भी साइज़ पर शार्प रहते हैं (दाएं)।
किसी भी SVG को खुद कैसे जांचें
- फ़ाइल को किसी सादे टेक्स्ट एडिटर में खोलें।
<path,<polygonया<circleएलिमेंट ढूंढें — यह ज्योमेट्री है।<imageढूंढें — यह रैपर है। - इसे ब्राउज़र में खोलें और 800 % तक ज़ूम करें। वेक्टर के किनारे शार्प रहते हैं; रैपर धुंधला या चौकोर-चौकोर हो जाता है।
- इसे Inkscape जैसे किसी वेक्टर एडिटर में इंपोर्ट करें। ट्रेस में आप अलग-अलग शेप पर क्लिक कर सकते हैं; रैपर एक ही तस्वीर की तरह चुना जाता है।
- फ़ाइल साइज़ की तुलना करें। लपेटा हुआ PNG कम से कम उतना ही बड़ा होता है जितना PNG (base64 करीब एक-तिहाई और जोड़ देता है); ट्रेस किया गया लोगो आमतौर पर कुछ किलोबाइट का होता है।
ट्रेसिंग क्या नहीं कर सकती
ट्रेसिंग फ़्लैट हिस्सों को दोबारा बनाती है। जो डिटेल पिक्सेल में कभी थी ही नहीं, उसे यह वापस नहीं ला सकती: 64 पिक्सेल चौड़ा आइकन किसी भी सेटिंग पर ट्रेस करें, वह 64 पिक्सेल चौड़ा डिज़ाइन ही रहता है, जिसके कर्व उन्हीं पिक्सेल से अंदाज़े से बने हैं। फोटो और स्मूद ग्रेडिएंट फ़्लैट रंगों की पट्टियां बन जाते हैं (फोटो पोस्टर जैसी क्यों बनती हैं, इस पर गाइड देखें)। टेक्स्ट आउटलाइन बन जाता है, एडिट करने लायक टाइप नहीं। यह इस तकनीक का स्वभाव है, कोई सेटिंग नहीं जिसे आप बंद कर सकें। कौन-सी इमेज अच्छी तरह वेक्टराइज़ होती हैं और कौन-सी नहीं, यह इमेज को वेक्टर में बदलें पेज पर बताया गया है।
प्रीव्यू क्यों ज़रूरी है
कुछ भी अनलॉक करने से पहले png2svg.art ट्रेस किए गए नतीजे का वॉटरमार्क वाला प्रीव्यू दिखाता है; साफ़ SVG डाउनलोड के लिए अनलॉक के बाद ही बनता है। प्रीव्यू उन्हीं पाथ से बनता है जो आप डाउनलोड करेंगे, इसलिए अगर छोटे अक्षर आपस में मिल गए या कोई पतली लाइन टूट गई, तो क्रेडिट खर्च करने से पहले ही आपको दिख जाता है। साफ़ SVG अनलॉक करने की कीमत 1 क्रेडिट है; हर वेरिफ़ाइड अकाउंट को 3 फ्री क्रेडिट मिलते हैं।