फजी आइकॉन हमें बाहर पहनते हैं

रेटिना डिस्प्ले के आगमन के बाद, लोग पीएनजी आइकन के विकल्प की तलाश कर रहे हैं जो संकल्प पर निर्भर नहीं हैं। किसी को फ़ॉन्ट आइकन के साथ प्यार हो जाता है, तो अन्य लोग "एसवीजी" चिल्लाते हैं। मुझे क्षमा करें, लेकिन अगर आप एक रामबाण इलाज की तलाश में हैं, तो मुझे डर है कि यह मौजूद नहीं है। आइए एक नज़र डालते हैं कि हमारे पास क्या विकल्प हैं।

आइकन फोंट अद्भुत हैं, लेकिन ...

वे धुंधले हैं। उनके पास वास्तविक, पिक्सेल-बाय-पिक्सेल तीक्ष्णता नहीं है। हां, आइकन के लिए @ फ़ॉन्ट-फेस के उपयोग ने उल्लेखनीय लोकप्रियता प्राप्त की है। मैंने खुद सिफारिश की और उन्हें इकट्ठा करना भी शुरू कर दिया। लेकिन इस तरह के बैज में एक दोष है जो मुझे परेशान करता है। वे अभी भी असंगत प्रदर्शनों पर थोड़े धुंधले हैं (और अभी भी विशाल बहुमत हैं)। डेमो में क्रिस के आकार को नियंत्रित करने और करीब से देखने का प्रयास करें। प्रभाव अलग-अलग आकारों में अलग-अलग रूप से प्रकट होता है, लेकिन वे सभी " आधे-पिक्सेल धब्बा " की एक ही समस्या है। शायद इसे नोटिस करना इतना आसान नहीं है, इसलिए यहां मैंने पंद्रह-पिक्सेल आकार के स्क्रीनशॉट को बढ़ाया (और एक ही समय में पृष्ठभूमि शोर को हटा दिया गया):



सबपिक्सल स्मूथिंग घुमावदार लाइनों पर बहुत अच्छा काम करता है, लेकिन सीधी रेखाओं पर नहीं - वे बस तेज दिखना बंद कर देते हैं। सिद्धांत रूप में, फॉन्ट हिन्टिंग का उपयोग पूर्णांक-पिक्सेल वाले आइकनों की रूपरेखा बनाने के लिए किया जा सकता है। लेकिन अभी तक मुझे ऐसा कोई भी आइकॉन फॉन्ट नहीं पता है जो ऐसा किया होगा। मैं यह भी अनुमान लगाता हूं कि हंटिंग को फ़ॉन्ट लेखक द्वारा महत्वपूर्ण अतिरिक्त काम की आवश्यकता होगी और फ़ाइल आकार में उल्लेखनीय रूप से वृद्धि होगी।

परिशिष्ट : @thijs नोटिस जो इशारा करते हैं केवल उन्हीं प्रणालियों पर काम करते हैं जो इसका समर्थन करते हैं - और यह OS X, iOS और Android पर मदद नहीं करेगा।

बचाव के लिए एसवीजी?

नहीं, वास्तव में। एसवीजी आइकन के उपयोग का एक बड़ा फायदा है: अपने मूल आकार में, वे एक पिक्सेल के लिए स्पष्ट, स्पष्ट दिखते हैं। हालाँकि, जैसे ही आप उनका आकार बदलना शुरू करते हैं, वे तब भी उप-धुंधला होते हैं जब तक कि आप एक आकार तक नहीं पहुँच जाते हैं जो कि उनके मूल आकार का एक गुण है । आंतरिक क्रॉस की उपस्थिति पर ध्यान दें:



व्यवहार में, केवल कई आकारों का उपयोग करके इसे दूर किया जा सकता है। आप अपने सभी आइकन मुख्य आकार (जैसे, 16 पिक्सेल) में बनाते हैं, और बड़े बटन पर 32 पिक्सेल या 48 पिक्सेल के बढ़े हुए संस्करण का उपयोग करते हैं।

परिशिष्ट : @erikdahlstrom हां @Marco_Rosella ने संपत्ति का " आकार-प्रतिपादन: कुरकुरापन " बताया। यदि यह एसवीजी में व्यक्तिगत आयतों पर आरोपित है, तो यह उन्हें पूर्णांक-पिक्सेल बनने के लिए मजबूर करेगा। अनुपात विकृत हो सकता है, लेकिन स्पष्टता बनी रहेगी। आप jsFiddle में कोशिश कर सकते हैं।

कोई दिक्कत नहीं? काश ऐसा होता; लेकिन अन्य कठिनाइयाँ हैं:

• एसवीजी में कई अच्छे आइकन सेट नहीं हैं।
  
• एसवीजी स्प्राइट बनाने के लिए उपकरणों की कमी ।
  
• आप CSS का उपयोग करके किसी आइकन का रंग नहीं बदल सकते। यही है, यह संभव है , लेकिन केवल अगर एसवीजी कोड आंतरिक (इनलाइन) है , और एसवीजी के टुकड़े को दस्तावेज़ के मार्कअप में जोड़ना मुझे खुश नहीं करता है।
  
