एसवीजी फाइल कैसे बनाएं

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

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

एसवीजी फाइलों के साथ उपचार, पेशेवरों द्वारा बढ़ रहा है और डिजाइन की दुनिया में इतने पेशेवर नहीं हैं।

एक एसवीजी फाइल क्या है?

SVG, स्केलेब वेक्टर ग्राफिक्स के लिए अंग्रेजी में संक्षिप्त नाम है, स्पेनिश में, स्केलेबल वेक्टर ग्राफिक्स। यह एक के बारे में है खुला और मुक्त प्रारूप जिससे 2डी ग्राफिक्स बनाने के लिए, दो आयाम।

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

हमें एसवीजी का उपयोग क्यों करना चाहिए?

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

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

इसके अलावा, वे कर सकते हैं एनिमेटेड एसवीजी छवियां बनाएं जिससे हमारी वेबसाइट को एक नजदीकी हवा मिल सके और इसे देखने वाले दर्शकों का ध्यान आकर्षित किया जा सके।

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

आसानी से एसवीजी फाइलें कैसे बनाएं

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

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

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

इस प्रोग्राम में SVG फाइल बनाने के लिए, पहली चीज जो हमें खोलनी है वह एक खाली कैनवास है जहां हम अपने विचार पर काम करेंगे।

एक बार जब हमारा काम समाप्त हो जाता है, तो हम जो करने जा रहे हैं वह प्रोग्राम के ऊपर दिखाए गए टूलबार पर जाता है, और हम विकल्प का चयन करेंगे फ़ाइल, इस रूप में सहेजें, और एक पॉप-अप स्क्रीन दिखाई देगी जहाँ यह हमें अपनी फ़ाइल को एक नाम देने के लिए कहती है और उस प्रारूप को इंगित करें जिसमें हम इसे सहेजना चाहते हैं। यह इस अंतिम खंड में है जहां हमें एसवीजी विकल्प को चिह्नित करना चाहिए।

एसवीजी प्रकार का चयन करते समय, एक डायलॉग बॉक्स दिखाई देता है जो हमें विभिन्न विकल्प दिखाता है जिन्हें ध्यान में रखा जाना चाहिए।

एक सामान्य नियम के रूप में, तालिका में दिखाई देने वाले पहले फ़ील्ड में, SVG 1.1 प्रोफ़ाइल दिखाई देती है। निम्नलिखित में यह हमें उन स्रोतों को चुनने का विकल्प देता है, जिनमें वे हमें देते हैं एसवीजी में चिह्नित पाठ के लिए डिफ़ॉल्ट और कोई नहीं के रूप में उपसमुच्चय. हमारे मामले में, इस काम में फोंट नहीं हैं, अगर ऐसा होता है, तो सबसेट विकल्प को सभी चित्रलेखों में से कोई नहीं से बदलना होगा।

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

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

आखिरी सलाह जो हम आपको देते हैं वह यह है कि एसवीजी प्रारूप में बचत करते समय, ध्यान रखें कि यदि आप अलग-अलग आर्टबोर्ड के साथ काम कर रहे हैं, तो केवल सक्रिय आर्टबोर्ड ही रखा जाएगा।

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

SVG फ़िल्टर लागू करते समय, डिज़ाइन प्रोग्राम हमें एक विंडो दिखाता है जहाँ लागू किए जा सकने वाले फ़िल्टर की एक सूची दिखाई देती है, एक बार जब हम एक का चयन करते हैं, तो इलस्ट्रेटर हमें दिखाता है कि यह कैसा दिखता है, लेकिन एक रास्टराइज़्ड संस्करण में।

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