SVG फाईल कशी तयार करावी

वेबसाइट तयार करताना वेब डिझायनरला विचारात घ्यावे लागते चार आवश्यक मुद्दे वेबच्या लेआउट आणि व्हिज्युअल डिझाइनबद्दल विचार करणे, मजकूर, प्रतिमा, रंग आणि फॉन्ट कर्मचारी

या चार मुद्द्यांपैकी, या पोस्टमध्ये आपण ज्याला सर्वात जास्त महत्त्व देणार आहोत ते म्हणजे प्रतिमा, कारण आपण याबद्दल बोलणार आहोत. svg फाइल्स कशी तयार करावी कारण तुम्ही ज्या इमेजसह काम करता त्यांची गुणवत्ता विचारात घेणे फार महत्वाचे आहे.

SVG फाइल्ससह उपचार, व्यावसायिकांनी वाढवली आहे आणि डिझाइनच्या जगात इतके व्यावसायिक नाहीत.

SVG फाइल म्हणजे काय?

SVG हे स्कॅलेब व्हेक्टर ग्राफिक्सचे इंग्रजीतील संक्षेप आहे, स्पॅनिशमध्ये, स्केलेबल वेक्टर ग्राफिक्स. हे सुमारे ए मुक्त आणि मुक्त स्वरूप ज्यासह 2D ग्राफिक्स, दोन आयाम तयार करायचे.

JPG किंवा PNG सारख्या इतर इमेज फॉरमॅटच्या विपरीत, SVG हे स्केलेबल फॉरमॅट आहे, तुम्हाला त्याचा आकार कितीही वाढवायचा आहे, कारण प्रतिमेची गुणवत्ता राखली जाईल. हे ग्राफिक्स किंवा वेक्टर प्रतिमा ठेवण्यासाठी वेब पृष्ठांमध्ये सर्वात जास्त वापरल्या जाणार्‍या स्वरूपांपैकी एक आहे.

आम्ही SVG का वापरावे?

या प्रकारच्या फॉरमॅटसह, वेक्टर प्रतिमा त्यांचा आकार आणि रिझोल्यूशन विचारात न घेता उच्च गुणवत्ता राखतील. याउलट, बिटमॅपने बनलेल्या, पिक्सेलच्या बनलेल्या प्रतिमा, त्यांचा आकार बदलल्यास गुणवत्ता गमावते. SVG स्वरूप त्याच्या लाइटनेस आणि अष्टपैलुत्वाद्वारे परिभाषित केले जाते.

हे स्वरूप वापरण्याच्या बाजूने आणखी एक मुद्दा म्हणजे त्याचे लहान आकार, म्हणजे, याबद्दल धन्यवाद पृष्ठे जेथे आहेत तेथे लोडिंग गती वाढवते. या प्रतिमा ब्राउझरने तयार केल्या आहेत, ज्यामुळे सर्व्हरवरील लोड आणि वापर कमी होण्यास मदत होते.

याव्यतिरिक्त, ते करू शकतात अॅनिमेटेड SVG प्रतिमा तयार करा ज्याद्वारे आमच्या वेबसाइटला जवळची हवा द्यावी आणि याला भेट देणाऱ्या दर्शकांचे लक्ष वेधून घ्यावे.

SVG हे खुले स्वरूप आहे, म्हणजे, सुधारणा आणि अद्यतने होऊ शकतात. याव्यतिरिक्त, SVG फायली वेक्टर संपादन प्रोग्रामसह संपादित केल्या जाऊ शकतात, उदाहरणार्थ Adobe Illustartor त्याच्या प्रदर्शनात गुणवत्ता न गमावता, ती कोणत्याही डिव्हाइसवर पाहिली जाऊ शकते. हे आम्हाला गुणवत्ता न गमावता मुद्रित करण्याची परवानगी देते.

SVG फायली सहजपणे कशा तयार करायच्या

कदाचित SVG फायली तयार करण्याचा सर्वात सोपा मार्ग, जर तुम्ही त्यांच्याशी परिचित असाल तर, ग्राफिक डिझाइन प्रोग्रामद्वारे आहे, जसे की इलस्ट्रेटर, कोरल ड्रॉ.

इलस्ट्रेटर प्रोग्रामवर लक्ष केंद्रित करून, जेव्हा आपण SVG फॉरमॅट वापरणार आहोत, तेव्हा आपण ग्रेडियंट्स किंवा इतर इफेक्ट्स, जसे की कलात्मक प्रभाव, ब्लर, ब्रशेस, पिक्सेल्स इत्यादी वापरल्या आहेत का ते विचारात घ्यावे लागेल. SVG फाईल फॉरमॅटमध्‍ये सेव्‍ह केल्‍यावर ते रास्‍टराइज केले जातात. SVG फिल्टर प्रभाव वापरण्याची शिफारस केली जाते, प्रभाव जोडण्यासाठी जेणेकरुन ते नंतर रास्टराइज केले जाऊ शकत नाहीत.

आम्‍ही तुम्‍हाला दिलेल्‍या सल्‍ल्‍याचा आणखी एक भाग वापरण्‍याचा आहे चांगल्या कामगिरीसाठी चित्रांमध्ये साधी चिन्हे आणि मार्ग सांगितलेल्या स्वरूपाचे. भरपूर ट्रेसिंग असलेले ब्रश वापरणे टाळा कारण यामुळे जास्त डेटा लोड होतो.

या प्रोग्राममध्ये SVG फाइल तयार करण्यासाठी, पहिली गोष्ट म्हणजे एक रिक्त कॅनव्हास उघडणे आवश्यक आहे जिथे आपण आपल्या कल्पनेवर कार्य करू.

आमचे काम पूर्ण झाल्यावर, आम्ही काय करणार आहोत ते प्रोग्राम वर दर्शविलेल्या टूलबारवर जा आणि आम्ही पर्याय निवडू. फाईल, जतन करा आणि एक पॉप-अप स्क्रीन दिसेल जिथे ते आम्हाला आमच्या फाइलला नाव देण्यास सांगते आणि आम्हाला ते ज्या फॉरमॅटमध्ये सेव्ह करायचे आहे ते दर्शवा. या शेवटच्या विभागात आपल्याला SVG पर्याय चिन्हांकित करणे आवश्यक आहे.

SVG प्रकार निवडताना, एक डायलॉग बॉक्स दिसतो जो आपल्याला विचारात घेतले पाहिजे असे भिन्न पर्याय दर्शवितो.

सामान्य नियमानुसार, टेबलमध्ये दिसणार्‍या पहिल्या फील्डमध्ये, SVG 1.1 प्रोफाइल दिसते. खालील मध्ये ते आम्हाला स्त्रोत निवडण्याचा पर्याय देते, ज्यामध्ये ते आम्हाला देतात SVG मध्‍ये मार्कअप केलेल्या मजकूरासाठी डीफॉल्‍ट आणि उपसंच काहीही नाही. आमच्या बाबतीत, या कामात फॉन्ट नाहीत, जर असे केले असेल तर, उपसंच पर्याय काहीही वरून सर्व चित्रग्राममध्ये बदलला पाहिजे.

पुढील विभाग अतिशय महत्वाचा आहे, जर आपण निदर्शनास आणले तर एम्बेड पर्याय, रचनाच्या प्रतिमा फाइलमध्ये समाविष्ट केल्या जातील, ज्यामुळे आपण भरपूर बिटमॅप प्रतिमा वापरल्यास त्याचे वजन वाढेल. दुसरीकडे, आम्ही लिंक करण्याचा पर्याय चिन्हांकित केल्यास, आम्ही वेबसाइटवर प्रतिमा वापरणार असल्यास आम्ही सावधगिरी बाळगली पाहिजे, कारण आम्ही आमच्या प्रतिमांच्या फायली समाविष्ट केल्या पाहिजेत, आणि अतिशय महत्त्वाचे म्हणजे, त्यांची देखभाल मार्ग या पर्यायाचा फायदा असा आहे की फाइल्सचे वजन खूपच कमी असेल.

प्रगत पर्याय विभागात आम्हाला पर्याय सापडतो SVG कोड, हा पर्याय फाईल आत कशी आहे हे दर्शवेल, म्हणजे, आमच्या कामामागील कोड. तुम्हाला तुमची SVG फाइल जोडायची असल्यास हा पर्याय आवश्यक आहे, उदाहरणार्थ तुमच्या वैयक्तिक WordPress मध्ये, तुम्हाला फक्त कोड कॉपी करावा लागेल आणि तो थेट तुमच्या WordPress HTML एडिटरमध्ये जोडावा लागेल.

आम्ही तुम्हाला शेवटचा सल्ला देतो तो म्हणजे SVG फॉरमॅटमध्ये सेव्ह करताना, लक्षात ठेवा की तुम्ही वेगवेगळ्या आर्टबोर्डसह काम करत असल्यास, फक्त सक्रिय आर्टबोर्ड ठेवला जाईल.

जर आम्हाला आणखी पुढे जायचे असेल आणि आमच्या चित्रात SVG प्रभाव लागू करायचे असतील, तर Illustrator आम्हाला प्रभावांचा एक संच ऑफर करतो. हे करण्यासाठी, आपल्याला एखादी वस्तू किंवा गट निवडावा लागेल. इफेक्ट लागू करण्यासाठी आम्ही इफेक्ट विंडो, एसव्हीजी फिल्टर्स निवडून ते लागू केले पाहिजेत.

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

तुम्ही पाहिल्याप्रमाणे, द SVG स्वरूप एक क्रांती आहे. त्याच्या क्षमता आणि गुणवत्तेबद्दल धन्यवाद ते ऑफर करते, जे वेब पृष्ठे आम्हाला कार्यक्षमतेचा त्याग न करता अधिक आकर्षक वाटतात, जोपर्यंत ते सांगितलेल्या स्वरूपाचा योग्य वापर करतात. SVG हे डिझाईन आणि वेब डेव्हलपमेंटच्या जगामध्ये परिपूर्ण युनियन बनले आहे.