तपाईंको वेबपेजमा SVG ग्राफिक्स कसरी राख्नुहुन्छ?

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

SVG एम्बेड गर्न वस्तु ट्याग प्रयोग गर्नुहोस्

एचटीएमएल ट्याग तपाईंको वेब पेजमा SVG ग्राफिक इम्बेड गर्नेछ। तपाईंले SVG फाइल खोल्न चाहानु भएको डाटा विशेषतासँग वस्तु ट्याग लेख्नुहोस्। तपाईंले एसभीजी छवि (पिक्सेलमा) मा चौडाइ र उचाइ परिभाषित गर्न चौडाई र उचाइ विशेषताहरू समावेश गर्नुपर्छ।

क्रस-ब्राउजर अनुकूलताको लागि, तपाईंले टाइप गुण समावेश गर्नुपर्छ, जुन पढ्न सकिन्छ:

टाइप = "छवि / svg + xml" टाइप गर्नुहोस्

र ब्राउजरहरूको लागि कोडबेस जसले समर्थन गर्दैन (इन्टरनेट एक्सप्लोरर 8 र कम)। तपाईंको कोडबेसले ब्राउजरहरूको लागि SVG प्लगइनलाई संकेत गर्दछ जुन SVG समर्थन गर्दैन। सबै भन्दा साधारण प्रयोग गरिएको प्लगइन Adobe बाट http://www.adobe.com/svg/viewer/install/ छ। यद्यपि, यो प्लगइन अब Adobe द्वारा समर्थित छैन। अर्को विकल्प http://www.savarese.com/software/svgplugin/ मा Savarese Software Research बाट एसएससीसीजीजी प्लगइन हो।

तपाईंको वस्तु यो जस्तो देखिन्छ:

SVG को लागि वस्तु प्रयोग गर्नका लागि सुझाव

  • निश्चित गर्नुहोस् कि चौडाइ र उचाइ कम्तिमा ठूलो छ जुन छवि तपाई इम्बेडिंग गर्दै हुनुहुन्छ। अन्यथा, तपाईंको छवि क्लिप गरिएको हुन सक्छ।
  • यदि तपाईले सही सामग्री प्रकार (प्रकार = "छवि / svg + xml") समावेश गर्नुहुन्न भने तपाईंको SVG सही रूपमा प्रदर्शित नहुन सक्छ, त्यसैले म यसलाई छोड्न सिफारिस गर्दैन।
  • तपाइँ ब्राउजरहरूको लागि वस्तु ट्याग भित्र पछाडि जानकारी समावेश गर्न सक्नुहुन्छ जुन SVG फाइलहरू प्रदर्शन गर्दैन।
  • तपाईं आफ्नो SVG को स्रोत र मापदण्डमा सामाग्री प्रकार पनि सेट गर्न सक्नुहुन्छ। यसले IE 6 र 7 मा राम्रो काम गर्न सक्छ:
वर्गीकृत = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" चौडाई = "110" ऊंचाई = "60" कोडबेस = "http://www.savarese.com/software/svgplugin/">

ध्यान दिनुहोस् कि यसले यसलाई काम गर्न एक वर्गीकरण चाहिन्छ।

एक वस्तु ट्याग उदाहरणमा SVG हेर्नुहोस्।

इम्बे ट्यागको साथ SVG एम्बेड गर्नुहोस्

SVG समावेश गर्ने अर्को विकल्प ट्याग प्रयोग गर्न हो। तपाईँले चौडाई <, ऊँचाई, प्रकार, र कोडबेस> सहित वस्तु ट्यागको समान लगभग विशेषताहरू प्रयोग गर्नुहुन्छ। मात्र फरक छ कि डेटाको सट्टा, तपाई आफ्नो एसटीजी कागजात यूआरएल स्रोत गुणमा राख्नुहुन्छ।

तपाईंको इम्बेडले यो जस्तो देखिन्छ:

src = "http://your-domain.here/z-circle.svg" चौडाई = "210" height = "210" प्रकार = "छवि / एसजीभी + xml" कोडबेस = "http://www.adobe.com / svg / viewer / install "/>

SVG को लागि इम्बेड प्रयोग गरी सुझावहरू

  • इम्बेड ट्याग वैध HTML4 होइन, तर यो वैध एचटीएमएल 5 हो, त्यसैले यदि तपाइँ यसलाई HTML4 पृष्ठमा प्रयोग गर्नुहुन्छ भने, तपाइँलाई सम्झना छ कि तपाईंको पृष्ठलाई मान्य छैन।
  • सर्वोत्तम अनुकूलताका लागि स्रोत विशेषता पूर्ण रूपमा क्वोअलाइटेड डोमेन नाम प्रयोग गर्नुहोस्।
  • त्यहाँ केहि रिपोर्टहरू छन् जुन एडोब प्लगइनसँग इम्बेड ट्याग प्रयोग गरी मोजिला संस्करणहरू 1.0 देखि 1.4 लाई क्र्यास गर्नेछ।

इम्बेड ट्याग उदाहरणमा SVG हेर्नुहोस्।

एसआईजीजी समावेश गर्न आईफ्रेम प्रयोग गर्नुहोस्

Iframes तपाईंको वेब पृष्ठमा SVG छवि समावेश गर्न अर्को सजिलो बाटो हो। यो केवल तीन गुणहरू चाहिन्छ: सामान्य रूपमा चौडाई र उचाइ, र src तपाईंको एसजीजी फाइलको स्थानमा संकेत गर्दै।

तपाईंको आइडियाम यस्तो देखिन्छ: