HTML5 लोगो या वेब पेज पर वेक्टर इमेज कैसे लगाएं

20 वीं वर्षगांठ को समर्पित IMG टैग

25 फरवरी, 1993, मार्क आंद्रेसेन ने लिखा:
एक नया वैकल्पिक HTML टैग पेश करना: IMG
जब यह निर्दिष्ट तर्क SRC = "url" होना चाहिए।
टैग बिटमैप फ़ाइल (बिटमैप या पिक्समैप) को संदर्भित करता है। ब्राउज़र वेब पर इस फ़ाइल का अनुरोध करेगा, इसे एक छवि के रूप में पहचानें और पृष्ठ कोड में टैग के स्थान के अनुसार पाठ में डालें।

मान लें कि आपने Corel Draw में आकर्षित किया है! कंपनी का लोगो और इसे साइट पर किसी भी तरह से नहीं, बल्कि HTML5 प्रारूप में रखने जा रहे हैं। और, तदनुसार, छवि को रेखापुंज प्रारूप में नहीं, बल्कि .SVG में रखें

मुझे एसवीजी में चित्र की आवश्यकता क्यों है?

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


डिफ़ॉल्ट रूप से, Corel Draw से निर्यात करें! एसवीजी प्रारूप में, यहां तक ​​कि "केवल चयनित वस्तुओं" चेकमार्क के साथ, परिणाम हमारे कार्यपत्रक जितना बड़ा है। यही है, चित्र ए 4 पर होगा, अगर वर्कशीट इस प्रारूप का है। हमें पिक्सल में ठीक उसी आकार की एक अलग शीट बनानी होगी, जिसकी हमें जरूरत है, उस आकार, केंद्र का हमारा लोगो बनाएं और फिर उसे निर्यात करें।

अब पेज पर पेस्ट करें

टैग पेज चिपकाते समय

<img src="logo.svg" alt=" " border=”0”> 

हमें तुरंत एंड्रॉइड 4 और आईपैड के लिए ब्राउज़रों में एक जादुई परिणाम दिखाई देता है, लेकिन हम नियमित ब्राउज़र में कंप्यूटर पर कुछ भी नहीं देखते हैं। फ़ायरफ़ॉक्स 13, आईई 8, ओपेरा 12, क्रोम (संस्करण 24) - सभी एक साथ एसवीजी फ़ाइल को केवल दिखाने के लिए डाउनलोड करने और सहेजने की पेशकश करते हैं।
आइए SVG डालने का दूसरा तरीका आजमाते हैं -

 <embed src="logo.svg" type="image/svg+xml" width="391" height="50" /> 

- एक पूरी तरह से समान परिणाम दिखाता है, ओपेरा, हालांकि, "कोई प्लग-इन नहीं।" परिचित होने के लिए? ”
एसवीजी को एम्बेड करने का तीसरा तरीका एक टैग के साथ है

 <object type="image/svg+xml" data="logo_oss.svg"> :      SVG</object> 

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

माइम-प्रकार

यह पता चला है कि तथ्य यह है कि मेरे सर्वर (आईबीएम लोटस डोमिनोज़) को नहीं पता कि एसवीजी के लिए माइम-टाइप को सही ढंग से कैसे प्रस्तुत किया जाए। और फ़ाइल संसाधन डेटाबेस में पड़ी फ़ाइल को सही ढंग से नहीं दिया जा सकता है! मैं संसाधन गुणों में लाइन इमेज / svg + xml रजिस्टर करता हूं। और लो! - सभी ब्राउज़र (IE8 को छोड़कर) चित्र डालने के लिए सभी तीन विकल्प ( img , एम्बेड , ऑब्जेक्ट ) दिखाते हैं। खैर, जो मुझे सूट करता है, IE के लिए बैसाखी gifs में होगा। एक बार फिर, मैं इस तथ्य से हैरान हूं कि गोलियों पर माइम-प्रकार के बिना भी सब कुछ सही ढंग से दिखाई दिया।

लोगो को करीब से देखें

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

अनधिकृत नकल और प्लेबैक के खिलाफ सुरक्षा के बारे में क्या?

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

संबंधित साहित्य:
HTML5 गाइड habrahabr.ru/company/piter/blog/162161