हमने स्केल किया एसवीजी के साथ सीवी स्प्राइट्स, एक पत्थर से तीन पक्षियों को मारना

हेलो, हैबर।
मैं तुरंत ध्यान देना चाहता हूं कि अगर हम आइकन के बारे में बात कर रहे हैं, तो उन्हें दो तरीकों से स्केल किया जा सकता है (मैं सिर्फ दूसरों को नहीं जानता): आइकन को एक फ़ॉन्ट में परिवर्तित करें और उन्हें @ फ़ॉन्ट-फेस के माध्यम से कनेक्ट करें, या इन आइकन के रूप में एसवीजी का उपयोग करें।

विषय से थोड़ा दूर और पृष्ठभूमि बताएं।

प्रागितिहास

मैंने अपनी साइट पर फ़ॉन्ट आइकन का उपयोग करने का निर्णय लिया, ऐसा लगता है कि सब कुछ ठीक है: आप आकार बदल सकते हैं, और रंग सेट कर सकते हैं और सर्वर से अनुरोध केवल एक है (फ़ॉन्ट कनेक्ट करने के लिए)। दूसरे शब्दों में, प्लग-इन फ़ॉन्ट एक प्रकार का "सीएसएस स्प्राइट" है, है ना?

अगर हर जगह सब कुछ सुंदर दिखता है, तो आइए देखें यह पता चला कि सब कुछ उतना अच्छा नहीं था जितना हम चाहेंगे, क्योंकि कुछ आकारों में आइकन तिरछे दिख रहे थे, और जब एंटी-एलियासिंग को बंद कर दिया गया, तो यह आम तौर पर उन्हें देखने के लिए घृणित हो गया। क्या करें? दूसरे विकल्प का उपयोग करें - एसवीजी, जिस पर चर्चा की जाएगी।

एसवीजी के साथ सीएसएस स्प्राइट

एसवीजी प्रारूप में तह स्प्राइट का विचार नया नहीं है। निश्चित रूप से, कई ने इस पोस्ट को smashingmagazine पर पढ़ा है। इसलिए, मैंने लेखक के विचार, प्रयोग को विकसित करने और अधिक लचीले विकल्प की पेशकश करने का निर्णय लिया। और सब कुछ स्पष्ट करने के लिए, मैं यहां कुछ उदाहरण दोहराऊंगा।

तो, शुरुआत के लिए, हमें एक एसवीजी स्प्राइट करने की आवश्यकता है। मुझे पता नहीं चला है कि एसवीजी फ़ाइल को प्रोग्रामेटिक रूप से कैसे बनाया जाए (मुझे उम्मीद है कि समुदाय मुझे माफ कर देगा और एक लिंक देगा जहां इसके बारे में पढ़ना है)। इसलिए, मैं CorelDRAW (इलस्ट्रेटर मुझे लगता है कि यह भी उपयुक्त है) में अपना स्प्राइट करूंगा और एसवीजी में इसे बचाऊंगा।

त्वरित कार्यान्वयन के लिए, मैंने एक फ़ॉन्ट का उपयोग किया और इन आइकन (क्लिक करने योग्य) को मुद्रित किया:



उदाहरण के लिए मनमाना HTML कोड लें:

<div class="icons"> <a class="tw" href="#">Twitter</a> <a class="fb" href="#">Facebook</a> <a class="vk" href="#"></a> <a class="gl" href="#">Google+</a> <a class="rs" href="#">RSS</a> </div> 

आइए CSS में सबसे बुनियादी बात लिखते हैं:

 .icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /*      */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /*     smashingmagazine.com,   px  em    */ .icons .tw {background-position: 0 0;} .icons .fb {background-position: 0 -48px;} .icons .vk {background-position: 0 -96px;} .icons .gl {background-position: 0 -144px;} .icons .rs {background-position: 0 -192px;} 

यह एक विशेषता पर ध्यान देने योग्य है कि स्प्राइट।एसवीजी 76x520 के स्पष्ट रूप से परिभाषित आयामों के साथ बनाया गया है, अर्थात्। अधिकतम आकार जिससे हम अपना आइकन बढ़ा सकते हैं वह 76x76 होगा।

