2012-11-05 5 views
121

मैं किसी वेबसाइट के लिए एक एसवीजी लोगो का उपयोग करना चाहता हूं - यह सभी उपकरणों के लिए एक उत्तरदायी डिजाइन पर शानदार दिखने के लिए।इलस्ट्रेटर से वेब के लिए एसवीजी निर्यात करने के लिए इष्टतम सेटिंग्स?

लेकिन there are issues के बाद से, मैं जितना संभव हो उतने डिवाइस और ब्राउज़र का समर्थन करना चाहता हूं। लोड गति भी एक महत्वपूर्ण विचार है। एडोब इलस्ट्रेटर में निर्यात सेटिंग्स इस सब में फिट कैसे होती हैं?

इलस्ट्रेटर में, एसवीजी निर्यात के लिए कई विकल्प हैं। सबसे पहले, जो एसवीजी प्रोफाइल सबसे अच्छा है?

enter image description here

मुझे लगता है एसवीजी टिनी एक कम फ़ाइल आकार है? क्या कई डिवाइस एसवीजी छोटे का समर्थन करते हैं? सबसे महत्वपूर्ण मतभेद क्या हैं? (this W3 monster पढ़ने के बिना।)

दूसरा, मुझे लगता है कि छवि स्थान के लिए सबसे अच्छा विकल्प "लिंक" है? (विस्मयादिबोधक चिह्न के बाद विवरण देखें।)

enter image description here

वैकल्पिक रूप से, कैसे "एम्बेड" विकल्प के लिए ब्राउज़र समर्थन है?

enter image description here

धन्यवाद!

पीएस एक फॉलबैक अल्फा-पीएनजी विकल्प होगा, लेकिन मैं चाहता हूं कि एसवीजी जितना संभव हो उतना सर्वोत्तम समर्थित हो। (इसके बारे में सोचने के लिए आओ, फ़ॉलबैक विकल्प - एक JPG तरह - शायद सबसे अच्छा इस मामले में परोसा जा के बाद से अल्फा पीएनजी ही पुराने IE के लिए एक समाधान की जरूरत है।)

अद्यतन: रहे हैं कॉन्फ़िगर किया जा सकता है कि और भी विकल्प। मैं पाठ के साथ काम नहीं कर रहा हूं, इसलिए एकमात्र प्रासंगिक जो मैं देखता हूं वह दशमलव स्थान है। लोगो के लिए, अधिकतम 200x200px के रूप में प्रदर्शित किया जाना चाहिए (इसलिए रेटिना डिस्प्ले पर 400x400px), "3" सबसे अच्छी सेटिंग है? या फ़ाइल आकार को कम करने के लिए "2"?

enter image description here

+4

दोनों प्रश्न और उत्तर दोनों इस पर वास्तव में अच्छे हैं - बाउमर और डुओपिक्सल दोनों के लिए प्रोप। – aendrew

+0

@एंड्रू, धन्यवाद! – Baumr

+1

बहुत उपयोगी मार्गदर्शिका: http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/ –

उत्तर

206

एसवीजी प्रोफाइल

  • एसवीजी 1.0: सभी आधुनिक डेस्कटॉप और मोबाइल ब्राउज़रों का समर्थन एसवीजी 1.1, अतः इस विकल्प कभी नहीं चुनें।
  • एसवीजी 1.1: आप लगभग हमेशा यह चाहते हैं।
  • एसवीजी छोटा/मूल: यह मोबाइल उपकरणों के लिए एसवीजी का एक सबसेट है। केवल कुछ मुट्ठी भर डिवाइस एसवीजी छोटे का समर्थन करते हैं और पूर्ण कल्पना नहीं, इसलिए एसवीजी 1.1 के लिए जाएं।

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

फ़ॉन्ट्स नोट: यदि आपके पास अपनी छवि में कोई टेक्स्ट नहीं है तो यह सेटिंग कोई फर्क नहीं पड़ता।

  • एडोब सीईएफ: इस विकल्प का उपयोग कभी भी ब्राउज़र में प्रदर्शित करने का इरादा नहीं है। यह एसवीजी फाइलों में एम्बेडिंग फोंट का एडोब का तरीका है, जहां तक ​​मुझे पता है कि यह केवल एडोब के एसवीजी दर्शक प्लगइन द्वारा समर्थित है।

  • एसवीजी: इस एसवीजी, जो फ़ायरफ़ॉक्स द्वारा समर्थित नहीं है के रूप में फ़ॉन्ट एम्बेड करता है, लेकिन एक अच्छा विकल्प है यदि आप केवल मोबाइल उपकरणों (जो आमतौर पर वेबकिट चलाने) का समर्थन करना चाहते हैं।

  • रूपरेखा बनाएं: आप अधिकतर समय करना चाहेंगे, जब तक आपके पास बड़ी मात्रा में टेक्स्ट न हो। यदि आपके पास बड़ी मात्रा में टेक्स्ट है तो आप डब्ल्यूओएफएफ के साथ फ़ॉन्ट एम्बेड करना चाहते हैं लेकिन आपको इसे हाथ से करना होगा।

subsetting:

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

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

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

