image - किसी वेबपृष्ठ में.svg फ़ाइलों का उपयोग कैसे करें?




image-manipulation adobe-illustrator (5)

कैस्पर का दृष्टिकोण उचित है। हालांकि, मैं फॉलबैक को सीएसएस में ले जाउंगा, क्योंकि आप संभवतः एसवीजी फ़ाइल में कुछ शैलियों को लागू करना चाहते हैं ...

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"  class="logo"> </object>

सीएसएस

.no-svg .logo {
  width: 99px;
  height: 99px;
  background-image: url(/path-to/your-png-image.png);
}`

मैं जानना चाहता हूं कि एक वास्तव में एक .svg फ़ाइल का उपयोग कैसे कर सकता है वेब पेज में?


मैं "कोड-ज़ूप" के उत्तर से सहमत होना चाहता हूं। यद्यपि यह तकनीकी रूप से आपके प्रश्न का उत्तर नहीं देता है, यह एक समाधान भी हो सकता है: प्रासंगिक डेटा सीधे HTML में दर्ज करें। या तो सीधे एक svg तत्व के रूप में, या राफेल-जेएस का उपयोग करके।

डब्ल्यू 3 सी-स्कूलों से:

एसवीजी सभी फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर 9, Google क्रोम, ओपेरा, और सफारी में आपके द्वारा समर्थित है

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

</body>
</html>

(उद्धरण का अंत)

और बॉक्स के बाहर और भी सोचने के लिए, आप इसका उपयोग कैसे करना चाहते हैं, इस पर निर्भर करते हुए, आप अपने 1-रंग ग्राफिक्स को वेबफॉन्ट में भी डाल सकते हैं। (उदाहरण के लिए iconmoon.io देखें)


यदि आप ऐसा करना चाहते हैं तो एक एसवीजी छवि जैसे लोगो या स्थिर आरेख को रखना है, तो आपको केवल इंटरनेट एक्सप्लोरर (यानी संस्करण 8 और इससे पहले) के पुराने संस्करणों के लिए फ़ॉलबैक प्रदान करने के लिए सावधान रहना होगा।

मुझे मिली सबसे अच्छी और सरल विधि एक सामान्य आईएमजी टैग का उपयोग करके आपके फॉलबैक के लिए .png या .jpg का उपयोग करना है। फिर आप एसवीजी रखने के लिए डेटा विशेषता का उपयोग करके, ऑब्जेक्ट टैग में आईएमजी टैग को लपेटें।

<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

आईएमजी फ़ॉलबैक केवल लोड और उपयोग किया जाता है यदि ब्राउज़र एसवीजी को समझ में नहीं आता है।


http://www.w3schools.com/svg/svg_inhtml.asp

सबसे अच्छा उदाहरण:

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" /> 

IE सहित सभी ब्राउज़रों में काम करने वाली किसी चीज़ के लिए svgweb क्विकस्टार्ट और svgweb प्रोजेक्ट होमपेज देखें (फ्लैश प्लगइन की आवश्यकता है)।

मौजूदा svg फ़ाइल को शामिल करने के कई तरीके हैं:

  • <img src="your.svg"/>
  • <object data="your.svg"/>
  • <iframe src="your.svg"/>
  • <embed src="your.svg"/>
  • <div style="background:url(your.svg)">...</div>






adobe-illustrator