html - हटम - हिंदी में हाइपरटेक्स्ट मार्कअप भाषा अर्थ




क्या मैं एसवीजी फाइलों के लिए<img>,<object>, या<embed> का उपयोग करता हूं? (6)

srcset प्रयोग करें

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

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

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

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

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

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

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

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


आईई 9 और ऊपर से आप सामान्य आईएमजी टैग में एसवीजी का उपयोग कर सकते हैं ..

https://caniuse.com/svg-img

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

मैं व्यक्तिगत रूप से <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;
}

कुछ संसाधन: css-tricks.com/using-svg


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

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

मैंने पाया है कि <object> टैग एकमात्र ऐसा है जो सभी ब्राउज़रों में काम करता है। सही ढंग से आकार बदलने के लिए मुझे चौड़ाई और ऊंचाई (एसवीजी के अंदर) को 100% में बदलना पड़ा।

आप एसवीजी के अंदर, किसी भी आकार में एसवीजी के अंदर ऑनक्लिक, ऑनमूसओवर इत्यादि जोड़ सकते हैं: onmouseover = "top.myfunction (evt);"

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

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

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

यह सब पिछले दो वर्षों में जारी किसी भी ब्राउज़र पर काम करता है

Ozake.com पर परिणाम (फ्रेंच में)। संपर्क साइट को छोड़कर पूरी साइट एसवीजी से बना है।

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


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

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

<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");
});




svg