मैंने हाल ही में my . के हिस्से के रूप में एक ईंट की दीवार का पैटर्न बनाया है #छोटा पैटर्न श्रृंखला, एक चुनौती जहां मैं 560 बाइट्स (या लगभग दो ट्वीट्स के आकार) के भीतर एसवीजी में कार्बनिक दिखने वाले पैटर्न या बनावट बनाता हूं। इस बाधा को पूरा करने के लिए, मैं एक यात्रा से गुजरा हूं जिसने मुझे एसवीजी पैटर्न को अनुकूलित करने के कुछ कट्टरपंथी तरीके सिखाए हैं ताकि उनमें समग्र छवि गुणवत्ता को प्रभावित किए बिना जितना संभव हो उतना कम कोड हो।
मैं आपको प्रक्रिया के माध्यम से चलना चाहता हूं और आपको दिखाता हूं कि हम एक एसवीजी पैटर्न कैसे ले सकते हैं जो 197 बाइट्स से शुरू होकर केवल 44 बाइट्स तक - 77.7% की भारी कमी!
एसवीजी पैटर्न
इसे "रनिंग बॉन्ड" ईंट पैटर्न कहा जाता है। यह वहां सबसे आम ईंट पैटर्न है, और एक जिसे आपने निश्चित रूप से पहले देखा है: ईंटों की प्रत्येक पंक्ति एक ईंट की आधी लंबाई से ऑफसेट होती है, एक दोहराए जाने वाले कंपित पैटर्न का निर्माण करती है। व्यवस्था बहुत सरल है, एसवीजी बनाना <pattern>
तत्व कोड में इसे पुन: पेश करने के लिए एकदम सही फिट है।
एसवीजी <pattern>
तत्व एक पूर्व-परिभाषित ग्राफिक ऑब्जेक्ट का उपयोग करता है जिसे क्षैतिज और ऊर्ध्वाधर अक्षों के साथ निश्चित अंतराल पर दोहराया जा सकता है (या "टाइल")। अनिवार्य रूप से, हम एक आयताकार टाइल पैटर्न को परिभाषित करते हैं और इसे भरण क्षेत्र को पेंट करने के लिए दोहराया जाता है।
सबसे पहले, आइए एक ईंट के आयाम और प्रत्येक ईंट के बीच की खाई को निर्धारित करें। सादगी के लिए, आइए स्वच्छ, गोल संख्याओं का उपयोग करें: की चौड़ाई 100
और की ऊंचाई 30
ईंट के लिए, और 10
उनके बीच क्षैतिज और ऊर्ध्वाधर अंतराल के लिए।
इसके बाद, हमें अपनी "आधार" टाइल की पहचान करनी होगी। और "टाइल" से मैं भौतिक टाइलों के बजाय पैटर्न टाइलों के बारे में बात कर रहा हूं, ईंटों से भ्रमित होने की नहीं। आइए ऊपर दी गई छवि के हाइलाइट किए गए हिस्से को हमारे पैटर्न टाइल के रूप में उपयोग करें: पहली पंक्ति में दो पूरी ईंटें, और दूसरी पंक्ति में दो आधा ईंटों के बीच एक पूरी सैंडविच। ध्यान दें कि अंतराल को कैसे और कहाँ शामिल किया गया है, क्योंकि उन्हें दोहराए गए पैटर्न टाइल में शामिल करने की आवश्यकता है।
उपयोग करते समय <pattern>
, हमें पैटर्न को परिभाषित करना होगा width
और height
, जो आधार टाइल की चौड़ाई और ऊंचाई के अनुरूप है। आयाम प्राप्त करने के लिए, हमें थोड़ा गणित चाहिए:
Tile Width = 2(Brick Width) + 2(Gap) = 2(100) + 2(10) = 220
Tile Height = 2(Bright Height) + 2(Gap) = 2(30) + 2(10) = 80
ठीक है, तो हमारा पैटर्न टाइल है 220✕80
. हमें भी सेट करना है patternUnits
विशेषता, जहां मूल्य userSpaceOnUse
अनिवार्य रूप से पिक्सल का मतलब है। अंत में, an . जोड़ना id
पैटर्न के लिए आवश्यक है ताकि इसे संदर्भित किया जा सके जब हम इसके साथ किसी अन्य तत्व को चित्रित कर रहे हों।
<pattern id="p" width="220" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
अब जब हमने टाइल आयामों को स्थापित कर लिया है, तो चुनौती यह है कि टाइल के लिए कोड इस तरह से बनाया जाए जो ग्राफ़िक को कम से कम बाइट्स के साथ प्रस्तुत करे। यह वही है जो हम अंत में समाप्त होने की उम्मीद करते हैं:
प्रारंभिक मार्कअप (197 बाइट्स)
मेरे दिमाग में आने वाले इस पैटर्न को फिर से बनाने का सबसे सरल और सबसे घोषणात्मक तरीका पांच आयतों को खींचना है। डिफ़ॉल्ट रूप से, fill
एक एसवीजी तत्व का काला है और stroke
पारदर्शी है। यह एसवीजी पैटर्न को अनुकूलित करने के लिए अच्छी तरह से काम करता है, क्योंकि हमें कोड में उन्हें स्पष्ट रूप से घोषित करने की आवश्यकता नहीं है।
नीचे दिए गए कोड की प्रत्येक पंक्ति एक आयत को परिभाषित करती है। width
और height
हमेशा सेट होते हैं, और x
और y
स्थिति केवल तभी सेट की जाती है जब आयत को से ऑफसेट किया जाता है 0
स्थिति.
<rect width="100" height="30"/>
<rect x="110" width="100" height="30"/>
<rect y="40" width="45" height="30"/>
<rect x="55" y="40" width="100" height="30"/>
<rect x="165" y="40" width="55" height="30"/>
टाइल की शीर्ष पंक्ति में दो पूर्ण-चौड़ाई वाली ईंटें थीं, दूसरी ईंट को x="110"
अनुमति 10
ईंट से पहले की खाई के पिक्सल। इसी तरह वहाँ है 10
पिक्सेल अंतराल के बाद, क्योंकि ईंट समाप्त होती है 210
पिक्सल (110 + 100 = 210
) क्षैतिज अक्ष पर भले ही <pattern>
चौड़ाई है 220
पिक्सल। हमें उस थोड़े से अतिरिक्त स्थान की आवश्यकता है; अन्यथा दूसरी ईंट बगल की टाइल में पहली ईंट के साथ मिल जाएगी।
दूसरी (नीचे) पंक्ति में ईंटें ऑफसेट हैं इसलिए पंक्ति में दो आधी ईंटें और एक पूरी ईंट है। इस मामले में, हम चाहते हैं कि आधी-चौड़ाई वाली ईंटों का विलय हो जाए, ताकि शुरुआत या अंत में कोई अंतर न हो, जिससे वे ईंटों के साथ सटे पैटर्न वाली टाइलों में निर्बाध रूप से प्रवाहित हो सकें। इन ईंटों की भरपाई करते समय, हमें आधा अंतराल भी शामिल करना होगा, इस प्रकार x
मान हैं 55
और 165
, क्रमशः।
तत्व का पुन: उपयोग, (-43B, कुल 154B)
प्रत्येक ईंट को इतनी स्पष्ट रूप से परिभाषित करना अक्षम लगता है। क्या इसके बजाय आकृतियों का पुन: उपयोग करके एसवीजी पैटर्न को अनुकूलित करने का कोई तरीका नहीं है?
मुझे नहीं लगता कि यह व्यापक रूप से ज्ञात है कि एसवीजी में ए <use>
तत्व। आप इसके साथ किसी अन्य तत्व को संदर्भित कर सकते हैं और उस संदर्भित तत्व को कहीं भी प्रस्तुत कर सकते हैं <use>
प्रयोग किया जाता है। यह काफी कुछ बाइट्स बचाता है क्योंकि हम पहले वाले को छोड़कर, प्रत्येक ईंट की चौड़ाई और ऊंचाई को निर्दिष्ट करना छोड़ सकते हैं।
ने कहा कि, <use>
थोड़ी कीमत के साथ आता है। यानी हमें a जोड़ना है id
उस तत्व के लिए जिसे हम पुन: उपयोग करना चाहते हैं।
<rect id="b" width="100" height="30"/>
<use href="#b" x="110"/>
<use href="#b" x="-55" y="40"/>
<use href="#b" x="55" y="40"/>
<use href="#b" x="165" y="40"/>
सबसे छोटा id
एक वर्ण संभव है, इसलिए मैंने ईंट के लिए "बी" चुना। <use>
तत्व को इसी तरह स्थित किया जा सकता है <rect>
, के साथ x
और y
ऑफसेट के रूप में विशेषताएँ। चूंकि अब प्रत्येक ईंट पूरी-चौड़ाई वाली है, इसलिए हमने इस पर स्विच कर दिया है <use>
(याद रखें, हमने पैटर्न टाइल की दूसरी पंक्ति में ईंटों को स्पष्ट रूप से आधा कर दिया है), हमें एक नकारात्मक का उपयोग करना होगा x
दूसरी पंक्ति में मूल्य, फिर सुनिश्चित करें कि ईंटों के बीच उस निर्बाध कनेक्शन के लिए टाइल से अंतिम ईंट ओवरफ्लो हो जाए। हालाँकि, ये ठीक है, क्योंकि पैटर्न टाइल के बाहर गिरने वाली कोई भी चीज़ अपने आप कट जाती है।
क्या आप कुछ दोहराए जाने वाले तार देख सकते हैं जिन्हें अधिक कुशलता से लिखा जा सकता है? आइए आगे उन पर काम करते हैं।
पथ पर पुनर्लेखन (-54B, कुल 100B)
<path>
एसवीजी में शायद सबसे शक्तिशाली तत्व है। आप "कमांड" के साथ लगभग किसी भी आकार को आकर्षित कर सकते हैं d
गुण। 20 कमांड उपलब्ध हैं, लेकिन हमें आयतों के लिए केवल सबसे सरल लोगों की आवश्यकता है।
यहाँ मैं उसके साथ उतरा हूँ:
<path d="M0 0h100v30h-100z M110 0h100v30h-100 M0 40h45v30h-45z M55 40h100v30h-100z M165 40h55v30h-55z"/>
मुझे पता है, सुपर अजीब संख्याएं और अक्षर! उन सभी का अर्थ है, बेशक। यहाँ इस विशिष्ट मामले में क्या हो रहा है:
M{x} {y}
: निर्देशांक के आधार पर एक बिंदु पर ले जाता है।z
: वर्तमान खंड को बंद कर देता है।h{x}
: की लंबाई के साथ, वर्तमान बिंदु से एक क्षैतिज रेखा खींचता हैx
के चिह्न द्वारा परिभाषित दिशा मेंx
. छोटेx
एक सापेक्ष समन्वय इंगित करता है।v{y}
: वर्तमान बिंदु से की लंबाई के साथ एक लंबवत रेखा खींचता हैy
के चिह्न द्वारा परिभाषित दिशा मेंy
. छोटेy
एक सापेक्ष समन्वय इंगित करता है।
यह मार्कअप पिछले वाले की तुलना में बहुत अधिक संक्षिप्त है (लाइन ब्रेक और इंडेंटेशन व्हाइटस्पेस केवल पठनीयता के लिए है)। और, हे, हम प्रारंभिक आकार के आधे हिस्से को काटने में कामयाब रहे, 100 बाइट्स पर पहुंचे। फिर भी, कुछ मुझे ऐसा महसूस कराता है कि यह छोटा हो सकता है…
टाइल संशोधन (-38B, 62B कुल)
क्या हमारे पैटर्न टाइल में दोहराए जाने वाले भाग नहीं हैं? यह स्पष्ट है कि पहली पंक्ति में एक पूरी ईंट दोहराई जाती है, लेकिन दूसरी पंक्ति के बारे में क्या? यह देखना थोड़ा कठिन है, लेकिन अगर हम बीच की ईंट को आधा कर दें तो यह स्पष्ट हो जाता है।
ठीक है, बीच की ईंट बिल्कुल आधी नहीं कटी है। थोड़ा सा ऑफसेट है क्योंकि हमें अंतर का हिसाब भी देना है। वैसे भी, हमें बस एक सरल आधार टाइल पैटर्न मिला, जिसका अर्थ है कम बाइट्स! इसका मतलब यह भी है कि हमें आधा करना होगा width
हमारे में से <pattern>
220 से 110 तक तत्व।
<pattern id="p" width="110" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
अब देखते हैं कि सरलीकृत टाइल किस प्रकार खींची जाती है <path>
:
<path d="M0 0h100v30h-100z M0 40h45v30h-45z M55 40h55v30h-55z"/>
आकार 62 बाइट्स तक कम हो गया है, जो पहले से ही मूल आकार के एक तिहाई से भी कम है! लेकिन यहाँ क्यों रुकें जब और भी बहुत कुछ हम कर सकते हैं!
पाथ कमांड को छोटा करना (-9B, कुल 53B)
इसमें थोड़ा और गहराई में जाने लायक है <path>
तत्व क्योंकि यह एसवीजी पैटर्न को अनुकूलित करने के लिए अधिक संकेत प्रदान करता है। मेरे साथ काम करते समय एक ग़लतफ़हमी थी <path>
इस बारे में है कि कैसे fill
गुण काम करता है। बचपन में एमएस पेंट के साथ बहुत कुछ खेलने के बाद, मैंने सीखा है कि किसी भी आकार को मैं एक ठोस रंग से भरना चाहता हूं, उसे बंद करना होगा, यानी कोई खुला बिंदु नहीं है। अन्यथा, पेंट आकार से बाहर निकल जाएगा और हर चीज पर फैल जाएगा।
एसवीजी में, हालांकि, यह सच नहीं है। मुझे बोली कल्पना अपने आप:
भरण ऑपरेशन खुले उपपथों को भरण ऑपरेशन करके भरता है जैसे कि उपपथ के पहले बिंदु के साथ उपपथ के अंतिम बिंदु को जोड़ने के लिए पथ में एक अतिरिक्त "क्लोज़पाथ" कमांड जोड़ा गया था।
इसका मतलब है कि हम क्लोज पाथ कमांड को छोड़ सकते हैं (z
), क्योंकि भरे जाने पर उपपथ स्वतः बंद माने जाते हैं।
पथ कमांड के बारे में जानने के लिए एक और उपयोगी बात यह है कि वे अपरकेस और लोअरकेस भिन्नताओं में आते हैं। लोअरकेस अक्षरों का अर्थ है कि सापेक्ष निर्देशांक का उपयोग किया जाता है; अपरकेस अक्षरों का मतलब है कि इसके बजाय निरपेक्ष निर्देशांक का उपयोग किया जाता है।
यह उससे थोड़ा पेचीदा है H
और V
आदेश क्योंकि उनमें केवल एक समन्वय शामिल है। यहां बताया गया है कि मैं इन दो आदेशों का वर्णन कैसे करूंगा:
H{x}
: समन्वय करने के लिए वर्तमान बिंदु से एक क्षैतिज रेखा खींचता हैx
.V{y}
: समन्वय करने के लिए वर्तमान बिंदु से एक लंबवत रेखा खींचता हैy
.
जब हम पैटर्न टाइल में पहली ईंट खींच रहे हैं, तो हम से शुरू करते हैं (0,0)
निर्देशांक। फिर हम के लिए एक क्षैतिज रेखा खींचते हैं (100,0)
और एक लंबवत रेखा के लिए (100,30)
, और अंत में, एक क्षैतिज रेखा खींचें (0,30)
. हमने इस्तेमाल किया h-100
अंतिम पंक्ति में आदेश, लेकिन यह के बराबर है H0
, जो पांच के बजाय दो बाइट्स है। हम दो समान घटनाओं को प्रतिस्थापित कर सकते हैं और हमारे कोड को पार कर सकते हैं <path>
इसके लिए नीचे:
<path d="M0 0h100v30H0 M0 40h45v30H0 M55 40h55v30H55"/>
एक और 9 बाइट मुंडा - हम कितना छोटा जा सकते हैं?
ब्रिजिंग (-5B, कुल 48B)
पूरी तरह से अनुकूलित एसवीजी पैटर्न के हमारे रास्ते में खड़े सबसे लंबे कमांड "मूव टू" कमांड हैं जो क्रमशः 4, 5 और 6 बाइट्स लेते हैं। हमारे पास एक बाधा यह है कि:
एक पथ डेटा खंड (यदि कोई है तो) एक "moveto" कमांड से शुरू होना चाहिए।
पर यह ठीक है। वैसे भी पहला सबसे छोटा है। यदि हम पंक्तियों को स्वैप करते हैं, तो हम पथ परिभाषा के साथ आ सकते हैं जहां हमें केवल ईंटों के बीच क्षैतिज या लंबवत रूप से स्थानांतरित करना होता है। क्या होगा अगर हम इस्तेमाल कर सकते हैं h
और v
के बजाय वहाँ आदेश M
?
उपरोक्त आरेख दिखाता है कि एक ही पथ से तीन आकृतियों को कैसे खींचा जा सकता है। ध्यान दें कि हम इस तथ्य का लाभ उठा रहे हैं कि fill
ऑपरेशन स्वचालित रूप से खुले हिस्से को बंद कर देता है (110,0)
और (0,0)
. इस पुनर्व्यवस्था के साथ, हमने दूसरी पंक्ति में पूर्ण-चौड़ाई वाली ईंट के बाईं ओर अंतर को भी स्थानांतरित कर दिया। यहां बताया गया है कि कोड कैसा दिखता है, फिर भी प्रति पंक्ति एक ईंट में टूटा हुआ है:
<path d="M0 0v30h50V0 h10v30h50 v10H10v30h100V0"/>
निश्चित रूप से, हमें अब सबसे छोटा समाधान मिल गया है कि हम 48 बाइट्स तक नीचे हैं, है ना?! कुंआ…
अंक ट्रिमिंग (-4B, 44B कुल)
यदि आप आयामों के साथ थोड़ा लचीला हो सकते हैं, तो एक और छोटा तरीका है जिससे हम एसवीजी पैटर्न को अनुकूलित कर सकते हैं। हम ईंट की चौड़ाई के साथ काम कर रहे हैं 100
पिक्सल, लेकिन वह तीन बाइट्स है। इसे बदल रहा है 90
मतलब एक कम बाइट जब भी हमें इसे लिखने की आवश्यकता होती है। इसी तरह, हमने के अंतराल का उपयोग किया 10
पिक्सल - लेकिन अगर हम इसे बदलते हैं 8
इसके बजाय, हम उनमें से प्रत्येक घटना पर एक बाइट सहेजते हैं।
<path d="M0 0v30h45V0 h8v30h45 v8H8v30h90V0"/>
बेशक, इसका मतलब यह भी है कि हमें पैटर्न के आयामों को तदनुसार समायोजित करना होगा। यहाँ अंतिम अनुकूलित SVG पैटर्न कोड है:
<pattern id="p" width="98" height="76" patternUnits="userSpaceOnUse"> <path d="M0 0v30h45V0h8v30h45v8H8v30h90V0"/>
</pattern>
उपरोक्त स्निपेट में दूसरी पंक्ति - इंडेंटेशन की गिनती नहीं - is 44 बाइट्स. हम छह पुनरावृत्तियों में 197 बाइट्स से आए हैं। यह एक चंकी है 77.7% आकार में कमी!
हालाँकि मैं सोच रहा हूँ... क्या यह वास्तव में सबसे छोटा आकार संभव है? क्या हमने एसवीजी पैटर्न को अनुकूलित करने के सभी संभावित तरीकों को देखा है?
मैं आपको इस कोड को और छोटा करने की कोशिश करने के लिए आमंत्रित करता हूं, या यहां तक कि एसवीजी पैटर्न को अनुकूलित करने के लिए वैकल्पिक तरीकों के साथ प्रयोग करने के लिए आमंत्रित करता हूं। मुझे यह देखना अच्छा लगेगा कि क्या हम भीड़ के ज्ञान के साथ सही वैश्विक न्यूनतम पा सकते हैं!
एसवीजी पैटर्न बनाने और अनुकूलित करने के बारे में अधिक जानकारी
यदि आप एसवीजी पैटर्न बनाने और अनुकूलित करने के बारे में अधिक जानने में रुचि रखते हैं, तो मेरा लेख पढ़ें एसवीजी फिल्टर के साथ पैटर्न बनाना. या, यदि आप 60+ पैटर्न की गैलरी देखना चाहते हैं, तो आप देख सकते हैं पेटिटपैटर्न कोडपेन संग्रह. अंत में, देखने के लिए आपका स्वागत है YouTube पर मेरे ट्यूटोरियल आपको एसवीजी पैटर्न में और भी गहराई तक जाने में मदद करने के लिए।
एसवीजी पैटर्न को उनके सबसे छोटे आकार में अनुकूलित करना मूल रूप से प्रकाशित सीएसएस-ट्रिक्स। तुम्हे करना चाहिए समाचार पत्र प्राप्त करें.
- "
- 10
- 100
- 77
- 9
- 98
- About
- पूर्ण
- लेखा
- अतिरिक्त
- सब
- की अनुमति दे
- पहले ही
- अन्य
- दृष्टिकोण
- क्षेत्र
- लेख
- विशेषताओं
- उपलब्ध
- कुल्हाड़ियों
- बिट
- काली
- चुनौती
- परिवर्तन
- बंद
- कोड
- सामान्य
- संबंध
- शामिल हैं
- सामग्री
- समन्वय
- सका
- बनाना
- वर्तमान
- तिथि
- और गहरा
- नीचे
- समाप्त होता है
- स्थापित
- सब कुछ
- उदाहरण
- सिवाय
- प्रयोग
- अंत में
- प्रथम
- फिट
- प्रवाह
- पाया
- आगे
- अन्तर
- मिल रहा
- वैश्विक
- होने
- ऊंचाई
- मदद
- यहाँ उत्पन्न करें
- हाइलाइट
- कैसे
- HTTPS
- पहचान करना
- की छवि
- शामिल
- शामिल
- IT
- खुद
- जानने वाला
- रिसाव
- जानें
- सीखा
- लाभ
- लाइन
- थोड़ा
- देखा
- मोहब्बत
- बनाता है
- निर्माण
- कामयाब
- गणित
- मन
- अधिक
- अधिकांश
- चाल
- MS
- संख्या
- संख्या
- ओफ़्सेट
- ठीक है
- खुला
- अनुकूलित
- अन्यथा
- पैटर्न
- भौतिक
- बिन्दु
- स्थिति में
- संभव
- शक्तिशाली
- सुंदर
- मूल्य
- प्रक्रिया
- प्रदान करता है
- गुणवत्ता
- दौर
- दौड़ना
- कहा
- निर्बाध
- कई
- सेट
- आकार
- समान
- सरल
- छह
- आकार
- So
- समाधान
- कुछ
- अंतरिक्ष
- Spot
- प्रारंभ
- शुरू होता है
- समर्थित
- में बात कर
- यहाँ
- ऊपर का
- पारदर्शी
- ट्यूटोरियल
- उपयोग
- मूल्य
- देखें
- W3
- घड़ी
- में आपका स्वागत है
- क्या
- अंदर
- बिना
- काम
- काम कर रहे
- कार्य
- लायक
- यूट्यूब