अपने वेबपृष्ठ पर एसवीजी ग्राफिक्स कैसे रखें

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

एसवीजी एम्बेड करने के लिए ऑब्जेक्ट टैग का प्रयोग करें

एचटीएमएल टैग आपके वेब पेज में एक एसवीजी ग्राफ़िक एम्बेड करेगा। आप उस एसवीजी फ़ाइल को परिभाषित करने के लिए डेटा एट्रिब्यूट के साथ ऑब्जेक्ट टैग लिखते हैं जिसे आप खोलना चाहते हैं। आपको अपनी एसवीजी छवि (पिक्सल में) की चौड़ाई और ऊंचाई को परिभाषित करने के लिए चौड़ाई और ऊंचाई विशेषताओं को भी शामिल करना चाहिए।

क्रॉस-ब्राउज़र संगतता के लिए, आपको प्रकार विशेषता शामिल करनी चाहिए, जिसे पढ़ना चाहिए:

type = "छवि / svg + xml"

और ब्राउज़र के लिए एक कोडबेस जो इसका समर्थन नहीं करता (इंटरनेट एक्सप्लोरर 8 और निचला)। आपका कोडबेस उन ब्राउज़रों के लिए एक एसवीजी प्लगइन इंगित करेगा जो एसवीजी का समर्थन नहीं करते हैं। सबसे सामान्य रूप से प्रयुक्त प्लगइन एडोब से http://www.adobe.com/svg/viewer/install/ पर है। हालांकि, यह प्लगइन अब एडोब द्वारा समर्थित नहीं है। एक और विकल्प Savarese सॉफ़्टवेयर रिसर्च से http://www.savarese.com/software/svgplugin/ पर एसएसआरसी एसवीजी प्लगइन है।

आपका ऑब्जेक्ट इस तरह दिखेगा:

<ऑब्जेक्ट डेटा = "rectangle.svg" चौड़ाई = "110" ऊंचाई = "60" प्रकार = "छवि / svg + xml" codebase = "http://www.savarese.com/software/svgplugin/">

एसवीजी के लिए ऑब्जेक्ट का उपयोग करने के लिए टिप्स

• सुनिश्चित करें कि चौड़ाई और ऊंचाई कम से कम उतनी ही बड़ी छवि है जितनी आप एम्बेड कर रहे हैं। अन्यथा, आपकी छवि को फिसल जा सकता है।
• यदि आप सही सामग्री प्रकार (प्रकार = "छवि / svg + xml") शामिल नहीं करते हैं तो आपका एसवीजी सही तरीके से प्रदर्शित नहीं हो सकता है, इसलिए मैं इसे छोड़ने की अनुशंसा नहीं करता हूं।
• आप ब्राउज़र के लिए ऑब्जेक्ट टैग के अंदर फ़ॉलबैक जानकारी शामिल कर सकते हैं जो एसवीजी फ़ाइलों को प्रदर्शित नहीं करेगा।
• आप अपने एसवीजी और सामग्री प्रकार के स्रोतों को पैरामीटर में भी सेट कर सकते हैं। यह आईई 6 और 7 में बेहतर काम कर सकता है:

क्लासिड = "सीएलएसआईडी: 1339 बी 54 सी -3453-11 डी 2-93 बी 9-000000000000" चौड़ाई = "110" ऊंचाई = "60" कोडबेस = "http://www.savarese.com/software/svgplugin/">

ध्यान दें कि इसे काम करने के लिए एक क्लासिड की आवश्यकता है।

ऑब्जेक्ट टैग उदाहरण में एक एसवीजी देखें।

एम्बेड टैग के साथ एसवीजी एम्बेड करें

एसवीजी समेत आपके पास एक अन्य विकल्प टैग का उपयोग करना है। आप ऑब्जेक्ट टैग के रूप में लगभग समान गुणों का उपयोग करते हैं, जिसमें चौड़ाई <, ऊंचाई, प्रकार और कोडबेस> शामिल हैं। केवल अंतर यह है कि डेटा के बजाय, आप स्रोत एसवीजी दस्तावेज़ यूआरएल को src विशेषता में डालते हैं।

आपका एम्बेड इस तरह दिखेगा:

src = "http://your-domain.here/z-circle.svg" चौड़ाई = "210" ऊंचाई = "210" प्रकार = "छवि / svg + xml" codebase = "http://www.adobe.com / svg / दर्शक / स्थापित करें "/>

एसवीजी के लिए एम्बेडिंग का उपयोग करने के लिए टिप्स

• एम्बेड टैग मान्य HTML4 नहीं है, लेकिन यह मान्य HTML5 है, इसलिए यदि आप इसे HTML4 पृष्ठ में उपयोग करते हैं, तो आपको याद रखना चाहिए कि आपका पृष्ठ मान्य नहीं होगा।
• सर्वोत्तम अनुकूलता के लिए src विशेषता में पूरी तरह से quoalified डोमेन नाम का उपयोग करें।
• कुछ रिपोर्ट भी हैं कि एडोब प्लगइन के साथ एम्बेड टैग का उपयोग मोज़िला संस्करण 1.0 से 1.4 को क्रैश कर देगा।

एक एम्बेड टैग उदाहरण में एक एसवीजी देखें।

एसवीजी शामिल करने के लिए एक आईफ्रेम का प्रयोग करें

Iframes आपके वेब पृष्ठों पर एक एसवीजी छवि शामिल करने का एक और आसान तरीका है। इसे केवल तीन विशेषताओं की आवश्यकता होती है: सामान्य रूप से चौड़ाई और ऊंचाई, और आपके एसवीजी फ़ाइल के स्थान पर इंगित करने वाला स्रोत।

आपका आईफ्रेम इस तरह दिखेगा: