उत्तरदायी एसवीजी के लिए 10 गोल्डन नियम

Sep 12, 2025
कैसे करना है

एसवीजी के कई फायदे - असीमित स्केलेबल वेक्टर छवियों, छोटे फ़ाइल आकार और डोम के साथ प्रत्यक्ष एकीकरण सहित - इसे प्राकृतिक फिट बनाएं प्रतिक्रियात्मक वेब डिज़ाइन । एसवीजी विनिर्देश के बावजूद एक दशक पुराना होने के बावजूद, यह कई ब्राउज़रों और औजारों में अपेक्षाकृत हाल का समर्थन है, इसका मतलब है कि अभी भी कई चालें, loopholes और gotchas हैं जो अनुभवी वेब डिजाइनरों और डेवलपर्स को भी पकड़ते हैं।

यहां, मैंने इनमें से 10 गोल्डन नियमों के रूप में सबसे महत्वपूर्ण सारांशित किया है।

[2 9]

01. अपने उपकरण को सही ढंग से सेट करें

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

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

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

साथ ही, कैनवास क्षेत्र को तत्वों के सटीक किनारों पर फसल न करें। एंटीअलाइजिंग अभी भी एसवीजी पर लागू की जाएगी, और इसे बहुत करीब काटने से एंटीअलाइजिंग भी फसल हो सकती है। इसके बजाए, जहां भी कैनवास के किनारे एक तत्व के करीब आता है, कम से कम 2px साफ़ करें।

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

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

यदि आपको वेक्टर फाइलें दी हैं जो इस नियम का पालन नहीं करती हैं, तो चिंता न करें - अधिकांश वेक्टर कला अनुप्रयोगों में एक 'सरल' विकल्प होता है जिसका उपयोग आप अपने आकार को बदलने के बिना तत्व में अंकों की संख्या को कम करने के लिए कर सकते हैं। वैकल्पिक रूप से, विस्तृत काम के लिए मैं एक प्लगइन जैसे अजीब ग्राफिक्स 'Vectorscribe का सुझाव दूंगा।

02. ऊंचाई और चौड़ाई विशेषताओं को हटा दें

अधिकांश ऐप्स अपने एसवीजी निर्यात में बहुत सारे मालिकाना, अनावश्यक कोड जोड़ते हैं। अधिकांश एसवीजी फाइलों की शुरुआत में एकमात्र आवश्यक कोड निम्नलिखित है: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" व्यूबॉक्स = "0 0 500 500" & gt;
& lt;! - यहां SVG कोड - & gt;
& lt; / svg & gt;

हमारे उद्देश्यों के लिए, सबसे महत्वपूर्ण पहलू को हटाने का है चौड़ाई तथा ऊंचाई गुण जो अधिकांश अनुप्रयोग स्वचालित रूप से शामिल होते हैं। यह आधुनिक ब्राउज़रों में एसवीजी पूरी तरह उत्तरदायी बनाता है।

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

03. एसवीजी आउटपुट को अनुकूलित और छोटा करें

[7 9] A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

बुद्धिमान हाथ-संपादन और पोस्ट-प्रोडक्शन ऑप्टिमाइज़ेशन का एक संयोजन एसवीजी फ़ाइल आकार को स्पष्ट रूप से कम कर सकता है

अपनी एसवीजी सामग्री बनाने के लिए आप जो भी टूल का उपयोग करते हैं, यह अभी भी एक उपकरण के माध्यम से अपने आउटपुट को प्रसंस्करण करने योग्य है [9 2] SvgoMg [9 3] , जो कोड को स्पष्ट रूप से ट्रिम करेगा। आम तौर पर, आप फ़ाइल आकार में लगभग 20 से 80 प्रतिशत बचा सकते हैं। उसी कोड को स्थानीय रूप से एकीकृत किया जा सकता है एक गल्प या ग्रंट कार्य के रूप में [9 3] ।

04. आईई के लिए कोड संशोधित करें

नियम 2 का उल्लेख किया गया है कि सही ढंग से अनुकूलित एसवीजी आधुनिक ब्राउज़रों में पूरी तरह उत्तरदायी हैं। यह सच है अगर हम माइक्रोसॉफ्ट एज को आधुनिक ब्राउज़र के रूप में गिनते हैं। आईई 9-11 के लिए, हमारे पास संबोधित करने के लिए कुछ मुद्दे हैं। यदि हम एक छवि के रूप में एसवीजी का उपयोग कर रहे हैं: 

 & lt; img src = "countdown.svg alt =" उलटी गिनती "& gt;

