SVG स्प्राइट जनरेटर
कई SVG आइकॉन ड्रॉप करें, ऑटो-जनरेटेड, कोलिज़न-सेफ़ ID के साथ एक मिली-जुली
<symbol> स्प्राइट शीट पाएं.
क्लिक करके .svg फ़ाइलें चुनें, या उन्हें यहां ड्रैग-ड्रॉप करें
एक साथ कई आइकॉन चुनें. आपकी डिवाइस पर ही रहता है, कुछ भी अपलोड नहीं होता.
आइकॉन
यह कैसे काम करता है
हर अपलोड की गई SVG को ब्राउज़र के अपने DOM पार्सर से पार्स किया जाता है, इसका
viewBox (या अगर viewBox सेट नहीं है तो width/height) पढ़ा जाता है, और इसका
इनर मार्कअप एक <symbol id="..." viewBox="..."> एलिमेंट में लपेटा जाता
है. फिर सभी सिंबल को एक ही छिपे हुए <svg> में मिला दिया जाता है, यह वही
स्टैंडर्ड "SVG स्प्राइट" पैटर्न है जिससे कई आइकॉन एक ही रिक्वेस्ट में मिलते हैं, न कि कई
अलग-अलग इमेज फ़ाइलों या इनलाइन कॉपी में. ID हर फ़ाइल के नाम से बनते हैं और अगर दो फ़ाइलें
टकराती हैं तो अपने आप अलग कर दिए जाते हैं.
पार्सिंग और मिलाना दोनों पूरी तरह इस पेज के जावास्क्रिप्ट में होते हैं. आपके अपलोड किए गए में से कुछ भी कहीं नहीं भेजा जाता.
सामान्य प्रश्न
सिंबल स्प्राइट कैसे काम करता है?
हर आइकॉन एक छिपे हुए <svg> के अंदर <symbol id="..."> बन जाता है, जिसे आपके पेज की HTML में कहीं भी एक बार रखा जाता है. फिर कोई भी एलिमेंट <svg><use href="#id"></use></svg> से उस आइकॉन को रेंडर करता है, यानी ब्राउज़र आर्टवर्क को एक ही बार डाउनलोड और पार्स करता है, चाहे वह कितनी भी बार इस्तेमाल हो.
आइकॉन ID कैसे जनरेट होते हैं?
हर फ़ाइल के नाम से: लोअरकेस किया जाता है, नॉन-अल्फ़ान्यूमेरिक कैरेक्टर हाइफ़न से बदले जाते हैं, एक्सटेंशन हटा दिया जाता है. अगर दो फ़ाइलों का ID एक जैसा बनता है, तो हर सिंबल को अलग एड्रेस देने के लिए एक नंबर वाला सफ़िक्स जोड़ दिया जाता है.
क्या मेरे आइकॉन कहीं अपलोड होते हैं?
नहीं. फ़ाइलें पूरी तरह आपके ब्राउज़र में File API से पढ़ी और मिलाई जाती हैं. कुछ भी अपलोड नहीं होता.