आधुनिक उपकरणों के ग्राफिक संसाधनों के कुशल उपयोग के बारे में अपार्टमेंट नवीकरण के बारे में एक लेख। स्मार्ट घड़ियों से लेकर टीवी तक दीवार तक।
पृष्ठ में छवियों को दोहराते हुए पृष्ठभूमि सम्मिलित करने की कहानी, ताकि हर कोई ठीक हो जाए।
अच्छा, क्या आप खेलने के लिए तैयार हैं ..? फिर चलाई
परिचयात्मक
एक रिपीट इमेज के साथ साइट पेज बनाने का काम था।
हम कैसे तय करेंगे?
स्तर 1 ट्राइट आदिम
सबसे आसान तरीका जो बड़ी संख्या में टाइपसेटर्स का उपयोग करेगा, वह है पृष्ठभूमि की छवि को एक साथ (सबसे अधिक बार png प्रारूप, क्योंकि यह डिफ़ॉल्ट रूप से फिम्मा और एवोकोड में सेट की गई है) उठाएं और इसे पृष्ठभूमि-छवि के माध्यम से ब्लॉक में फ्लॉप करें;
(* अच्छा, तुम मेरे युवा पाठक नहीं हो?)
body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }
यदि डेवलपर थोड़ा अधिक अनुभवी है, और जानता है कि jpg संकुचित है, एक नियम के रूप में, png से बेहतर है, तो पृष्ठभूमि jpg प्रारूप में होगी।
स्तर 2 मुझे प्रदर्शन की परवाह नहीं है
यदि लेआउट डिज़ाइनर विकसित पृष्ठ के प्रदर्शन की परवाह नहीं करता है, और वह जानता है कि इस जगह में आप उपयोगकर्ता ट्रैफ़िक को महत्वपूर्ण रूप से सहेज सकते हैं, तो वह इस छवि से पैटर्न (पृष्ठभूमि का दोहराव वाला भाग) को अलग कर सकता है, यदि आप भाग्यशाली हैं।
यदि फ़ोटोशॉप में लेआउट लागू किया गया था, तो आपको फसल करना होगा। क्योंकि पृष्ठभूमि वहां एक अविभाज्य तत्व द्वारा निर्धारित होती है।
Avocode से एक दोहराई जाने वाली पृष्ठभूमि लेने का उदाहरण
Figma में, यह थोड़ा आसान है। हालांकि यह इस बात पर निर्भर करेगा कि डिजाइनर ने आपके लिए इस पृष्ठभूमि को कैसे बनाया।
* कौन खेलना चाहता है, मैं अपना उदाहरण डाउनलोड के लिए छोड़ दूंगा।
उदाहरण में, png और svg पैटर्न के साथ दो विकल्प हैं, जिन पर बाद में चर्चा की जाएगी।
ठीक है, अब एक बड़ी पृष्ठभूमि छवि के बजाय, हमारे पास एक दोहराई जाने वाली टाइल तत्व (सीएसएस टाइलिंग) है।
body { background: url("bg.jpg"); }
अच्छा किया, अच्छा किया। अब, (586kB) के बजाय, उपयोगकर्ता सर्वर (~ 24kB) से सब कुछ लेता है; लाभ!
स्तर 3 मैं आपको अधिकतम करने के लिए निचोड़ लेंगे
आइए विचार करें, क्या किसी तरह स्थिति में सुधार संभव है? हम्म, लेकिन तस्वीर जटिल नहीं है, शायद आप इसे एक वेक्टर में आगे निकल सकते हैं?
और फिर प्रलोभन का दानव छिप गया।
सर्वश्रेष्ठ के लिए निशाना लगाते हुए, हम अक्सर अच्छे विलियम शेक्सपियर को खराब करते हैं
जब यह तर्कसंगत रूप से नहीं किया जाता है, या बिल्कुल नहीं:
- आपके पास एक जटिल दोहराव पैटर्न है। इसे फिर से तैयार करने में n घंटे लगेंगे, और अगर आप इस कार्य के द्वारा डिजाइनर पर जोर दे रहे हैं, तो निश्चित रूप से आपके कर्म में कमी आएगी।
- छवि में धुंधला होने के साथ छाया या तत्व हैं, और आप उन्हें मना करने के लिए सहमत नहीं हैं।
* यहाँ यह समझाना आवश्यक है
यदि आप एसवीजी ग्राफिक्स निर्यात करते हैं, तो फिगामा या इलस्ट्रेटर से मान लें, लेकिन इसे स्वयं संपादक में कोड न करें, तो सबसे अधिक संभावना है कि धब्बा या छाया के तत्वों को एसवीजी में बेस 64 प्रारूप में डाला जाएगा और यह किसी भी तरह से आपके प्रदर्शन में सुधार नहीं करेगा, क्योंकि ऐसी फाइल, वास्तव में, एनालॉग jpg प्रारूप से अधिक वजन हो सकता है।
हमेशा आप की पेशकश की जाँच करें। बेशक, इन तत्वों में से कुछ को टैग फिल्टर, उपयोग, ऑब्जेक्ट ... का उपयोग करके कोड के साथ भी बनाया जा सकता है, लेकिन उनके साथ काम करने के लिए आपको एक पंप किए गए कौशल की आवश्यकता होती है, जो दुर्लभ है।
ठीक है, चलो एक एसवीजी बनाएं और देखें कि क्या होता है।
* प्रयोग की शुद्धता के लिए, दिखाए गए चित्रों को तृतीय-पक्ष उपयोगिताओं द्वारा संपीड़ित नहीं किया गया था और फोटोशॉप, इलस्ट्रेटर और एवोकोड का उपयोग करके 100% गुणवत्ता में बचाया गया था।
ठीक है, हमारा svg मूल संस्करण के jpg / png से कम है।
यह आश्चर्य की बात नहीं है, क्योंकि इसमें हमने केवल उन मूल रंगों को छोड़ दिया, जिन्हें हमने देखा था, न कि उन वस्तुओं के जंक्शन पर जो धुंधला के साथ दिखाई देते हैं।
Png / jpg फ़ाइलों के आकार के बीच का अंतर बहुत महत्वपूर्ण नहीं लगता है, और यह केवल एक भूमिका निभाने के लिए शुरू होता है यदि चित्र बड़ा हो।
* मैं पींग पसंद करता हूं, और पृष्ठभूमि का रंग पृष्ठभूमि-रंग की संपत्ति पर सेट करता हूं, लेकिन यह कार्य से है।
मैं कुछ उलझन में था कि svg से बना परिणामी png / jpg SVG आकार में छोटा है (यहां तक कि सिस्टम कचरा (पैटर्न-bg_cleared.svg) SVGO का उपयोग करके )
लेकिन फिर, यह मुझ पर हावी हो गया कि अगर मैं मोबाइल या टीवी के लिए पृष्ठभूमि टाइल के आकार को कम / बढ़ाना चाहता हूं, तो इसके लिए नए पैटर्न (पैटर्न- bg_min) को जोड़ने की आवश्यकता होगी और SVG वही रहेगा (15kB - हमेशा), और इसमें कोई धुंधलापन नहीं है वहाँ
यह एक महत्वपूर्ण प्लस है, खासकर अगर उपयोगकर्ता एक अच्छे रिज़ॉल्यूशन वाले महंगे फोन से पेज को देखता है, और लेआउट डिज़ाइनर, Google पेज स्पीड के पक्ष में, सभी ग्राफिक्स को गीदड़ के सामने आने से रोक देता है। यहाँ यह बचत है =)
body { background-image: url(picture.svg); }
यह बहुत परिचित लग रहा है।
ठीक है, जटिल। मान लीजिए कि शैलियों को शरीर गंभीर सीएसएस में शामिल करेगा, तो चलो वेक्टर को सीधे शैलियों में प्रस्तुत करते हैं। * पृष्ठ को लिटाने के लिए नहीं, मैं एक अलग पैटर्न लेऊंगा, एक छोटा।
body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }
बहुत सीएसएस था और इसने काम करना बंद कर दिया
तो, अब यह सब सही ढंग से करना आवश्यक है। अनएन्क्रिप्टेड एसवीजी प्रविष्टि केवल वेबकिट ब्राउज़र द्वारा समर्थित है। धन्यवाद, जूलिया बुकवलवा, एक उपयोगी कोडिंग संसाधन के लिए जो इसके साथ हमारी मदद करेगा।
body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
उदाहरण के लिए उदाहरण, एसवीजी को सीएसएस में कैसे पैक किया जा सकता है।
कर्सर SVG है
सब कुछ ठीक लग रहा है, लेकिन मुझे यकीन है कि मैं इस पैटर्न का उपयोग अपनी साइट के सभी पृष्ठों पर करूँगा। निश्चित रूप से इसे गंभीर सीएसएस में पिरोने की आवश्यकता है, या शायद यह सामान्य रूप से अधिक सही होगा - प्लग-इन सीएसएस और आशा है कि ब्राउज़र इसे कैश करता है? हो सकता है कि सभी समान हों, आप इसे केवल कुछ पृष्ठों के लिए कनेक्ट कर सकते हैं? किसी ने स्मार्ट कहा कि HTML में रखा गया कोड ब्राउजर द्वारा तेजी से एकत्र किया जाता है और रेंडरिंग स्पीड के मामले में उच्च प्राथमिकता रखता है। इतने सारे सवाल ... आपको कोशिश करनी होगी।
स्तर 4 मैं आप से बाहर सभी रस निचोड़ लेंगे
सबसे पहले, हम एक svg तत्व बनाएंगे जिसमें बाहरी इकाई की 100% ऊंचाई और चौड़ाई होगी ताकि यह किसी भी कंटेनर पर कब्जा कर ले जिसमें हमने इसे रखा था।
<svg width="100%" height="100%"> </svg>
एक पैटर्न बनाने के लिए, हमें इसे svg defs (परिभाषा) टैग में डालने की जरूरत है, उदाहरण के लिए इस तरह:
<svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>
पहले से ही बुरा नहीं है, फिर आपको उन विशेषताओं को जोड़ने की आवश्यकता है जिनकी मदद से हम पैटर्न के साथ बातचीत कर सकते हैं और किसी तरह इसे कॉल कर सकते हैं।
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>
हम इसे एक पहचानकर्ता देंगे ताकि इसे बाद में संदर्भित किया जा सके, हम एक्स और वाई संदर्भ के शुरुआती निर्देशांक भी इंगित करेंगे, जिसकी चौड़ाई और ऊंचाई हम ग्राफिक्स एडिटर में सेट करते हैं, व्यूबॉक्स का दायरा सेट करते हैं (आप इसे तैयार svg से ले सकते हैं)
... और userSpaceOnUse के लिए पैटर्नउपयोग की विशेषता सेट करें (यह एक समन्वय प्रणाली को परिभाषित करता है, जिसे आप एमडीएन के बारे में अधिक जान सकते हैं )
संक्षेप में, patternUnits = "userSpaceOnUse" के साथ, SVG कैनवास पर आकृति पूरी तरह से पैटर्न टाइल्स से भरी हुई है। यदि अंतिम टाइल पूरी तरह से लंबाई या चौड़ाई में फिट नहीं होती है, तो इसे छंटनी की जाती है।
अब हमें उस छवि पर निर्णय लेने की आवश्यकता है जिसे दोहराया जाएगा
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>
सब कुछ लगभग तैयार है, यह एक निश्चित वस्तु पर हमारे पैटर्न को कॉल करने के लिए बनी हुई है, ठीक है, उदाहरण के लिए, भरने के लिए एक आयताकार क्षेत्र बनाएं।
<svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>
आप देख सकते हैं कि भरण विशेषता (जिसमें आमतौर पर भरण रंग होता है, एक URL को इंगित करता है जिसमें हमारे नए परिभाषित पैटर्न के पहचानकर्ता होते हैं: fill = "url (# pattern-bg)"।
हमारा दोहराया पैटर्न चौड़ाई में सभी जगह घेरता है, लेकिन मैं यह भी चाहूंगा कि ऊंचाई में सब कुछ हो। ऐसा करने के लिए, हमारे svg को ऊंचाई की ऊंचाई के साथ लपेटें: 100vh;
<div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>
अब यह अच्छा है। बेशक, टैग में आपको अपनी अधिक गंभीर छवियां सम्मिलित करने का प्रयास करना चाहिए, लेकिन मैंने आपको सही दिशा में बताया।
यह सम्मिलन विधि, पृष्ठभूमि के माध्यम से विधि के विपरीत, आपको एसवीजी तत्वों के विस्तार को नियंत्रित करने की अनुमति देती है। उपयोगकर्ता को क्या देना है और क्या नहीं, इसकी एक निश्चित स्वतंत्रता है। और अगर प्रयोग करने की इच्छा है, और थोड़ा जेएस जोड़ें, तो आप मॉर्फिंग (आकार बदलना) भी प्राप्त कर सकते हैं।
बार-बार टाइल डालने की इस पद्धति की समस्याओं में से, मैंने पाया कि कोई रास्ता नहीं है (अच्छी तरह से, या मुझे नहीं मिला, और जो जानते हैं वे टिप्पणियों में लिखेंगे) ब्राउज़र स्क्रीन का आकार बदलते समय टाइल का आकार कैसे बदलना है। वास्तव में, पैटर्न टैग की चौड़ाई / ऊँचाई विशेषताएँ इसके लिए ज़िम्मेदार हैं, लेकिन मैं CSS और मीडिया के माध्यम से उन तक नहीं पहुँच सकता। खैर, वहाँ हमेशा JS है अगर आपको वास्तव में आवश्यकता है।
धोखा देती है मुझे ग्राफिक्स का पता नहीं है, लेकिन मैं सुंदर को छूना चाहता हूं
यदि किसी कारण से आप ग्राफिकल एडिटर में पैटर्न के दोहराए गए तत्व को नहीं जानते हैं, या आपके पास इसके लिए समय नहीं है। यहां तैयार समाधानों वाली साइटें हैं जिनमें अच्छे लोग दुनिया के साथ अच्छी चीजें साझा करते हैं।
* एक छोटा सा पूरक (आजकल पोर्न के बिना यह कहाँ है)
https://svgporn.com/
टीम का समर्थन समर्थन के साथ क्या हो रहा है?
लेख की शुरुआत में मैंने लिखा कि सब ठीक हो जाएगा, मैं कबूल करता हूं, यह एक धोखा था।
IE आपके प्रयासों के उपयोगकर्ता IE को इस टैग का समर्थन नहीं देखेंगे और नहीं आए, और नहीं आएंगे, लेकिन अन्यथा SVG के साथ सब कुछ इतना बुरा नहीं है, यहां तक कि 9 IE तक caniuse.com
मैं फ़ायरफ़ॉक्स में समाप्त काम की जाँच करने की भी सिफारिश करूंगा, कभी-कभी घटनाएं होती हैं।
प्रशंसकों को प्रलेखन पढ़ने के लिए, कुछ लिंक भी छोड़ दें
https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/patternhttps://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Patternsजो लोग अंत तक जाते हैं, उनके लिए मैं अपने उदाहरण को छोड़ देता हूं कि लेख की शुरुआत से अंतर्निहित एसवीजी के साथ मज़े कैसे करें
वेब को बेहतर बनाते हैं।अलेक्जेंडर_TT और उनकी साइट https://svg-art.ru/ के लिए PS विशेष धन्यवाद विशाल रूसी भाषी इंटरनेट में एसवीजी को बढ़ावा देने के लिए