🌄 🐕 👆🏿 CSS की शक्ति आपको आकार लेने में मदद करेगी, एसवीजी! ㊗️ 🖕 👨🏻‍🍳

हमें चाहिए:

एसवीजी का उपयोग करके साइट पर अपने स्वयं के आइकन सेट करें।
उन्हें सीएसएस (आकार, आकार, भरण, प्रभाव, उनके व्यवहार सहित) का उपयोग करके प्रबंधित किया जाना चाहिए।
Http अनुरोधों को बचाने के लिए उन्हें वजन में हल्का और एक स्थान पर होना चाहिए।
सभी प्रमुख आधुनिक ब्राउज़रों में काम करें।

मैं यह क्यों लिख रहा हूँ?

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

मुझे कहना होगा हाँ, मैंने आइकन फोंट का इस्तेमाल किया, यहाँ समस्याएं हैं:
1. ब्राउज़र में ऐसे आइकन एक फ़ॉन्ट के रूप में और विंडोज में प्रस्तुत किए जाते हैं, उदाहरण के लिए, साबुन के किनारों को अक्सर प्राप्त किया जाता है। सीएसएस गुण हैं जो इस समस्या को हल करना चाहिए, लेकिन वे केवल WebKit में और केवल MAC के तहत काम करते हैं - अर्थात, वे बेकार हैं। डिजाइनर ने शपथ ली।
2. केवल 23 क्रोम में और केवल विंडोज के तहत ऐसा फॉन्ट गायब होना शुरू हुआ, और कुछ मामलों में साइट लेआउट के बाकी हिस्सों को दृढ़ता से "आंसू" करना था। मैंने कई बार इस तरह के फोंट का इस्तेमाल किया, लेकिन पहली बार अपने आइकनों के साथ। और पहली बार ऐसी समस्या।
3. आंतरिक छाया को जोड़ने में असमर्थ। इस परियोजना में एक होना चाहिए था। डिजाइनर ने शपथ ली।
4. ऐसे फॉन्ट का वजन। सी एसवीजी तुलनीय नहीं है।
5. फिर भी, एसवीजी में एक फॉन्ट की तुलना में अधिक विशेषताएं हैं।

आगे बढ़ना या स्रोत डेटा।

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

<!doctype html> <html> <head> <meta charset=utf-8 /> <title></title> <link rel="stylesheet" href="main.css"> </head> <body> <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <!--            --> </defs> </svg> </body> </html>

एक आइकन फ़ॉर्म जोड़ें

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

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="heart-path"> <path fill-rule="evenodd" clip-rule="evenodd" d="M256,512c0,0-256-144.938-256-311.694C0,29.22,240.62,10.145,256,192 c18.467-181.721,256-162.784,256,8.306C512,367.062,256,512,256,512z"/> </clipPath> </defs> </svg>

हमने दिल के आइकन के लिए रास्ता बनाया है। कृपया क्लिपपाथ टैग की आईडी = "हार्ट-पाथ" विशेषता पर ध्यान दें।
इसके माध्यम से हम अपने आइकन के रूप का उल्लेख करेंगे।

प्रतीक जोड़ें

हमारे आइकन को HTML डॉक्यूमेंट में डालें। इसमें एक छोटा एसवीजी दस्तावेज़ होता है, जिसके अंदर एक वर्ग डाला जाता है:

  <svg class="heart-icon icon" viewBox="0 0 512 512"> <rect width="512" height="512" /> </svg>

तुरंत हमें दृष्टिकोण का एक छोटा दोष दिखाई देता है - आइकन में दो तत्व होते हैं। समस्या, मेरे विचार में, सभी आइकन की संरचना बिल्कुल समान है, क्योंकि यह सहनीय है। यदि कुछ भी है, तो आप पूरे प्रोजेक्ट में खोज के माध्यम से आसानी से पा सकते हैं / बदल सकते हैं / हटा सकते हैं।