छवियाँ: यह केवल मामलों अगर आप बिटमैप छवियों

  • एम्बेड शामिल कर रहे हैं: यह आम तौर पर क्या आप चाहते है, यह एक डेटा uri के रूप में छवि encodes ताकि आप svg फ़ाइल के बजाय इसके साथी बिटमैप छवियों के साथ एक फ़ाइल अपलोड करें।

  • लिंक: केवल तभी उपयोग करें जब आपके पास एक बिटमैप फ़ाइल का संदर्भ देने वाली कई svg फ़ाइलें हों (इसलिए यह हर बार svg फ़ाइल प्रस्तुत करता है)।

ध्यान दें कि बिटमैप छवियों लिंक किया था तो एसवीजी <img> टैग के माध्यम से प्रदर्शित किया जाता है प्रदर्शित नहीं करेगा, क्योंकि img बाह्य संसाधनों लोड हो रहा है की अनुमति नहीं है। इसके अलावा: वेबकिट में एक बग है जो एसवीजी फाइलों के भीतर बिटमैप छवियों को प्रदर्शित नहीं करता है भले ही आप उन्हें एम्बेड करते हैं। संक्षेप में: यदि आप बिटमैप छवियों को एम्बेड या लिंक करना चाहते हैं तो एक सादा <svg> टैग का उपयोग करें, <img> का उपयोग न करें।

बचाना इलस्ट्रेटर संपादन क्षमताओं

मैं अपने स्रोत छवि के रूप में एक .ai फ़ाइल को बचाने के लिए, और एक Export for web सुविधा के रूप में एसवीजी फ़ाइल के बारे में सोचना पसंद करते हैं।इस तरह आप फ़ाइल आकार को कम करने पर ध्यान केंद्रित करते हैं और सभी संपादन क्षमताओं के साथ अपनी वेक्टर फ़ाइल की एक पुरानी प्रतिलिपि रखते हैं। तो इसे मत चुनें।

दशमलव स्थान

डिफ़ॉल्ट 3 एक समझदार सेटिंग है और आप ज्यादातर इसके बारे में भूल सकता है।

हालांकि, यदि आपके पास 1 या 0 तक इस सेटिंग को कम करने वाले कई बिंदुओं के साथ वास्तव में जटिल पथ हैं, तो फ़ाइल आकार को काफी कम कर देगा। लेकिन आपको सावधान रहना चाहिए क्योंकि बेजियर सेगमेंट इस सेटिंग के प्रति बहुत संवेदनशील हैं और वे थोड़ा विकृत लग सकते हैं। इसलिए यदि आप इस सेटिंग को कम करते हैं तो हमेशा यह सुनिश्चित करें कि यह ब्राउज़र में स्वीकार्य दिखता है।

एन्कोडिंग

वर्ण एन्कोडिंग के पीछे स्पष्टीकरण नहीं बल्कि तकनीकी है, और यह केवल पाठ के साथ चिंताओं SVG फ़ाइलें। आपको सबसे अधिक संभावना एन्कोडिंग की आवश्यकता है यूटीएफ -8, इसे तब तक न बदलें जब तक आप यह नहीं जानते कि आप क्या कर रहे हैं।

के लिए अनुकूलन एडोब एसवीजी व्यूअर

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

टुकड़ा करने की क्रिया डेटा

यह आपके एसवीजी फ़ाइल के लिए मेटाडेटा ब्लोट कहते हैं जब तक आप Illustrator में बाद में अपने एसवीजी फ़ाइल को खोलने और अपने स्लाइस खोजने (यदि आप उन्हें है), इस की जांच नहीं करते पर योजना को शामिल करें

फ़ाइल, आप कर सकते हैं read on XMP here के बारे में XMP

अधिक मेटाडाटा को शामिल करें। इस

आउटपुट की जांच नहीं करते कम <tspan> तत्वों

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

उपयोग एक रास्ता

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


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

+0

** धन्यवाद! ** क्या विस्तृत प्रतिक्रिया है! मुझे लगता है कि एसवीजी टिनी का निचला फ़ाइल आकार है? और जब आपने कहा, _ "केवल कुछ मुट्ठी भर डिवाइस एसवीजी छोटे का समर्थन करते हैं और पूर्ण कल्पना नहीं" _, क्या आपका मतलब है कि ** कई डिवाइस एसवीजी छोटे का समर्थन नहीं करते हैं? ** मुझे लगता है कि मैं वास्तव में क्या पूछ रहा हूं, ** सबसे महत्वपूर्ण मतभेद क्या हैं? ** (इस डब्ल्यू 3 राक्षस को पढ़ने के बिना] (http://www.w3.org/TR/SVGMobile/)।) फिर से धन्यवाद! ** अद्यतन: ** यदि आप रुचि रखते हैं तो मैंने मूल प्रश्नों के लिए दशमलव स्थान ** के बारे में एक अतिरिक्त ** भाग जोड़ा है। मैंने एक टेक्स्ट एडिटर में एसवीजी खोला - यह जानने के लिए कुछ भी ** ** कौन सा एक्सएमएल निकालना है? ** – Baumr

+3

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

+0

फिर से धन्यवाद। ऐसी चीजें मत कहें जैसे "आप केवल पुराने ब्लैकबेरी फोन के लिए कवरेज प्राप्त कर रहे हैं" - मुझे इससे कोई फर्क नहीं पड़ता कि इससे कितना पुराना हो: पी – Baumr

संबंधित मुद्दे