SVG किंवा स्केलेबल व्हेक्टर ग्राफिक्स आपल्याला अधिक जटिल प्रतिमा काढू देतात आणि त्या वेब पृष्ठांवर सादर करतात. परंतु आपण फक्त एसव्हीजी टॅग्ज घेऊ शकत नाही आणि त्यांना आपल्या HTML मध्ये चापट मारू शकत नाही. ते दर्शविले जाणार नाहीत आणि आपले पृष्ठ अवैध होईल त्याऐवजी, तुम्हाला तीनपैकी एक पद्धत वापरावी लागेल.
एसव्हीजी एम्बेड करण्यासाठी ऑब्जेक्ट टॅग वापरा
एचटीएमएल टॅग आपल्या वेब पृष्ठामध्ये एसव्हीजी ग्राफिक एम्बेड करेल. आपण ऑब्जेक्ट टॅगला डेटा ऍट्रिब्यूटसह लिहू शकता जे आपण उघडण्यास इच्छुक असलेली SVG फाइल ठरवेल. आपण आपल्या SVG प्रतिमेची रूंदी आणि उंची (पिक्सल मध्ये) परिभाषित करण्यासाठी रूंदी आणि उंचीची विशेषता देखील समाविष्ट करावी.
क्रॉस-ब्राऊजर सहत्वता साठी, आपण प्रकार गुणधर्म समाविष्ट करावा, ज्याने वाचायला हवे:
प्रकार = "प्रतिमा / svg + xml"आणि त्यास समर्थन देत नसलेल्या ब्राउझरसाठी कोडबेस (Internet Explorer 8 आणि कमी). आपला कोडबेस SVG ला समर्थन देत नसलेल्या ब्राऊझरसाठी एसव्हीजी प्लगइनकडे सूचित करेल. सर्वात सामान्यतः वापरले जाणारे प्लगिन http://www.adobe.com/svg/ viewer/install/ येथे Adobe कडून आहे. तथापि, हे प्लगइन यापुढे Adobe द्वारे समर्थित नाही दुसरा पर्याय म्हणजे सॅवरेश सॉफ्टवेअर रिसर्चमधील http://www.savarese.com/software/svgplugin/ येथे एसएसआरसी एसव्हीजी प्लगइन आहे.
आपले ऑब्जेक्ट खालील प्रमाणे दिसेल:
<ऑब्जेक्ट डेटा = "आयतसंघ" = "110" उंची = "60" प्रकार = "प्रतिमा / एसटीजी + xml" कोडबेस = "http://www.savarese.com/software/svgplugin/">SVG साठी ऑब्जेक्ट वापरण्यासाठी टिप्स
- आपण एम्बेड करत असलेल्या प्रतिमेप्रमाणे रूंदी आणि उंची किमान एवढी मोठी आहे याची खात्री करा. अन्यथा, आपली प्रतिमा कापली जाऊ शकते.
- आपण योग्य सामग्री प्रकार (प्रकार = "image / svg + xml") समाविष्ट करत नसल्यास आपले एसव्हीजी अचूकपणे प्रदर्शित होऊ शकत नाही, म्हणून मी ते बाहेर सोडण्याची शिफारस करत नाही.
- आपण SVG फाईल्स प्रदर्शित करणार नाहीत अशा ब्राउझरसाठी ऑब्जेक्ट टॅगमध्ये फॉलबॅक माहिती समाविष्ट करू शकता.
- आपण आपल्या SVG आणि सामग्री प्रकारचे स्त्रोत पॅरामीटरमध्ये सेट देखील करू शकता. IE6 आणि 7 मध्ये हे चांगले कार्य करू शकते:
हे लक्षात घ्या की यासाठी वर्गामध्ये काम करणे आवश्यक आहे.
ऑब्जेक्ट टॅग उदाहरणामध्ये एसव्हीजी पहा.
एम्बेड टॅगसह एम्बेड SVG
एसव्हीजी समाविष्ट करण्यासाठी आपल्याकडे दुसरा पर्याय म्हणजे टॅग वापरणे. आपण रुंदी <, उंची, प्रकार आणि कोडबेस> यासह ऑब्जेक्ट टॅग जवळजवळ जवळजवळ समान विशेषता वापरता फरक एवढाच आहे की डेटाच्या ऐवजी, आपण एसआरओजी ऍड्रिब्यूटमध्ये एसव्हीजी कागदपत्र URL ठेवा.
आपले एम्बेड असे दिसेल:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" प्रकार = "प्रतिमा / svg + xml" codebase = "http://www.adobe.com / svg / दर्शक / स्थापित "/>SVG साठी एम्बेड वापरण्यासाठी टिप्स
- एम्बेड टॅग वैध HTML4 नाही, परंतु तो वैध HTML5 आहे, म्हणून आपण तो HTML4 पृष्ठामध्ये वापरत असल्यास आपण हे लक्षात ठेवू शकता की आपले पृष्ठ अधिकृत होणार नाही.
- सर्वोत्तम सुसंगतता साठी src विशेषता मध्ये संपूर्ण quoalified डोमेन नाव वापरा.
- काही अहवाल देखील आहेत जे Adobe प्लगइनसह एम्बेड टॅग वापरत आहे Mozilla versions 1.0 ते 1.4.
एम्बेड टॅग उदाहरणामध्ये एक SVG पहा.
एसव्हीजी समाविष्ट करण्यासाठी iframe वापरा
आपल्या वेब पृष्ठांवर एसव्हीजी प्रतिमा समाविष्ट करण्याचा इतर एक सुलभ मार्ग Iframes . यास फक्त तीन गुणांची आवश्यकता आहे: नेहमीप्रमाणे रुंदी आणि उंची, आणि आपल्या एसव्हीजी फाइलच्या स्थानावर निर्देशित करणारा src.
आपले iframe असे दिसेल: