क्या मैं SVG फ़ाइलों के लिए <img>, <object>, या <embed> का उपयोग करता हूं?

Question

मैं का उपयोग करना चाहिए <img>, <object>या <embed>एक तरह से एक पेज में लोड एसवीजी फ़ाइलों के लिए लोड हो रहा है एक के समान jpg, gifया png?

यह सुनिश्चित करने के लिए प्रत्येक के लिए कोड क्या है और साथ ही संभव है? (मैं अपने शोध में एसवीजी रेंडरर्स को कमबैक या इंगित करने के लिए संदर्भ को देख रहा हूं और कला संदर्भ की अच्छी स्थिति नहीं देख रहा हूं)।

मान लें कि मैं आधुनिक एसवीजी के साथ एसवीजी समर्थन के लिए जाँच कर रहा हूं और <img>गैर-एसवीजी-सक्षम ब्राउज़रों के लिए (शायद एक सादे टैग के साथ प्रतिस्थापन ) कर रहा हूं ।

Comments

सिर्फ github.com/jonathantneal/svg4everybody

— मकाडो

सैद्धांतिक रूप से, आपके पास वह भी हो सकता <svg>है जिससे आप अन्य एसवीजी का संदर्भ लेना चाहते हैं। यह प्राप्त किया जा सकता है, उदाहरण के लिए <image>।

— phk

Answer 1

मैं SVG प्राइमर (W3C द्वारा प्रकाशित) की सिफारिश कर सकता हूँ, जो इस विषय को कवर करता है: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

यदि आप उपयोग करते हैं <object>तो आपको मुफ्त में रैस्टर कमबैक मिलेगा *:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) ठीक है, बिल्कुल मुफ्त नहीं, क्योंकि कुछ ब्राउज़र दोनों संसाधनों को डाउनलोड करते हैं, उस के चारों ओर कैसे प्राप्त करने के लिए नीचे लैरी का सुझाव देखें।

2014 अपडेट:

• यदि आप एक गैर-संवादात्मक svg चाहते हैं, तो <img>स्क्रिप्ट की कमियों के साथ संस्करण png संस्करण (पुराने IE और Android <3 के लिए) का उपयोग करें। ऐसा करने का एक साफ और सरल तरीका:

  <img src="your.svg" onerror="this.src='your.png'">।

  यह एक GIF छवि की तरह व्यवहार करेगा, और यदि आपका ब्राउज़र घोषणात्मक एनिमेशन (SMIL) का समर्थन करता है, तो वे खेलेंगे।

• यदि आप एक इंटरैक्टिव svg चाहते हैं, तो <iframe>या तो का उपयोग करें <object>।

• यदि आपको पुराने ब्राउज़र को एक svg प्लगइन का उपयोग करने की क्षमता प्रदान करने की आवश्यकता है, तो उपयोग करें <embed>।

• Css background-imageऔर इसी तरह के गुणों में svg के लिए , आधुनिकता एक प्रकार की फ़ॉलबैक छवियों पर स्विच करने के लिए एक विकल्प है, एक और स्वचालित रूप से करने के लिए कई पृष्ठभूमि पर निर्भर करता है:

  div {
      background-image: url(fallback.png);
      background-image: url(your.svg), none;
  }

  नोट : एकाधिक पृष्ठभूमि रणनीति Android 2.3 पर काम नहीं करती है क्योंकि यह कई पृष्ठभूमि का समर्थन करती है लेकिन svg का नहीं।

एक अतिरिक्त अच्छा पढ़ा यह ब्लॉग है svg पर कमियां।

Comments

आकार सेट करने का सही तरीका क्या है? क्या मैं ऊंचाई और चौड़ाई को शामिल करता हूं, या क्या मैं CSS का उपयोग करता हूं?

— आर्टलंग

Css का उपयोग करना ठीक है, या एम्बेडिंग तत्व पर आकार सेट करना (अर्थात: iframe, एम्बेड, ऑब्जेक्ट, img) में से कोई भी - बाद वाला यह करता है कि स्टाइलशीट के आकार को परिभाषित करने से पहले फ्लैश-ऑफ-अनस्टाइल-कंटेंट से बचा जा सकता है। भर गया। यह भी सुनिश्चित करें कि svg में व्यूबॉक्स विशेषता है, और svg रूट एलिमेंट से चौड़ाई / ऊंचाई की विशेषताओं को हटा दें। मेरे अनुभव में आपको सबसे अच्छा क्रॉसबोवर व्यवहार मिलेगा।

— एरिक डाहलस्ट्रम

यह विधि हमेशा रास्टर फ़ाइल डाउनलोड करेगी। यह उत्तर सुनिश्चित करता है कि पतन केवल विरासत IE ब्राउज़रों पर अनुरोध किया गया है।

— लैरी

ध्यान दें कि उपरोक्त Adobe SVG प्लग-इन के साथ काम नहीं करता है। लेकिन, यदि आप टैग के <param name="src" value="your.svg" />अंदर जोड़ते हैं, तो आप इसे काम कर सकते हैं (आधुनिक ब्राउज़र + एएसवी + एमएसआईई) <object>। मैंने यह जानने में बहुत समय बिताया है कि यह सब कैसे करना है, और मुझे लगता है कि मुझे आखिरकार यह मिल गया है।

— क्रिस्टोफर शुल्त्स

मुझे लगता है कि तेजी से लोग प्राचीन ब्राउज़रों का समर्थन करना बंद कर देते हैं, हमारे पास एक ऐसा समाज होगा जो अपने ब्राउज़र को अद्यतित रखता है, जो 2012 से एक ब्राउज़र के साथ स्वचालित रूप से चला जाता है। केवल बहाना एक आधुनिक ब्राउज़र तक मुफ्त पहुंच नहीं होगा, लेकिन फ़ायरफ़ॉक्स उदाहरण के लिए अभी भी Windows XP का समर्थन करता है (शायद 52 संस्करण के लिए)। वहाँ हमेशा एक आधुनिक और मुफ्त विकल्प है।

— नियोनिट

Answer 2

IE9 और ऊपर से आप एक साधारण IMG टैग में SVG का उपयोग कर सकते हैं।

https://caniuse.com/svg-img

<img src="/static/image.svg">

Comments

यह काम नहीं करता है यदि एसवीजी को लोड करने के लिए अन्य संसाधनों की आवश्यकता होती है। (फोंट, चित्र, ...)

— दिहिप

एक लोगो या आइकन के लिए, मैं अभी भी शब्दार्थिक कारणों के लिए IMG टैग का उपयोग करने की सलाह दूंगा और सुनिश्चित करूंगा कि SVG सिर्फ एक वेक्टर चित्रण है।

— क्रिश्चियन लैंडग्रेन

अब हर जगह स्वीकार किया जाता है। @ कार्टलंग, आप इस पर अपना उत्तर बदलना चाहते हैं।

— स्टीवेयड्रोज़

<img/>टैग का उपयोग करने वाला कोई भी व्यक्ति एसवीजी फ्रोजन आइडेंटिफ़ायर , उदाहरण के लिए " <img src="myimage.svg#svgView(preserveAspectRatio(none))" />" के बारे में जानना चाहता है , जो आपको पहलू अनुपात को नियंत्रित करने देता है viewBox, आदि इनलाइन एसवीजी परिभाषाओं के साथ। स्केलिंग पर आगे पढ़ने - css-tricks.com/scale-svg

— brichins

Answer 3

<object>और <embed>एक दिलचस्प संपत्ति है: वे बाहरी दस्तावेज़ से एसवीजी दस्तावेज़ का संदर्भ प्राप्त करना संभव बनाते हैं (समान मूल नीति को ध्यान में रखते हुए)। संदर्भ का उपयोग एसवीजी को चेतन करने के लिए किया जा सकता है, इसके स्टाइलशीट को बदल सकते हैं, आदि।

दिया हुआ

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

फिर आप जैसी चीजें कर सकते हैं

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});

Comments

मुझे नहीं लगता कि आपको <ऑब्जेक्ट> तत्व से "लोड" इवेंट मिलेगा। समर्थित नहीं।

— स्टीव ओ'कॉनर

@ स्टीवो'कॉनर मैं नहीं जानता, शायद यह अच्छी तरह से प्रलेखित नहीं है, लेकिन यह फ़ायरफ़ॉक्स, IE11 और क्रोम में निश्चित रूप से काम करता है। कम से कम बाहरी एसवीजी फाइलों के साथ: मैं इसे डेटा यूआरआई के साथ काम नहीं कर सका।

— WGH

बहुत अच्छा काम करता है! दिलचस्प बात यह है कि 'आईडी' फ़ील्ड को जोड़ने की आवश्यकता तब लगती है जब आपके पास दो एसवीजी फाइलें हों, अन्यथा केवल 1 ही मेरे ओपेरा ब्राउज़र में दिखाई देगा?

— ब्रम्ह