लेकिन अगर हम एसवीजी को रिश्तेदार आकारों के साथ रखते हैं, तो क्या होगा। प्रतिशत में? यह बेहतर है, क्योंकि प्रतीक अब पूरी तरह से किसी भी आकार के हो सकते हैं और उनकी गुणवत्ता नहीं खो सकते हैं।

सीएसएस शैली थोड़ा बदल जाता है:

 /*      */ .icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /*      */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /*        */ .icons .tw {background-position: 0 0;} .icons .fb {background-position: 0 -25%;} .icons .vk {background-position: 0 -50%;} .icons .gl {background-position: 0 -75%;} .icons .rs {background-position: 0 -100%;} 

परिणाम समान है, लेकिन background-size कोई भी हो सकता है, जो भी हो।

जटिल स्प्राइट बनाएं

ऊपर के उदाहरण में, केवल 5 आइकन का उपयोग किया गया था और प्रतिशत की गणना करना इतना मुश्किल नहीं है। आइए एक अधिक जटिल उदाहरण देखें। अब तक एक ही "फ़ॉन्ट" आइकन के साथ। मान लीजिए कि हमारे पास एक प्रेत है:



हम क्या करते हैं, या HTML में एक नया i टैग जोड़ते हैं, जिसके लिए हम एक आइकन के साथ शैली लिख सकते हैं:

 <div class="icons"> <a class="tw" href="#"><i></i>Twitter</a> <a class="fb" href="#"><i></i>Facebook</a> <a class="vk" href="#"><i></i></a> <a class="gl" href="#"><i></i>Google+</a> <a class="rs" href="#"><i></i>RSS</a> </div> 

या तो हम छद्म तत्वों का उपयोग करके आइकन बनाते हैं ::before या ::after । मैं छद्म तत्व ::before उपयोग करूँगा, आप - जैसा आपको अच्छा लगे।

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

तो, चलिए CSS में कुछ बदलाव करते हैं:

 .icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /*  */ position: relative; } /*     ::before */ .icons a::before { position: absolute; left: 0; top: 0; content: ''; width: 25px; height: 25px; /*      */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /*          (      ,   ) */ .icons .tw::before {background-position: 0 0;} .icons .fb::before {background-position: 0 -25%;} .icons .vk::before {background-position: 0 -50%;} .icons .gl::before {background-position: 0 -75%;} .icons .rs::before {background-position: 0 -100%;} 

मैं कुछ स्पष्टीकरण करूंगा, अन्यथा मैं लगभग खुद ही भ्रमित हो गया :)।

background-size: 20px auto; संख्या "20" हमारे द्वारा आवश्यक आइकन का आकार है, और "ऑटो" स्प्राइट का शेष आकार है। यदि हम उदाहरण के लिए "ऑटो" को 20px से बदलते हैं, तो एक आइकन के बजाय हमें 20x20 पिक्सेल के आकार के साथ पूरे स्प्राइट मिलते हैं।

इसके अलावा, छद्म तत्व द्वारा गठित ब्लॉक की चौड़ाई और ऊंचाई, अर्थात्। background-size साथ मिलकर background-size अब आपको width और height को बदलने की आवश्यकता है ताकि आइकन फसल न करे।

हम सापेक्ष आकारों की गणना करते हैं

शायद यह महत्वपूर्ण बिंदु है और आपको एक विकल्प बनाना चाहिए, या तो आप पूर्ण आकार निर्धारित करें और जब background-size , width और height बदल रहे हों, तो उन्हें भी बदल दें, या (जो अधिक कठिन है) सापेक्ष आकारों की गणना करें और जब background-size , width और height बदल रहे हों, तो कुछ भी नहीं। मत बदलो।

तो, स्प्राइट का वास्तविक आकार 500x250 पिक्सेल, प्रति पंक्ति 10 आइकन और प्रति स्तंभ 5, कुल 50 आइकन (उदाहरण 49 में) आकार में प्रत्येक 50x50 पिक्सेल है।

