SVGcode एक प्रोग्रेसिव वेब ऐप्लिकेशन है. इसकी मदद से, JPG, PNG, GIF, WebP, AVIF वगैरह जैसी रेस्टर इमेज को SVG फ़ॉर्मैट में वेक्टर ग्राफ़िक में बदला जा सकता है. यह File System Access API, Async Clipboard API, File Handling API, और Window Controls Overlay के कस्टमाइज़ेशन का इस्तेमाल करता है.
रेस्टर से वेक्टर में बदलना
क्या आपने कभी किसी इमेज को स्केल किया है और नतीजा पिक्सल वाला और खराब रहा है? अगर ऐसा है, तो हो सकता है कि आपने WebP, PNG या JPG जैसे रास्टर इमेज फ़ॉर्मैट का इस्तेमाल किया हो.
इसके उलट, वेक्टर ग्राफ़िक ऐसी इमेज होती हैं जिन्हें निर्देशांक सिस्टम में पॉइंट के हिसाब से तय किया जाता है. इन बिंदुओं को लाइनों और कर्व से जोड़कर पॉलीगॉन और अन्य आकार बनाए जाते हैं. वेक्टर ग्राफ़िक का रेस्टर ग्राफ़िक के मुकाबले यह फ़ायदा है कि इन्हें पिक्सल किए बिना, किसी भी रिज़ॉल्यूशन में बड़ा या छोटा किया जा सकता है.
पेश है SVGcode
मैंने SVGcode नाम का एक PWA बनाया है. इसकी मदद से, रेस्टर इमेज को वैक्टर में बदला जा सकता है. क्रेडिट जहां क्रेडिट देना है: मैंने इसे नहीं बनाया है. SVGcode में, मैंने पीटर सेलिंगर के बनाए Potrace कमांड लाइन टूल का इस्तेमाल किया है. मैंने इस टूल को वेब असेंबली में बदला है, ताकि इसका इस्तेमाल वेब ऐप्लिकेशन में किया जा सके.
SVG कोड का इस्तेमाल करना
सबसे पहले, मैं आपको ऐप्लिकेशन इस्तेमाल करने का तरीका बताना चाहता/चाहती हूं. इसके लिए, मैं Chrome Dev Summit के टीज़र इमेज का इस्तेमाल करूंगा/करूंगी. मैंने यह इमेज, ChromiumDev के ट्विटर चैनल से डाउनलोड की है. यह एक PNG रेस्टर इमेज है, जिसे मैंने SVGcode ऐप्लिकेशन पर खींचकर छोड़ा है. फ़ाइल छोड़ने पर, ऐप्लिकेशन इमेज के रंग को एक-एक करके ट्रैक करता है. ऐसा तब तक होता है, जब तक इनपुट का वेक्टर वर्शन नहीं दिख जाता. अब मैं इमेज में ज़ूम इन कर सकती हूं. जैसा कि आप देख सकते हैं, इसके किनारे शार्प बने रहते हैं. हालांकि, Chrome के लोगो पर ज़ूम इन करके देखा जा सकता है कि ट्रेसिंग पूरी तरह से सही नहीं है. खास तौर पर, लोगो की आउटलाइन थोड़ी धुंधली दिख रही हैं. मैं नतीजे को बेहतर बना सकता हूं. इसके लिए, ट्रैसिंग में मौजूद स्पैकल को हटाकर, पांच पिक्सल तक के स्पैकल को दबाया जा सकता है.
SVGcode में पोस्टराइज़ेशन
वेक्टराइज़ेशन के लिए, खास तौर पर फ़ोटोग्राफ़िक इमेज के लिए, इनपुट इमेज को पोस्टराइज़ करना एक अहम चरण है. इससे रंगों की संख्या कम हो जाती है. SVGcode की मदद से, हर कलर चैनल के लिए ऐसा किया जा सकता है. साथ ही, बदलाव करते समय नतीजा के तौर पर मिलने वाला SVG देखा जा सकता है. जब मुझे नतीजा पसंद आता है, तो मैं एसवीजी फ़ाइल को अपनी हार्ड डिस्क पर सेव कर सकता/सकती हूं और उसे कहीं भी इस्तेमाल कर सकता/सकती हूं.
SVGcode में इस्तेमाल किए जाने वाले एपीआई
अब आपको पता चल गया है कि यह ऐप्लिकेशन क्या-क्या कर सकता है. अब हम आपको कुछ ऐसे एपीआई के बारे में बताएंगे जिनकी मदद से यह ऐप्लिकेशन ऐसा कर पाता है.
प्रोग्रेसिव वेब ऐप्लिकेशन
SVGcode एक इंस्टॉल किया जा सकने वाला प्रोग्रेसिव वेब ऐप्लिकेशन है. इसलिए, यह पूरी तरह से ऑफ़लाइन काम करता है. यह ऐप्लिकेशन, Vite.js के लिए Vanilla JS टेंप्लेट पर आधारित है. साथ ही, यह लोकप्रिय Vite प्लग इन PWA का इस्तेमाल करता है. यह एक ऐसा सेवा वर्कर बनाता है जो Workbox.js का इस्तेमाल करता है. Workbox, लाइब्रेरी का एक सेट है. इससे प्रगतिशील वेब ऐप्लिकेशन के लिए, प्रोडक्शन के लिए तैयार सर्विस वर्कर को बेहतर बनाया जा सकता है. ऐसा ज़रूरी नहीं है कि यह पैटर्न सभी ऐप्लिकेशन के लिए काम करे, लेकिन SVGcode के इस्तेमाल के उदाहरण के लिए यह बेहतरीन है.
विंडो कंट्रोल ओवरले
SVGcode, स्क्रीन के उपलब्ध हिस्से का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, Window Controls Overlay की सुविधा को अपनी पसंद के मुताबिक बनाता है. इसके लिए, यह अपने मुख्य मेन्यू को टाइटल बार वाले हिस्से में ऊपर ले जाता है. इंस्टॉल फ़्लो के आखिर में, यह सुविधा चालू हो जाती है.