आपको इनलाइन और रेफ़रेंस दोनों का सबसे अच्छा तरीका मिलता है!

— ब्रैंडिटो

यह जानना अच्छा है कि एसवीजी के अंदर हाइपरलिंक तब तक काम नहीं करेगा जब तक कि एसवीजी इनलाइन न हो।

— मेंटलिस्ट

Answer 4

सबसे अच्छा विकल्प विभिन्न उपकरणों पर SVG Images का उपयोग करना है :)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

Comments

दिलचस्प। लेकिन onerrorअगर आप svg प्रस्तुत नहीं करता है, तो आप आग का आश्वासन दिया है ? आपने कौन से ब्राउज़र का परीक्षण किया है?

— आर्टलंग

हां, मैं इसे मोबाइल एंड्रॉइड ओएस, डिफ़ॉल्ट ब्राउज़र पर परीक्षण करता हूं :)

— रॉबर्ट रॉबर्ट सोल

Answer 5

उपयोग srcset

अधिकांश वर्तमान ब्राउज़र आज srcsetविशेषता का समर्थन करते हैं , जो विभिन्न उपयोगकर्ताओं के लिए अलग-अलग छवियों को निर्दिष्ट करने की अनुमति देता है। उदाहरण के लिए, आप इसे 1x और 2x पिक्सेल घनत्व के लिए उपयोग कर सकते हैं, और ब्राउज़र सही फ़ाइल का चयन करेगा।

इस स्थिति में, यदि आप एसवीजी को निर्दिष्ट करते हैं srcsetऔर ब्राउज़र इसका समर्थन नहीं करता है, तो यह कमबैक करेगा src।

<img src="logo.png" srcset="logo.svg" alt="My logo">

इस विधि के अन्य समाधानों पर कई लाभ हैं:

1. यह किसी भी अजीब हैक या स्क्रिप्ट पर निर्भर नहीं है
2. यह आसान है
3. आप अभी भी Alt पाठ शामिल कर सकते हैं
4. समर्थन करने वाले ब्राउज़रों srcsetको पता होना चाहिए कि इसे कैसे संभालना है ताकि यह केवल उस फ़ाइल को डाउनलोड करे जिसे इसकी आवश्यकता है।

Comments

क्यों परेशान है कि वहाँ एक> 99% संभावना है कि कोई भी ब्राउज़र इन दिनों एसवीजी का समर्थन करेगा?

— राबर्ट लोंगसन

EVERYONE सुनिश्चित करने का एक हिस्सा पृष्ठ को सही ढंग से देख सकता है, Google आपको अधिक पसंद करेगा!

— हूट्स

इससे बेहतर लगता है, यह देखते हुए कि वर्तमान समय में आप 10% उपयोगकर्ताओं के लिए कमबैक छवि को आगे बढ़ा रहे हैं।

— वोल्कर ई।

@VolkerE। 10%? caniuse एसवीजी समर्थन की कमी को लगभग 2% दिखाता है । मैं अभी भी जवाब में srcset का उपयोग करता हूं, हालांकि 2% का समर्थन करने के लिए। भविष्य में, मुझे आशा है कि ब्राउज़र srcset जैसी जानकारी लेने और प्रदर्शन और आकार जैसे कारकों के आधार पर उपयुक्त छवि चुनने में सक्षम हैं, न कि केवल डिवाइस आकार या फ़ाइल स्वरूप समर्थन।

— स्क्रिप्बलमैकर

केवल इस समाधान के साथ समस्या यह है कि जब ब्राउज़र एसवीजी का समर्थन करते हैं, लेकिन srcset नहीं। IE11 के रूप में, जो PNG में वापस

— चूकता है,

Answer 6

यदि आपको अपने एसवीजी को सीएसएस के साथ पूरी तरह से स्टाइल करने की आवश्यकता है, तो उन्हें डोम में इनलाइन होना चाहिए। यह एसवीजी इंजेक्शन के माध्यम से प्राप्त किया जा सकता है, जो <img>पेज लोड होने के बाद एसवीजी फ़ाइल की सामग्री के साथ HTML तत्व (आमतौर पर एक तत्व) को बदलने के लिए जावास्क्रिप्ट का उपयोग करता है ।

यहाँ SVGInject का उपयोग करके एक न्यूनतम उदाहरण दिया गया है :

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

छवि लोड होने के बाद, onload="SVGInject(this)इंजेक्शन को ट्रिगर करेगा और <img>तत्व को srcविशेषता में प्रदान की गई फ़ाइल की सामग्री से बदल दिया जाएगा । यह उन सभी ब्राउज़रों के साथ काम करता है जो एसवीजी का समर्थन करते हैं।

अस्वीकरण: मैं SVGInject का सह-लेखक हूं

Answer 7

मैं व्यक्तिगत रूप से एक <svg>टैग का उपयोग करूंगा क्योंकि यदि आप ऐसा करते हैं तो इस पर आपका पूर्ण नियंत्रण है । यदि आप इसका उपयोग करते हैं तो <img>आपको सीवीजी आदि के साथ एसवीजी के दोषों को नियंत्रित करने की आवश्यकता नहीं है।

एक और बात ब्राउज़र समर्थन है ।

बस अपनी svgफ़ाइल खोलें और सीधे टेम्प्लेट में पेस्ट करें।

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
  <g id="layer101">
    <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
    <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
    <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
    <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
    </g>
  </svg>

तो अपने सीएसएस में आप बस उदाहरण के लिए कर सकते हैं:

svg {
  fill: red;
}

कुछ संसाधन: एसवीजी टिप्स

Answer 8

यदि आप <img> टैग का उपयोग करते हैं , तो वेबकिट आधारित ब्राउज़र एम्बेडेड बिटमैप चित्र प्रदर्शित नहीं करेंगे ।

किसी भी प्रकार के उन्नत एसवीजी उपयोग के लिए, जिसमें एसवीजी इनलाइन सबसे अधिक लचीलापन प्रदान करता है।

इंटरनेट एक्सप्लोरर और एज एसवीजी को सही ढंग से आकार देगा , लेकिन आपको ऊंचाई और चौड़ाई दोनों को निर्दिष्ट करना होगा।

आप onclick, onmouseover आदि जोड़ सकते हैं । SVG में किसी भी शेप में, ongick : onmouseover = "top.myfunction (evt);"

आप वेब फोंट का उपयोग भी कर सकते हैं अपने नियमित स्टाइल शीट में एसवीजी में ।

नोट: यदि आप एसवीजी के इलस्ट्रेटर से निर्यात कर रहे हैं, तो वेब फ़ॉन्ट नाम गलत होंगे। आप इसे अपने CSS में सही कर सकते हैं और SVG में गड़बड़ करने से बच सकते हैं। उदाहरण के लिए, इलस्ट्रेटर एरियल को गलत नाम देता है, और आप इसे इस तरह से ठीक कर सकते हैं:

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

यह सब 2013 से जारी किसी भी ब्राउज़र पर काम करता है ।

एक उदाहरण के लिए, ozake.com देखें । संपूर्ण साइट एसवीजी से बनी है, केवल संपर्क फ़ॉर्म को छोड़कर।

चेतावनी: सफारी में वेब फोंट अभेद्य रूप से आकार दिए जाते हैं - और यदि आपके पास सादे पाठ से बोल्ड या इटैलिक में बहुत सारे बदलाव हैं, तो संक्रमण बिंदुओं पर थोड़ी मात्रा में अतिरिक्त या लापता स्थान हो सकता है। अधिक जानकारी के लिए इस सवाल पर मेरा जवाब देखें ।

Comments

धन्यवाद। बस 3 घंटे बिताए मेरे बालों को खींच कर यह पता लगाने की कोशिश की कि मेरे imgटैग में रेखापुंज चित्र क्यों नहीं दिख रहे थे ... क्या आप जानते हैं कि यह आधिकारिक तौर पर कहीं भी प्रलेखित है?

— रिब्रेड

@ और स्विफ्ट, आपको dev.ozake.com पर वास्तव में अच्छे दृश्य परिणाम मिलते हैं , लेकिन गंभीर पहुंच के मुद्दे हैं: खोज इंजन में साइट को अनुक्रमित करने में शायद मुश्किल समय होगा (मुझे यकीन नहीं है कि वे एसवीजी घटनाओं के भीतर छिपे लिंक उठा लेंगे) ; साइट कीबोर्ड द्वारा नेविगेट करने योग्य नहीं है; ऐसा लगता है कि स्क्रीन पाठक इस पर

— झूमेंगे

Answer 9

मेरे दो सेंट: 2019 तक, उपयोग में ब्राउज़रों का 93% (और उनमें से हर एक के अंतिम दो संस्करण का 100%) <img>तत्वों में एसवीजी को संभाल सकता है :

स्रोत: क्या मैं उपयोग कर सकता हूं

इसलिए हम कह सकते हैं कि <object>अब और उपयोग करने का कोई कारण नहीं है।

