SVG हर पिक्सेल घनत्व पर किनारे साफ़ रखता है और थीम के अनुसार रंग बदल सकता है। इस लचीलेपन के साथ एक शर्त है: फ़ाइल अपने आप में पूरी, सरल और बहुत छोटी जगह में भी पहचानने योग्य रहे।
viewBox से वर्ग बनाएँ
0 0 64 64 जैसा वर्गाकार viewBox रखें और चिह्न के आसपास खाली जगह छोड़ें। viewBox निर्देशांक प्रणाली तय करता है, दिखाए जाने वाले चित्र का भौतिक आकार नहीं।
चित्र में केवल उसकी पहचान बनाने वाली आकृतियाँ रखें। बारीक विवरण, अक्षरों के भीतर छोटे खाली हिस्से और पूरे शब्द अक्सर 16 पिक्सेल पर गायब हो जाते हैं, भले ही वेक्टर फ़ाइल तकनीकी रूप से साफ़ बनी रहे।
| बिंदु | क्यों | जाँच |
|---|---|---|
| वर्गाकार viewBox | अनुमान के अनुसार कटाई | 16×16 पूर्वावलोकन |
| सरल पाथ | स्पष्ट पहचान | लाइट और डार्क टैब |
| बाहरी निर्भरता नहीं | स्वतंत्र रूप से लोड होना | ऑफ़लाइन नेटवर्क |
| वैकल्पिक ICO | पुराने क्लाइंट | रूट URL |
फ़ाइल को अपने आप में पूरा बनाएँ
ज़रूरी स्टाइल SVG के भीतर रखें। चिह्न किसी विशेष फ़ॉन्ट पर निर्भर हो तो टेक्स्ट को पाथ में बदलें, क्योंकि इस स्थिति में बाहरी वेब फ़ॉन्ट भरोसेमंद निर्भरता नहीं है।
स्क्रिप्ट, दूरस्थ लिंक और एडिटर का अनावश्यक metadata हटाएँ। सरल आकृतियाँ और स्टाइल सुरक्षा समीक्षा आसान बनाते हैं और फ़ाइल का आकार घटाते हैं।
अंत में फ़ाइल को अकेले ब्राउज़र में खोलें और ऑफ़लाइन जाँचें। चित्र बदलता या गायब होता है तो वह अब भी बाहरी संसाधन पर निर्भर है, जिसे भीतर जोड़ना या बदलना होगा।
विकल्प के साथ SVG घोषित करें
link rel icon में type image/svg+xml और रूट से शुरू होने वाला URL दें। SVG न चुनने या सीधे ICO माँगने वाले क्लाइंट के लिए रूट में favicon.ico भी रखें।
SVG, Apple Touch आइकन या मैनिफ़ेस्ट आइकन की जगह नहीं लेता। उन इंटरफ़ेस के लिए अपारदर्शी या maskable PNG फ़ाइलें एक्सपोर्ट करें।
थीम के अनुसार रंग बदलें
style तत्व के भीतर prefers-color-scheme नियम डार्क मोड में fill या stroke बदल सकता है। पहले भरोसेमंद डिफ़ॉल्ट रंग तय करें, फिर क्रमिक सुधार के रूप में दूसरा संस्करण जोड़ें।
वास्तविक टैब में और कई ज़ूम स्तरों पर फ़ाइल जाँचें। SVG न चुने जाने पर वैकल्पिक फ़ाइल भी देखें: डार्क पृष्ठभूमि पर गायब होने वाला ICO उन क्लाइंट के लिए अब भी समस्या है।
प्राथमिक स्रोत
अक्सर पूछे जाने वाले सवाल
क्या SVG में width और height ज़रूरी हैं?
आकार बदलने के लिए वर्गाकार viewBox मुख्य ज़रूरत है। width और height स्पष्ट रूप से दे सकते हैं, लेकिन ब्राउज़र उपयोग की जगह के अनुसार आइकन का आकार तय करता है।
क्या यह बाहरी फ़ॉन्ट लोड कर सकता है?
इस पर भरोसा न करें। अपने आप में पूरी और हर बार एक जैसी फ़ाइल के लिए अक्षरों को पाथ में बदलें।
क्या iOS के लिए SVG काफ़ी है?
नहीं। होम स्क्रीन के लिए अलग अपारदर्शी PNG Apple Touch आइकन दें।