512 की संख्या पर ध्यान दें। यह उस वर्ग का आकार है जिसमें संपादक में खींचे जाने पर आइकन को अंकित किया गया था। आपका आइकन अलग हो सकता है। सीएसएस में आइकन के आकार को स्थापित करने के लिए दिल-आइकन वर्ग, सभी आइकन के लिए आइकन वर्ग एकरूपता वर्ग है (क्या कोई द्रव्यमान होगा?)।

अंतिम चरण। सीएसएस जोड़ें

आइए देखें क्या हुआ। यदि आपने सब कुछ सही ढंग से किया है, तो आपको 512 से 512 पिक्सेल का एक काला वर्ग दिखाई देगा । मालेविच पहले से ही मंजूर कर रहे हैं। लेकिन, मुझे डर है कि कोई भी हमारे अतिवाद के घोषणापत्र की सराहना नहीं करेगा। हम जारी रखते हैं।

क्या सब कुछ सही है, कोई आइकन नहीं हैं? मज़ा भाग के लिए हो रही - सीएसएस।

Main.css में, जिसे हम दस्तावेज़ से कनेक्ट करते हैं, हम दिल-आइकन और आइकन कक्षाओं के लिए शैलियों को लिखते हैं।

 .icon{ width:32px; height:32px; cursor:pointer; fill: #ccc; }

हमारा काला वर्ग ग्रे और 32x32 पिक्सेल का हो जाता है। भरण गुण हमारे आइकन का भरण सेट करता है।

 .heart-icon rect{ clip-path:url('#heart-path'); }

अंत में, आइकन का आकार दिखाई देता है ! क्लिप-पथ वास्तव में संपत्ति है जो ब्राउज़र को # हृदय-पथ आकार लेने और इसे वर्ग पर लागू करने के लिए मजबूर करती है।

आइकन के लिए व्यवहार जोड़ें। यह होगा: होवर,: सक्रिय राज्य और जाँच वर्ग।

 .heart-icon rect{ clip-path:url('#heart-path'); } .icon:hover{ fill: #999; } .icon:active, .icon.checked{ fill:red; }

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

हमारे सिस्टम में एक नया आइकन जोड़ने के लिए, आपको बस आवश्यकता है:

सामान्य एसवीजी दस्तावेज़ में आइकन के रूप में और आपकी आईडी के साथ एक नया क्लिप-पथ घोषित करने के लिए (<defs> अनुभाग में)।
CSS में आइकन आकार के लिए एक नया वर्ग बनाएं।

इतना सरल।

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

आंतरिक छाया जोड़ें

इसके लिए हम SVG फ़िल्टर का उपयोग करेंगे।
मैं आपको तुरंत चेतावनी देता हूं। इस उदाहरण के लिए, मुझे उनके ऊपर फ़िल्टर का उपयोग करते समय आइकन के साथ थोड़ी कठिनाई हुई। उनमें से कुछ कभी-कभी गायब हो जाते थे। कभी कभी। शायद केवल मैं। अलर्ट पर रहें। और एक और समस्या - ताकि फ़िल्टर अच्छी तरह से ओवरले हो जाए, आपको आइकन में एक और तत्व जोड़ने की आवश्यकता है। हाँ, बहुत खेद है। अब फ़िल्टर आइकन = 3 तत्व। इसलिए अगर आपको ट्रेंड फ्लैट डिजाइन लागू करने की जरूरत है, तो बेझिझक रिवाइंड करें ।

एक तत्व जोड़ें:

  <svg class="heart-icon icon" viewBox="0 0 512 512"> <g> <rect width="512" height="512" /> </g> </svg>

<G> टैग वह तत्व है जो फ़िल्टर के लिए उपयोग किया जाता है।

दस्तावेज़ के SVG सेक्शन में एक फ़िल्टर जोड़ें:

 <filter id='inset-shadow'> <!--   --> <feOffset dx='0' dy='0' /> <!--   --> <feGaussianBlur stdDeviation='20' result='offset-blur' /> <!--  drop shadow     --> <feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse' /> <!--    --> <feFlood flood-color='black' flood-opacity='.65' result='color' /> <!--     --> <feComposite operator='in' in='color' in2='inverse' result='shadow' /> <!-- c    --> <feComposite operator='over' in='shadow' in2='SourceGraphic' /> </filter>

मैं वर्णन नहीं करूंगा कि फ़िल्टर कैसे काम करता है। आप इसे इंटरनेट पर आसानी से पढ़ सकते हैं। यह एक अलग पद के लिए एक विषय है। बस इसे टिप्पणियों के साथ कवर करें।
ध्यान दें कि फ़िल्टर में id = 'इनसेट-शैडो' भी है

आइकन पर एक छाया जोड़ें

 .icon g{ filter:url('#inset-shadow') }

वह सब है । मैं लिखना चाहता हूं। लेकिन यह सच नहीं होगा।

सच्चा हो या सबका प्यार

तथ्य यह है कि यदि आप ओपेरा में उदाहरण खोलते हैं, तो आपको 3 वर्गों का एक सेट दिखाई देगा। वे आइकन जो छाया के साथ पूरी तरह से गायब हो जाते हैं और यह एसवीजी फिल्टर की समस्या है। अगर ब्राउज़र को वांछित फ़िल्टर नहीं मिलता है, तो यह आइकन को पारदर्शी बनाता है, बजाय इसे लागू करने के।

लेकिन क्यों नहीं मिला !? तथ्य यह है कि यहां 2 ब्राउज़र दुनिया टकराती हैं। हमारा पथ url ('# हृदय-पथ') ओपेरा एक रिश्तेदार CSS फ़ाइल पथ या url ('main.css # हृदय-पथ') के बजाय url ('index.html # heart-path') के रूप में मानता है, जैसा कि अन्य करते हैं। यदि आप पथ को विशेष रूप से url ('index.html # heart-path') के रूप में सेट करते हैं, तो ब्राउज़र index.html के अंदर SVG दस्तावेज़ को पार्स नहीं करते हैं, क्योंकि वे इसे एक बाहरी स्रोत मानते हैं। जैसे ही आप main.css को डायरेक्टरी से बाहर ले जाते हैं मोज़िला फ़ाइल के साथ मोज़िला की समस्याएँ होती हैं। IE इस मामले में WebKit के साथ अनुबंध में है। और WebKit, बदले में, बाहरी स्रोतों के साथ बहुत अनुकूल नहीं है। उन्हें एक भीतर की जरूरत है।

कोनों में दुनिया को नस्ल।

मेरा मतलब है, शांति। यही है, हम एक गोल नृत्य को चलाने के लिए मजबूर करते हैं।
हां, हम क्रॉस-ब्राउज़र संगतता के बारे में बात करेंगे।

तो हमें जरूरत है:

दो सीएसएस फ़ाइलें दो अलग-अलग दुनिया के लिए अलग-अलग रास्तों से।
एक स्थान पर आइकन शैलियों को संपादित करें और बनाए रखें (फ़ाइल)।
आइकन और फिल्टर के रूपों की घोषणा का एक स्रोत है - एक एसवीजी दस्तावेज़।
विकसित होने पर भविष्य में इस बारे में न सोचें।

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

हम index.php को index.html फ़ाइल का नाम बदलें। उसके बाद, / css फ़ोल्डर बनाएं और उसमें icons.svg फ़ाइल रखें, जहाँ हम आइकन फॉर्म घोषणाओं के साथ अपने बड़े SVG दस्तावेज़ को स्थानांतरित करेंगे।

Index.php में एक बड़े SVG डॉक्यूमेंट की जगह हम एक PHP एक्सप्रेशन लिखते हैं
<; php में "css / icons.svg" शामिल हैं; ?>
जिसमें आइकन के पाठ को शामिल किया गया है। एसवीजी फ़ाइल उस स्थान पर जहां अभिव्यक्ति स्वयं होती है।
प्वाइंट 3 पूरा हो गया है, हटाया जा सकता है।

अब बिंदु 1 और 2।

/ Css निर्देशिका में, icons.styl फ़ाइल बनाएँ। यह ठीक एक जगह होगी जहां हम अपने आइकन की शैलियों को संपादित करेंगे। हम इसमें main.css फ़ाइल की संपूर्ण सामग्री को स्थानांतरित करेंगे और इसे icons_mixin मिक्सिन के रूप में व्यवस्थित करेंगे:

 icons_mixin( path = '' ) .heart-icon rect{ clip-path:url( path + '#heart-path'); } .play-icon rect{ clip-path:url( path + '#play-path'); } .icon{ width:32px; height:32px; cursor:pointer; fill: #ccc; g{ filter:url( path + '#inset-shadow') } &:hover{ fill: #999; } &:active, &.checked{ fill:red; } }

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

अब एक और 2 .styl फाइलें बनाएं। webkit_ie.styl और ff_op.styl।
पहले हमारी वेबसाइट पर डिफ़ॉल्ट रूप से उपयोग किया जाएगा, दूसरा केवल मोज़िला और ओपेरा के लिए।

Webkit_ie.styl फ़ाइल में जोड़ें:

 @import 'icons.styl' icons_mixin()

हम फ़ाइल को आइकन मिक्सिन के साथ आयात करते हैं और इसे मापदंडों के बिना निष्पादित करते हैं।
Ff_op.styl फ़ाइल में जोड़ें:

 @import 'icons.styl' icons_mixin('icons.svg')

हम आइकन मिक्सिन के साथ फाइल इम्पोर्ट करते हैं और इसे आइकनों के लिए पाथ। पास करें।

बिंदु 1 और 2 पूरे हुए। क्रॉस आउट।

यदि आप भ्रमित हैं, तो यह है कि परियोजना कैसी है:

Index.php में, हम आइकन शैलियों के लिए रास्ता तय करेंगे, अब यह है
<लिंक rel = "स्टाइलशीट" href = "css / webkit_ie.css">

और अंत में, समापन से पहले </ body> टैग, वेबकेट या ट्राइडेंट (आईई) के अलावा किसी अन्य इंजन के साथ ब्राउज़रों के लिए सशर्त रूप से आइकन शैलियों को जोड़ने के लिए एक स्क्रिप्ट जोड़ें:

 <script type="text/javascript"> var firefox = navigator.userAgent.indexOf("Firefox") != -1 ; var opera = navigator.userAgent.indexOf("Opera") != -1 ; if ( firefox || opera ) { document.write('<link rel="stylesheet" href="css/ff_op.css">'); } </script>

वह सब है। स्रोत कोड

हमने क्या किया है ?!

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

यह पूरी तरह से CSS संचालित है।
वह इसमें काम कर सकती है
- IE 9-10
- मोज़िला 4+
- ओपेरा 11.6+
- सफारी 5.1+
- Chrome 14+ (मुझे लगता है कि 4+, लेकिन केवल इस संस्करण तक की जाँच की गई)
यह वजन में काफी हल्का होता है। (प्ले आइकन <पॉलीगॉन फिल-रूल = "एरोड्ड" क्लिप-रूल = "ईनोड" पॉइंट्स = "0,0 512,256 0,512" /> उसका वजन केवल 85 बाइट्स को याद करें)
सभी आइकन एक फ़ाइल में हैं, इसलिए हमें सर्वर अनुरोध नहीं मिलेगा।

सभी कार्य पूर्ण होते हैं। यहाँ, आपकी अनुमति से, मैं रुक जाऊंगा। आप सभी का ध्यान और समय के लिए धन्यवाद, मुझे आशा है कि आपने इसे लाभ के साथ खर्च किया है।

CSS की शक्ति आपको आकार लेने में मदद करेगी, एसवीजी!