यह एक स्निपेट से कम है और कुछ के लिए एक अनुस्मारक का अधिक है जो मैं अक्सर देखता हूं। एडोब इलस्ट्रेटर में एसवीजी फाइलें बनाते समय, फाइलों के निर्यात के लिए अलग-अलग तरीके हैं। दोनों विधियों में मुट्ठी भर विकल्प शामिल हैं, जिनमें से कुछ मैं पूरी तरह से भूल गया कि उनका क्या मतलब है और क्या चयन करना है।
विधि 1: इस रूप में सहेजें ...
आप शायद वेब पर उपयोग के लिए एसवीजी को बचाने के लिए इस पद्धति का उपयोग नहीं करेंगे। यह काफी हद तक एक मास्टर दस्तावेज़ को बचाने के लिए है। वास्तव में, आप सीधे इलस्ट्रेटर प्रारूप में सीधे बच सकते हैं। आप वेब के लिए निर्यात करने के लिए अन्य निर्यात विकल्पों में से कुछ का उपयोग करेंगे।
एडोब इलस्ट्रेटर में एसवीजी के रूप में एक फ़ाइल को सहेजने का सबसे आम तरीका File > Save As… मुख्य मेनू से विकल्प चुनना है ।
इलस्ट्रेटर एक डायलॉग विंडो को आग देगा जिसमें आपसे पूछा जाएगा कि फ़ाइल का नाम क्या है और इसे कहां सहेजना है। इससे भी महत्वपूर्ण बात, यह भी पूछता है कि किस प्रकार की फ़ाइल को सहेजना है, इस मामले में, एसवीजी है। एसवीजी संपीड़ित (svgz) नहीं। सादा ओल 'एसवीजी।
सेव बटन पर क्लिक करें और विकल्पों का एक और सेट दिखाई देगा। यह वह जगह है जहां मेरी स्मृति मुझे विफल कर देती है और मुझे जवाब के लिए वेब को परिमार्जन करना पड़ता है। यहाँ Adobe Illustrator में एक SVG फ़ाइल को सहेजने के लिए एक पूरी तरह से इष्टतम तरीका का एक स्क्रीनशॉट है।
- एसवीजी प्रोफाइल : यह शुरुआती
टैग पर एक्सएमएल दस्तावेज़ प्रकार सेट करता है । एसवीजी 1.1 नवीनतम संस्करण है, जिसमें सबसे व्यापक समर्थन है और संभवतः सबसे उपयुक्त विकल्प है। बाकी सब कुछ या तो एक पुराना संस्करण है या एसवीजी 1.1 का एक सबसेट है और मुझे इसे चुनने पर अभी तक एक मुद्दे में नहीं चलना है। - फ़ॉन्ट्स> प्रकार : "कन्वर्ट करने के लिए रूपरेखा" का चयन यह सुनिश्चित करेगा कि फ़ाइल में निर्यात किया गया कोई भी टाइप किया हुआ पाठ ग्लाइक्स के बजाय वेक्टर पथ है। ग्लिफ़्स का प्रतिपादन नहीं होने का एक मौका है, लेकिन वेक्टर पथ हमेशा एक बड़ा अंगूठा होता है।
- विकल्प> छवि स्थान : यदि फ़ाइल में रेखापुंज चित्र (पढ़ें: JPG.webp, PNG, GIF) का उपयोग किया जाता है, तो हम "लिंक" विकल्प का चयन करना चाहेंगे। अन्यथा, रेखापुंज छवि को फ़ाइल में एम्बेड किया जाएगा और उन अतिरिक्त संपत्तियों को शामिल करने के लिए फ़ाइल के आकार को बढ़ाकर एसवीजी से बाहर प्रदर्शन लाभ को बेकार करता है। लिंक के रूप में उन्हें संदर्भित करने के लिए बेहतर है और उन स्रोत फ़ाइलों को एसवीजी फ़ाइल के समान निर्देशिका में शामिल करना सुनिश्चित करें।
- विकल्प> इमेज लोकेशन> इलस्ट्रेटर एडिटिंग क्षमताओं को संरक्षित करें : एसवीजी फ़ाइल के आउटपुट पर इसका व्यापक प्रभाव पड़ता है। चूंकि आप शायद यहां एक "मास्टर" कॉपी सहेज रहे हैं, वेब पर हमारे लिए इरादा नहीं है, आप इस जाँच को छोड़ देंगे। अगली बार फ़ाइल खोलने पर यह इलस्ट्रेटर मालिकाना चीज़ों (जैसे गाइड) को संरक्षित करेगा। अनियंत्रित का अर्थ होगा, जैसे चीजें छीन ली जाएंगी और खो दी जाएंगी।
- उन्नत विकल्प> सीएसएस गुण : मैं इस के लिए "प्रस्तुतीकरण गुण" का चयन करता हूं क्योंकि यह गुणों (जैसे भरता, स्ट्रोक और ऐसे) को विशिष्टता के निम्नतम स्तर पर रखता है। उदाहरण के लिए
। यह तत्व को स्टाइल करता है, लेकिन CSS में ओवरराइड करने के लिए बहुत आसान है। - उन्नत विकल्प> दशमलव स्थान : यदि आपने कोड को किसी के लिए ब्राउज़ किया है
, तो आप जानते हैं कि उन आकृतियों को निर्दिष्ट करने वाले मूल्य सुपर सटीक हो सकते हैं। कई बार, हालांकि, वे बहुत सटीक हैं और एसवीजी फ़ाइल के समग्र आकार में जोड़ते हैं। चूंकि आप यहां मास्टर फ़ाइल सहेजने की संभावना रखते हैं, इसलिए आप इसे बहुत अधिक रख सकते हैं, क्योंकि फ़ाइल का आकार बहुत अधिक चिंता का विषय नहीं है। - उन्नत विकल्प> एन्कोडिंग : मैं यूटीएफ एन्कोडिंग पर एक शौकीन नहीं हूं, लेकिन "यूनिकोड यूटीएफ -8" पर इसे छोड़ना आगे की अनुकूलता सुनिश्चित करता है। इसके अलावा, UTF-8 फाइल का आकार UTF-16 से छोटा होता है, इसलिए यह अपने आप में एक जीत है।
- उन्नत विकल्प> उत्तरदायी : इस अनियंत्रित को छोड़ने से एसवीजी पर निश्चित
heightऔरwidthविशेषताएँ सेट हो जाएंगी । मैं इस विकल्प की जांच करता हूं क्योंकि यह मुझे उन विशेषताओं को कोड में या सीएसएस में सेट करने देता है।
विधि 2: निर्यात के रूप में
एडोब इलस्ट्रेटर से एसवीजी प्राप्त करने का दूसरा तरीका File > Export > Export As… मुख्य मेनू से विकल्प चुनना है । हालांकि, इलस्ट्रेटर कार्यक्षेत्र में एक्टीशंस पैनल का उपयोग करके वहां पहुंचने का एक दूसरा तरीका है।
यह विकल्प आदर्श है यदि आप जानते हैं कि आप इस फ़ाइल को सीधे वेब पर उपयोग करने जा रहे हैं और बाद में डिज़ाइन के साथ छेड़छाड़ की योजना नहीं बनाते हैं। यह कम सेटिंग्स और विकल्पों की एक जोड़ी प्रदान करता है जो फ़ाइल को बेहतर प्रदर्शन के लिए आगे फ़ाइल को अनुकूलित करने की अनुमति देता है। वास्तव में, यह मास्टर फाइल के बजाय फ़ाइल की एक प्रति पर ऐसा करने के लिए सबसे अच्छा अभ्यास है, इसलिए एक संस्करण है जिसे बाद में इलस्ट्रेटर में खोला और संपादित किया जा सकता है और दूसरा जो उत्पादन वेबसाइट पर सेवा करने के लिए अधिक अनुकूल है।
- स्टाइलिंग : हमने इसे पहले विधि 1 सेटिंग्स में कवर किया था, लेकिन मैं यहां "प्रेजेंटेशन एट्रिब्यूट्स" चुनता हूं क्योंकि यह उच्चतम स्तर की विशेषताओं पर गुणों को व्यवस्थित करने का एक तरीका है। यह मार्कअप के लिए आदेश जोड़ता है, सीएसएस के साथ बाद की विशेषताओं को स्टाइल करने की हमारी क्षमता में लचीलापन है, और अक्सर छोटे फ़ाइल आकार की ओर जाता है।
- फ़ॉन्ट : यह एक और है जिसे हमने ऊपर कवर किया था, लेकिन "कन्वर्ट टू आउटलाइन" को चुनने के लिए ग्लिफ़ को वर्णों के लिए सदिश रास्तों पर स्वैप किया, जो पाठ रेंडरर्स को सही ढंग से सुनिश्चित करता है।
- छवियाँ : यह अभी तक एक और है जिसे हमने ऊपर कवर किया था, लेकिन "लिंक" चुनने से एम्बेड की गई छवियों को एसवीजी में पैक होने से रोका जा सकेगा, जो फ़ाइल को बहुत बड़ा बनाता है।
- ऑब्जेक्ट आईडी : यह सेटिंग मार्कअप में आईडी का नाम रखने के लिए इलस्ट्रेटर मार्चिंग आदेश देती है। आप इसे आईडी के नाम के आधार पर बता सकते हैं कि फाइल में परतों का नाम कैसे है।
- दशमलव : कोड में कम दशमलव छोटे फ़ाइल आकार का मतलब है। यह निर्धारित करना
1कई मामलों में आदर्श और ठीक है और डिजाइन में ध्यान देने योग्य अंतर नहीं होगा, लेकिन2आमतौर पर सुरक्षित है। किसी भी तरह से, यह जांचने योग्य है कि एसवीजी कैसे प्रदान किया जाता है। - न्यूनतम : हाँ, कृपया! यह कोड को व्हाट्सएप को कम करने और सीएसएस को छोटा करने जैसे वेब प्रदर्शन को बढ़ाने के लिए कम करता है।
- उत्तरदायी : बिल्कुल पहली विधि की तरह, इस विकल्प का चयन करना आदर्श है क्योंकि फिक्स्ड
heightऔरwidthविशेषताओं को अन्यथा एसवीजी पर रखा जाएगा।