आकार की गणना करना काफी सरल है, क्योंकि हम स्प्राइट के वास्तविक आकार का निर्माण करेंगे। स्प्राइट्स के साथ किसने काम किया, यह बताने लायक नहीं है। सच है, यहां एक सूक्ष्मता है - आइकन का आकार क्रमशः 20 पिक्सेल तक कम हो गया है, स्प्राइट भी बदल गया है और 200x100 पिक्सल (10 * 20 और 5 * 20) के बराबर हो गया है, जिसका अर्थ है कि हम आकार ( background-position ), या 0 पर भी विचार करेंगे। , 0 -20px, -20px 0, -20px -20px, 0 -40px, -40px 0, -40px -40px आदि, या 0 0, 0 -11.1%, 0 -22.2% 0 -33.3, 25% 0, 25% -11.1%, 25% -22.2%, 25% -33.3, आदि।

इस प्रकार, हम किसी भी जटिलता का एक प्रेत बना सकते हैं और प्रत्येक तत्व के लिए background-position गणना कर सकते हैं। सौभाग्य से या दुर्भाग्य से, एक जिज्ञासु मन हमें जो कहा गया है उस पर ध्यान केंद्रित करने की अनुमति नहीं देता है, इसलिए, एक और भी जटिल उदाहरण पर एक त्वरित नज़र डालें।

एसवीजी के साथ अधिक जटिल स्प्राइट

मान लें कि हमारे पास कुछ प्रकार के डिज़ाइन हैं, मैंने इसे लगभग (क्लिक करने योग्य) दर्शाया है:



मान लीजिए कि आयतें किसी तरह की सुंदर क्लिप आर्ट हैं, यह कठिन है, लेकिन मान लीजिए। हम क्या कर सकते हैं:
1. मूल परत को बदले बिना सभी परतों को एक स्प्राइट में रखें और प्रत्येक तत्व को संबंधित तत्व में रखें;
2. सभी परतों को एक स्प्राइट में मोड़ो, सभी वस्तुओं को एक ही आकार में परिवर्तित करने और प्रत्येक वस्तु को संबंधित तत्व में स्थिति में लाने के लिए, ऑब्जेक्ट के आकार को आवश्यक आकार में बदल दें।

HTML या CSS कोड का उदाहरण देने के लिए, मुझे लगता है, अब कोई मतलब नहीं है। और इसलिए सब कुछ स्पष्ट है, पिछले उदाहरणों के साथ सादृश्य द्वारा कॉन्फ़िगर किया गया है।

निष्कर्ष में

अब मैं एसवीजी के साथ स्प्राइट्स के फायदे को संक्षेप और नोट करना चाहता हूं। सबसे पहले, हमें केवल एक फ़ाइल मिली, जिसका अर्थ है कि उत्तर के लिए एक अनुरोध - hare1 को मार दिया गया था, दूसरे, SVG फ़ाइल का वजन उदाहरण के लिए PNG या JPG से बहुत कम है, और इसलिए डाउनलोड गति अधिक है - hare2 को मार दिया गया, तीसरा , हमें छवि गुणवत्ता के नुकसान के बिना असीमित स्प्राइट आकार मिला, जिसका अर्थ है कि हमने असीमित छवि स्केलिंग के साथ समस्या को हल किया - हर 3 की मौत हो गई।

फ़ॉन्ट आइकन के सामने SVG का एकमात्र माइनस: आप CSS के साथ आइकनों को नहीं सजा सकते हैं, उदाहरण के लिए, text-shadow जोड़ें या रंग बदलें। और एक बहुत बड़ा प्लस यह है कि एंटी-अलियासिंग अक्षम के साथ, एसवीजी में सभी लाइनें फ़ॉन्ट के विपरीत सपाट और स्पष्ट होंगी।

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

आपका ध्यान देने के लिए धन्यवाद। हम फिर मिलेंगे तक।

UPD: ::before और ::after में छद्म तत्व हैं, छद्म वर्ग नहीं - क्षमा करें, गलत, सही। धन्यवाद psywalker समय में संकेत दिया।
UPD: और "::" के बारे में मुझे याद नहीं है :( प्रमाण