हालाँकि इसके नियम अभी भी हैं :

• निरीक्षण करते समय (जैसे कि क्रोम देव टूल्स के साथ) आपको पूरे एसवीजी मार्कअप के साथ प्रस्तुत किया जाता है, यदि आप इसके साथ थोड़ा छेड़छाड़ करना चाहते हैं और लाइव परिवर्तन देखते हैं।

• यदि आपका ब्राउज़र SVGs (प्रतीक्षा करें, लेकिन उनमें से हर एक का समर्थन नहीं करता है) का समर्थन नहीं करता है, तो यह एक बहुत मजबूत कमबैक कार्यान्वयन प्रदान करता है! यह XHTML2 युक्ति की एक प्रमुख विशेषता थी, जो betamax या HD-DVD की तरह है

लेकिन वहाँ भी विपक्ष :

• वहाँ एक एएमपी समकक्ष नहीं है <object>(यह पूरी तरह से सुरक्षित है <amp-img> और इसका उपयोग इनलाइन के साथ भी करना है ।
• आपको किसी भी प्रकार के एम्बेडिंग के साथ सर्विसवर्क लाने वाले हैंडलर को नहीं मिलाना चाहिए , ताकि एक <object>टैग रखने से आपका PWA वास्तव में ऑफ़लाइन सक्षम हो सके।

Answer 10

शुद्ध सीएसएस के साथ और डबल इमेज डाउनलोडिंग के बिना एक समाधान मिला। यह सुंदर नहीं है जैसा मैं चाहता हूं, लेकिन यह काम करता है।

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

विचार विशेष एसवीजी को फालबैक शैली के साथ सम्मिलित करना है।

अधिक विवरण और परीक्षण प्रक्रिया आप मेरे ब्लॉग में पा सकते हैं ।

Answer 11

यह jQuery फ़ंक्शन svg छवियों में सभी त्रुटियों को कैप्चर करता है और फ़ाइल एक्सटेंशन को वैकल्पिक एक्सटेंशन के साथ बदल देता है

कृपया छवि लोड करने की छवि svg देखने के लिए कंसोल खोलें

(function($){
  $('img').on('error', function(){
    var image = $(this).attr('src');
    if ( /(\.svg)$/i.test( image )) {
      $(this).attr('src', image.replace('.svg', '.png'));
    }
  })  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://jsfiddle.net/img/logo.svg">

Answer 12

मैं के संयोजन का उपयोग करने की सलाह देता हूं

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

Comments

क्या आप इस बारे में विस्तार से बता सकते हैं कि आप इन सेटिंग्स का उपयोग क्यों करेंगे और यह किसी भी अन्य उत्तरों से अलग क्यों है?

— क्वांटूर

Answer 13

आप परोक्ष रूप से उपयोग करके एक एसवीजी सम्मिलित कर सकते हैं <img> HTML टैग और यह StackOverflow पर संभव है, जो नीचे वर्णित है:

मेरे पास अपने पीसी पर एसवीजी फ़ाइल है

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

मैंने इस छवि को https://svgur.com पर अपलोड किया है

अपलोड समाप्त होने के बाद, मैंने निम्नलिखित URL प्राप्त किया है:

https://svgshare.com/i/H7d.svg

मैंने तब HTML टैग के बाद MANUALLY (IMAGE आइकन का उपयोग किए बिना) जोड़ा है

<img src="https://svgshare.com/i/Kyp.svg"/>

और परिणाम नीचे है

कुछ संदेह के साथ उपयोगकर्ता के लिए, यह देखना संभव है कि मैंने एसकेजी छवि डालने वाले स्टैकऑवरफ़्लो पर उत्तर के संपादन में क्या किया है

REMARK-1: SVG फ़ाइल में <?xml?>तत्व होना चाहिए । शुरुआत में, मैंने बस एक एसवीजी फ़ाइल बनाई है जो सीधे <svg>टैग से शुरू होती है और कुछ भी काम नहीं करता है!

REMARK-2: शुरू में, मैंने IMAGEआइकन का उपयोग करके एक छवि सम्मिलित करने का प्रयास किया है Edit Toolbar। मैं अपनी SVG फ़ाइल का URL पेस्ट करता हूं लेकिन StackOverflow इस विधि को स्वीकार नहीं करता है। <img>टैग मैन्युअल रूप से जोड़ा जाना चाहिए।

मुझे उम्मीद है कि यह उत्तर अन्य उपयोगकर्ताओं की मदद कर सकता है।