हम सीएसएस विशेषता चयनकर्ता का उपयोग करके छवि को सही ढंग से प्रदर्शित करने के लिए IE9-11 को मजबूर कर सकते हैं: 

 img [src $ = "। Svg"] {चौड़ाई: 100%;}

एसवीजी छवियां सामान्य उत्पादन में अच्छी तरह से काम करती हैं, लेकिन सीमित अंतःक्रियाशीलता होती है: अधिकांश ब्राउज़र एक पृष्ठ पर रखे गए एसवीजी के अंदर अंतःक्रियाशीलता और एनीमेशन को अनदेखा करेंगे । इसके अलावा, एसवीजी छवियां ब्राउज़र के लिए एक अतिरिक्त HTTP अनुरोध हैं।

इन और अन्य कारणों से, एसवीजी इनलाइन का तेजी से उपयोग किया जा रहा है। उस स्थिति में, एसवीजी कोड को आईई के लिए थोड़ा और उपचार की आवश्यकता है: 

 & lt; शरीर & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" व्यूबॉक्स = "0 0 525 365" preserveaspectratio = "xmidymin स्लाइस" & gt;

इसके अलावा संभावित अनुपात को बनाए रखें विशेषता, आईई को छवि के सही स्केलिंग को संरक्षित करने के लिए थोड़ा और मार्गदर्शन की आवश्यकता है: एसवीजी की चौड़ाई लें ( 365 इस मामले में), इसे ऊंचाई से विभाजित करें ( 525 ) और परिणाम 100 प्रतिशत गुणा करें। यह बन जाएगा नीचे गद्दी करना एसवीजी के लिए मूल्य, 'प्रोपिंग' यह अपने सही पहलू अनुपात में एसवीजी प्रदर्शित करने के लिए आईई में पर्याप्त खुला है: 

 & lt; शरीर & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" व्यूबॉक्स = "0 0 525 365"
preserveaspectratio = "xmidymin स्लाइस"
शैली = "चौड़ाई: 100%; पैडिंग-नीचे: 69.52%; ऊंचाई: 1px; अतिप्रवाह: दृश्यमान" & gt;

ध्यान दें कि, चीजों को संक्षिप्त और स्पष्ट रखने के लिए, इस लेख के बाकी हिस्सों में कोड नमूने में इन परिवर्तनों को शामिल नहीं किया गया है। अमेलिया बेलामी-रॉयड्स ने लिखा है स्केलिंग एसवीजी पर उत्कृष्ट लेख [9 3] ।

05. हीरो टेक्स्ट के लिए एसवीजी पर विचार करें

[13 9]

हीरो पाठ के लिए एसवीजी का उपयोग करना मतलब है कि यह स्वचालित रूप से अपने कंटेनर के अनुरूप होगा

वर्तमान में अपने कंटेनर को पाठ आकार देने के लिए कोई सीएसएस मानक नहीं है। वीडब्ल्यू इकाइयों का उपयोग करके पाठ को स्केल करना संभव है, लेकिन कुछ व्यूपोर्ट सीमाओं पर टेक्स्ट को 'क्लैंप' करने के लिए लगभग कम से कम दो मीडिया क्वेरी हस्तक्षेप की आवश्यकता होगी। हालांकि, एसवीजी टेक्स्ट स्वचालित रूप से एक कंटेनर का आकार बदलता है: 

 & lt; शीर्षलेख और जीटी;
& lt; svg xmlns = "http://www.w3.org/2000/svg" व्यूबॉक्स = "0 0 285 80" & gt;
& lt; पाठ x = "0" y = "66" & gt; kauai & lt; / पाठ & gt;
& lt; / svg & gt;
& lt; / हेडर और जीटी;

सीएसएस: 

 हेडर एसवीजी पाठ {
फ़ॉन्ट-वजन: 900; फ़ॉन्ट आकार: 90px; भरें: नीला;
}

एसवीजी इनलाइन को प्राप्त करने के लिए अभिगम्यता और एसईओ मूल्य को संरक्षित करता है, और पाठ को पृष्ठ में पहले से ही एम्बेडेड किसी भी फ़ॉन्ट का उपयोग करके स्टाइल करने की अनुमति देता है। ले देख यहां [9 3] अधिक जानकारी के लिए।

06. प्रगतिशील प्रतीक के लिए जगह में चौड़ाई और ऊंचाई छोड़ दें

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

इस भाषण बुलबुले पर एक गैर-स्केलिंग-स्ट्रोक लाइन लागू की गई है, इसलिए व्यूपोर्ट का आकार बदलने पर यह चौड़ाई में नहीं बदलेगा

नियम 2 के लिए एक अपवाद प्रतीक और छोटे लोगो है, जो उन्हें बनाए रखना चाहिए चौड़ाई तथा ऊंचाई यदि आप उन्हें प्रगतिशील रूप से बढ़ाया जाना चाहते हैं तो विशेषताएँ: 

 & lt; एक href = "http://codepen.io" & gt;
    & lt; svg भूमिका = "img" aria-belable = "कोडेपेन" चौड़ाई = "50" ऊंचाई = "50" & gt;
        & lt; शीर्षक & gt; कोडेपेन & lt; / शीर्षक & gt;
        & lt; Xlink का उपयोग करें: href = "# कोडेपेन" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg शैली = "प्रदर्शन: कोई नहीं;" & gt;
    & lt; प्रतीक आईडी = "कोडपेन" व्यूबॉक्स = "0 0 50 50" & gt;
        & lt; पथ डी = "..." / & gt;
    & lt; / प्रतीक & gt;
& lt; / svg & gt;

आप कार्रवाई में इस तकनीक का एक उदाहरण देख सकते हैं [1 9 3] यहां [9 3] ।

यदि हम केवल सीएसएस के साथ एसवीजी आइकन आकार देते हैं, और साइट की स्टाइल शीट लोड नहीं होती है, तो आइकन एक प्रतिस्थापित तत्व के डिफ़ॉल्ट आकार पर दिखाई देगा: 300px x 150px। ऊंचाई और चौड़ाई को विशेषताओं के रूप में रखते हुए, हम उन्हें डिफ़ॉल्ट रूप से निकटतम उचित स्पर्श आकार में आकार दे सकते हैं, और हमारे सीएसएस का उपयोग अपने तरीके को बढ़ाने के तरीके को बढ़ाने के लिए करते हैं।

07. हेयरलाइन को पतला रखने के लिए वेक्टर-प्रभाव का उपयोग करें

डिफ़ॉल्ट रूप से, एसवीजी स्ट्रोक मोटाई सहित व्यूपोर्ट के साथ सबकुछ स्केल करता है। आम तौर पर यह ठीक काम करता है, लेकिन कुछ मामलों में - आरेखों और स्ट्रोक विशेष रूप से पाठ के बाहर प्रभाव के रूप में लागू होते हैं - आप स्ट्रोक को एक ही मोटाई रखना चाहते हैं, इससे कोई फर्क नहीं पड़ता कि ड्राइंग का आकार क्या है। यह छोटे ज्ञात का डोमेन है वेक्टर प्रभाव संपत्ति, जिसे एक प्रस्तुति विशेषता या सीएसएस में लागू किया जा सकता है: 

 पथ {
    भरें: #fff; स्ट्रोक: # 111;
    स्ट्रोक-चौड़ाई: 2;
    वेक्टर-प्रभाव: गैर-स्केलिंग-स्ट्रोक;
}

पर एक नज़र डालें इस तकनीक का एक पूरा उदाहरण [9 3] ।

08. बिटमैप्स को याद रखें

कई डेवलपर्स मान लेते हैं कि एसवीजी केवल वैक्टर का उपयोग कर सकता है, लेकिन जेपीईजी और पीएनजी को एसवीजी ड्राइंग पर भी लागू किया जा सकता है। और जब तक आपने मेरे नियमों का पालन किया है, तब तक, जब आप एक बिटमैप जोड़ते हैं तो वे छवियां उत्तरदायी होंगी टैग: 

 & lt; छवि चौड़ाई = "1024" ऊंचाई = "768" xlink: href = "झील-louise.jpg" x = "1300" y = "150" भूमिका = "छवि" शीर्षक = "crowsnest पास" & gt; & lt; / छवि & gt;

09. अनुकूली समाधान पर विचार करें

The classic Coca-Cola logo rendered at different adaptive sizes

क्लासिक कोका-कोला लोगो विभिन्न अनुकूली आकार में प्रस्तुत किया गया

चीजों को 'स्क्विश' बनाना उत्तरदायी डिजाइन का केवल एक हिस्सा है। अनुकूली डिजाइन की बड़ी भावना में, आरडब्ल्यूडी क्या है, सभी व्यूपोर्ट आकारों पर उचित सामग्री पेश कर रहा है।

यह विभिन्न तरीकों से हासिल किया जा सकता है। Jappramivelogos.co.uk उन उदाहरणों की एक श्रृंखला प्रदान करता है जो एसवीजी स्प्राइट्स का उपयोग करते हैं, लेकिन मैं 'ब्रांडिंग मॉड्यूल' कहने के लिए एसवीजी में मीडिया क्वेरी को एकीकृत करना पसंद करता हूं। यह दृष्टिकोण मुझे घटकों की दृश्यता को जोड़ने, हटाने और संशोधित करने में सक्षम बनाता है। अनुकूली ब्रांडिंग मॉड्यूल के बारे में और पढ़ें मेरे लेख में [9 3] ।

इसी तकनीक का उपयोग आरेख, चित्रण, मानचित्र और अधिक के लिए किया जा सकता है। सबसे सरल मॉड्यूल में, सीएसएस स्वयं को एसवीजी के अंदर लिखा जा सकता है, जो पिछले नियम में उल्लिखित है, इसे हर जगह उपयोग करने योग्य बनाता है।

10. एसवीजी में मीडिया प्रश्नों को एकीकृत करें

बहुत से लोग नहीं जानते कि सीएसएस मीडिया क्वेरी को एसवीजी के अंदर लिखा जा सकता है: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" व्यूबॉक्स = "14 82 272 13 9" & gt;
& lt; defs & gt;
& lt; शैली & gt;
एसवीजी जी {संक्रमण: 1 एस; }
@media सभी और (अधिकतम चौड़ाई: 90REM) {
#drink, #coke {अस्पष्टता: 0; }
}
& lt; / शैली & gt;
& lt; / defs & gt;
& lt; g id = "कोका-कोला" & gt;
& lt; पथ डी = "m109.6 ... & gt;

यह ध्यान रखना महत्वपूर्ण है कि मीडिया क्वेरी केवल उस तत्व को देख सकती है जो इसके अंदर है: यानी, कोई भी माप तत्व से संबंधित है, पृष्ठ नहीं। इस दृष्टिकोण का एक संभावित नकारात्मक पक्ष यह है कि एसवीजी के कैनवास क्षेत्र हमेशा इसके अंदर के तत्वों के सापेक्ष समान रहेगा।

इसके परिणामस्वरूप छोटे व्यूपोर्ट आकारों में बहुत छोटे तत्व हो सकते हैं, जो अपेक्षाकृत बड़े कैनवास क्षेत्र के अंदर तैयार किए गए हैं। इसमें कई समाधान हैं, जिनमें शामिल हैं व्यूबॉक्स का आकार बदलना [9 3] तथा क्षतिपूर्ति करने के लिए तत्वों को स्केल करना [9 3] ।

निष्कर्ष

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

यह लेख मूल रूप से दिखाई दिया नेट पत्रिका अंक 283; यहां खरीदें [9 3] !

संबंधित आलेख:

  • 12 में कोड परीक्षण उपकरण होना चाहिए
  • अपने स्केचिंग कौशल को तेज करें
  • GSAP के साथ सुपरचार्ज एसवीजी एनिमेशन
    • [2 9 6]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to combine 3D and comic art in ZBrush

कैसे करना है Sep 12, 2025

2 का पृष्ठ 1: पृष्ठ 1 [1 1] पृष्ठ 1 [1 1] पृष्ठ 2 [1 9] [1 9]..

पांच मिनट से भी कम समय में किसी व्यक्ति को स्कैन कैसे करें

कैसे करना है Sep 12, 2025

एक फोटोग्रामेट्री कैमरा सरणी तक पहुंचने के लिए न�..

Add UI animations to your site

कैसे करना है Sep 12, 2025

अधिकांश लोग प्रतिदिन उपयोगकर्ता इंटरफेस देखते ह..

Rebuild a 2004 Flash website for 2018

कैसे करना है Sep 12, 2025

1 999 में, मैंने वेब स्टूडियो 1.0 का उपयोग करके अपनी पहली वेबसाइट बनाई। वेब स्ट..

How to create glazes with watercolour

कैसे करना है Sep 12, 2025

इस कार्यशाला के लिए, मैं आपको अपने चित्रों में से �..

How to influence Google rankings with your content

कैसे करना है Sep 12, 2025

आपकी सामग्री कहीं भी नहीं जा रही है जब तक कि लोग खो..

Create a character with a strong pose in Photoshop

कैसे करना है Sep 12, 2025

अतिरंजित पुरुष पात्र बनाना असाधारण के बारे में स�..

Create a painterly feel in your digital art

कैसे करना है Sep 12, 2025

डिजिटल पेंटिंग ऐतिहासिक रूप से बहुत कृत्रिम दिख�..

श्रेणियाँ