• आप प्रभाव लागू नहीं कर सकते हैं - उदाहरण के लिए, एक छाया। (एसवीजी में फिल्टर हैं, लेकिन, फिर से, आप सीएसएस के माध्यम से उन्हें आसानी से नहीं बदल सकते।)
  
• और यहां सबसे बड़ा बुमेर: फ़ायरफ़ॉक्स और ओपेरा ब्राउज़र में खराब समर्थन है जब एसवीजी पृष्ठभूमि-छवि के रूप में उपयोग किया जाता है। यह पता चला है कि एसवीजी वास्तव में एक रेखापुंज में परिवर्तित हो जाता है, और जब पृष्ठभूमि का आकार बदलता है, तो ब्राउज़र इसे फिर से नहीं करता है - यह केवल खिंचाव करता है, और पृष्ठभूमि असामान्य रूप से धुंधली दिखती है। भाषा इसे स्केलेबल वेक्टर ग्राफिक्स कहने की हिम्मत नहीं करती है।

यहां फ़ीड है , आप इसे स्वयं जांच सकते हैं।

आप निश्चित रूप से इनलाइन एसवीजी का उपयोग कर सकते हैं या एसवीजी को <img> तत्व में डाल सकते हैं, लेकिन तब एसवीजी को स्प्राइट बनाना मुश्किल है। क्या तत्वों को एक-दूसरे में रखना और बाहर तक "अतिप्रवाह: छिपाया" सेट करना संभव है? लेकिन यह अभी भी पृष्ठभूमि-छवि की तरह सीधा और लचीला नहीं है।

अनुपूरक : डेविड बुशेल ने एसवीजी के आकार को बड़ा बनाकर केवल कम करने के लिए एक वर्कअराउंड पाया, न कि वृद्धि के लिए।

PNG का

कई आइकन फोंट में एक पीएनजी संस्करण भी होता है जिसका उपयोग फ़ॉन्ट के स्थान पर किया जा सकता है, लेकिन आपको रेटिना डिस्प्ले पर उच्च-परिभाषा विकल्प प्रदर्शित करने की समस्या को हल करना होगा। मीडिया क्वेरी " डिवाइस-पिक्सेल-अनुपात " मदद कर सकती है। खैर, Apple ने सिर्फ " -webkit-image-set " लागू किया - यह आशाजनक लगता है, लेकिन कार्यान्वयन में समय लगेगा।

तो क्या करें? जैसा कि मैंने कहा ... कोई रामबाण नहीं है, लेकिन ...

यहाँ एक छोटा सा नुस्खा है जो मदद कर सकता है।

1. एक नई परियोजना शुरू करना, प्रोटोटाइप के डिजाइन और विकास में आइकन फोंट का उपयोग करना। कुछ भी नहीं, जल्दी से और आसानी से बदलने वाले आइकनों की स्वतंत्रता को धड़कता है, उन्हें फिर से रंगना, छाया डालना और अन्य प्रभाव लागू करना।
   
2. फिर कुछ बिंदु पर आपको एक निर्णय करना होगा: क्या यह एसवीजी या पीएनजी प्रारूप में माउस को अपने सभी कमियों के साथ स्विच करने के लिए लायक है। निर्णय इतना आसान नहीं है; यह सब आवश्यकताओं और प्राथमिकताओं पर निर्भर करता है। हो सकता है कि आपको एक योजना भी बनानी होगी ;-) आपको उपरोक्त प्रारूप सीमाओं के साथ तैयार रहना चाहिए। यह देखें कि क्या अतिरिक्त काम मौजूदा बजट में फिट होगा, गिनती करें कि कितने आइकन हैं, चाहे उन्हें अलग-अलग आकारों में आवश्यकता होगी या नहीं।

सभी अनुप्रयोगों के लिए उपयुक्त एक चित्र प्रारूप, दुनिया में नहीं है; शायद कभी नहीं होगा। तो क्यों नहीं उन्हें एक साथ मिलाया जाता है? शायद उच्च परिभाषा वाले बहु-रंगीन लोगो के लिए PNG (विभिन्न आकारों में) का उपयोग करना सबसे अच्छा है, और उसी आकार के नेविगेशन बटन के लिए SVG आइकन (लेकिन रेटिना डिस्प्ले पर तेज दिखते हैं)। ग्राफ़ और चार्ट के लिए उत्तरदायी इनलाइन एसवीजी, विभिन्न आकारों के आपके सभी बटन के लिए आइकन के साथ फ़ॉन्ट। आखिरकार, हम इस तरह से कार्य करते हैं।

भविष्य में देखो

क्या इसके फजी चिह्नों के साथ मौजूदा परेशानी की स्थिति से बाहर निकलने का रास्ता है? खैर ... चलो बस थोड़ा इंतजार करें ... जैसे ही हर जगह रेटिना डिस्प्ले होता है (हाँ, इसमें कुछ साल लगेंगे), सब-पिक्सेल स्पष्टता की समस्या समाप्त हो जाएगी, और ब्राउज़र शायद एसवीजी बढ़ाने की अपनी समस्याओं को ठीक कर देंगे, और फिर हम सभी आइकन की उपस्थिति का जश्न मनाएंगे जो निर्भर नहीं करते हैं अनुमति? लेकिन फिर भी हमें आकार पर विस्तार की निर्भरता की समस्या को हल करना होगा।