আমি কি এসভিজি ফাইলগুলির জন্য <img>, <object>, বা <এমবেড> ব্যবহার করি?

Question

আমি ব্যবহার করা উচিত <img>, <object>অথবা <embed>একটি উপায় একটি পৃষ্ঠায় লোড করা SVG ফাইল লোড একটি অনুরূপ jpg, gifবা png?

এটি সম্ভাব্য পাশাপাশি কাজ করে তা নিশ্চিত করার জন্য প্রত্যেকের জন্য কোড কী? (আমি মাইমটাইপ অন্তর্ভুক্ত করার জন্য উল্লেখগুলি দেখতে পাচ্ছি বা আমার গবেষণায় ফালব্যাক এসভিজি রেন্ডারগুলিকে নির্দেশ করছি এবং শিল্পের উল্লেখের ভাল অবস্থা দেখছি না)।

অনুমান করছি যে সঙ্গে করা SVG সমর্থনের জন্য খুঁজে দেখছি Modernizr এবং ফিরে পতনশীল (সম্ভবত একটি প্লেইন সঙ্গে একটি প্রতিস্থাপন করছেন <img>অ করা SVG সক্ষম ব্রাউজারের জন্য ট্যাগ)।

Comments

শুধু github.com/jonathantneal/svg4everybody

— মাচাদো

তাত্ত্বিকভাবে, আপনার এমন একটিও থাকতে পারে <svg>যা থেকে আপনি অন্যান্য এসভিজিকে উল্লেখ করতে চান। এটি অর্জন করা যায়, যেমন ব্যবহার করে<image> ।

— পিএইচকে

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 আপডেট:

• আপনি যদি একটি অ-ইন্টারেক্টিভ এসভিজি চান, পিএনজি <img>সংস্করণে (পুরানো আইআই এবং অ্যান্ড্রয়েড <3 এর জন্য) স্ক্রিপ্ট ফালব্যাকগুলি ব্যবহার করুন । এটি করার একটি পরিষ্কার এবং সহজ উপায়:

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

  এটি অনেকটা জিআইএফ চিত্রের মতো আচরণ করবে এবং যদি আপনার ব্রাউজারটি ঘোষিত অ্যানিমেশনগুলি (এসএমআইএল) সমর্থন করে তবে সেগুলি প্লে হবে।

• যদি আপনি একটি ইন্টারেক্টিভ এসভিজি চান, তবে হয় <iframe>বা ব্যবহার করুন<object> ।

• আপনার যদি পুরানো ব্রাউজারগুলির একটি এসভিজি প্লাগইন ব্যবহারের ক্ষমতা সরবরাহ করতে হয় তবে ব্যবহার করুন <embed> ।

• সিএসএস background-imageএবং অনুরূপ বৈশিষ্ট্যগুলিতে এসভিজি-র জন্য আধুনিকতা ফ্যালব্যাক চিত্রগুলিতে স্যুইচ করার জন্য একটি পছন্দ, অন্যটি স্বয়ংক্রিয়ভাবে এটি করার জন্য একাধিক ব্যাকগ্রাউন্ডের উপর নির্ভর করে:

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

  দ্রষ্টব্য : একাধিক ব্যাকগ্রাউন্ড কৌশল অ্যান্ড্রয়েড 2.3 এ কাজ করে না কারণ এটি একাধিক ব্যাকগ্রাউন্ড সমর্থন করে তবে এসভিজি নয়।

একটি অতিরিক্ত ভাল পঠন হ'ল এসভিজি ফলব্যাকগুলিতে এই ব্লগপোস্ট ।

Comments

একটি আকার সেট করার সঠিক উপায় কি? আমি কি উচ্চতা এবং প্রস্থের এ্যাট্রিবিটগুলি অন্তর্ভুক্ত করব, বা আমি সিএসএস ব্যবহার করব?

— আর্টল্যাং

CSS ব্যবহার করা ভাল, বা এম্বেডিং উপাদানের উপর আকার নির্ধারণ করা (এটি হল iframe, এম্বেড, অবজেক্ট, img) - পরে যেটি কাজ করে তা স্টাইলশিটের আগে ফ্ল্যাশ-অফ-স্টাইল-কন্টেন্ট এড়াতে পারে যা আকার নির্ধারণ করে বোঝা হয় এছাড়াও নিশ্চিত করুন যে এসভিগিতে একটি ভিউবক্স বৈশিষ্ট্য রয়েছে এবং এসভিজি মূল উপাদান থেকে প্রস্থ / উচ্চতার বৈশিষ্ট্যগুলি সরিয়ে ফেলুন। এটি আপনাকে আমার অভিজ্ঞতার সেরা ক্রসব্রোজার আচরণ দেবে।

— এরিক ডাহলস্ট্রোম

এই পদ্ধতিটি সর্বদা রাস্টার ফাইলটি ডাউনলোড করবে। এই উত্তরটি নিশ্চিত করে যে ফ্যালব্যাকটি কেবলমাত্র লিগ্যাসি আইই ব্রাউজারগুলিতেই অনুরোধ করা হয়েছে।

— ল্যারি

নোট করুন যে উপরেরগুলি অ্যাডোব এসভিজি প্লাগ-ইন নিয়ে কাজ করে না। তবে আপনি যদি ট্যাগের <param name="src" value="your.svg" />অভ্যন্তরে যোগ করেন তবে আপনি এটি সমস্ত কিছুতে (আধুনিক ব্রাউজারগুলি + এএসভি + এমএসআইই) কাজ করতে পারবেন <object>। এই সমস্ত কীভাবে করা যায় তা বোঝার চেষ্টা করার জন্য আমি অনেক দীর্ঘ সময় ব্যয় করেছি এবং আমি মনে করি অবশেষে এটি পেয়েছি।

— ক্রিস্টোফার শুল্টজ

আমি মনে করি দ্রুততর লোকেরা দ্রুত প্রাচীন ব্রাউজারগুলিকে সমর্থন করা বন্ধ করে দেয় আমাদের কাছে এমন একটি সমাজ থাকবে যা তাদের ব্রাউজারগুলিকে আপ টু ডেট রাখে, যা এমনকি ২০১২ সাল থেকে একটি ব্রাউজারের সাথে স্বয়ংক্রিয়ভাবে চলে যায় The একমাত্র অজুহাত একটি আধুনিক ব্রাউজারে অবাধ অ্যাক্সেস না থাকলেও ফায়ারফক্স উদাহরণস্বরূপ উইন্ডোজ এক্সপি এখনও সমর্থন করে (সম্ভবত সংস্করণ 52)। সবসময় একটি আধুনিক এবং নিখরচায় বিকল্প রয়েছে।

— নিওনিত

Answer 2

আইই 9 এবং তার উপরে আপনি একটি সাধারণ আইএমজি ট্যাগে এসভিজি ব্যবহার করতে পারেন ..

https://caniuse.com/svg-img

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

Comments

এসভিজির অন্যান্য সংস্থানগুলি লোড হওয়ার প্রয়োজন হলে এটি কাজ করে না। (হরফ, ইমেজ, ...)

— থিপ্পি

লোগো বা আইকনটির জন্য আমি এখনও শব্দার্থবিরোধী কারণে একটি আইএমজি ট্যাগ ব্যবহার করার পরামর্শ দেব এবং এসভিজি কেবলমাত্র একটি ভেক্টর চিত্রণ হিসাবে নিশ্চিত করব।

— খ্রিস্টান ল্যান্ডগ্রেন

এখন সর্বত্র গৃহীত। @ আর্টলুং, আপনি এই উত্তরটির উত্তর পরিবর্তন করতে পারেন।

— স্টিটিডরোজ

<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

আমি মনে করি না আপনি <বিজেট> উপাদান থেকে কোনও "লোড" ইভেন্ট পাবেন। সমর্থিত নয়.

— স্টিভ ও'কনোর

@ স্টিভ'কনর আমি জানি না, সম্ভবত এটি ভাল নথিবদ্ধ নয়, তবে এটি অবশ্যই ফায়ারফক্স, আইই ১১ এবং ক্রোমে কাজ করে। কমপক্ষে বাহ্যিক এসভিজি ফাইলগুলির সাথে: আমি এটি ডেটা ইউআরআই দিয়ে কাজ করতে পারি না।

— ডাব্লুজিএইচ

দুর্দান্ত কাজ! মজার বিষয় হল, যখন আপনার কাছে দুটি এসভিজি ফাইল থাকবে তখন 'আইডি' ফিল্ডটি যুক্ত করা দরকার বলে মনে হচ্ছে, অন্যথায় আমার অপেরা ব্রাউজারে কেবল 1 জন দেখানো হবে?

— ব্রাম

আপনি উভয়ই ইনলাইন সেরা এবং এই পদ্ধতির সাথে রেফারেন্স পান!

— ব্র্যান্ডিতো

এটি সচেতন হওয়া ভাল যে এসভিজির ইনলাইন না হওয়া পর্যন্ত কোনও এসভিজির অভ্যন্তরে হাইপারলিংকগুলি কাজ করবে না।

— মানসিকবিদ

Answer 4

সর্বোত্তম বিকল্পটি হ'ল বিভিন্ন ডিভাইসে এসভিজি চিত্র ব্যবহার করা :)

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

Comments

মজাদার. তবে এস onerrorজি জি রেন্ডার না করলে আপনি কি আগুনের আশ্বাস পেয়েছেন ? আপনি কোন ব্রাউজারগুলি পরীক্ষা করেছেন?

— আর্টলুং

হ্যাঁ, আমি এটি একটি মোবাইল অ্যান্ড্রয়েড ওএস, ডিফল্ট ব্রাউজারে পরীক্ষা করি :)

— রবার্থ সোলস

Answer 5

ব্যবহার srcset

বর্তমানে বেশিরভাগ বর্তমান ব্রাউজারগুলি srcsetগুনটি সমর্থন করে যা বিভিন্ন ব্যবহারকারীদের জন্য বিভিন্ন চিত্র নির্দিষ্ট করে allows উদাহরণস্বরূপ, আপনি এটি 1x এবং 2x পিক্সেল ঘনত্বের জন্য ব্যবহার করতে পারেন এবং ব্রাউজারটি সঠিক ফাইলটি নির্বাচন করবে।

এই ক্ষেত্রে, আপনি যদি একটি এসভিজি নির্দিষ্ট করে থাকেন srcsetএবং ব্রাউজারটি এটি সমর্থন করে না, তবে এটি ফ্যালব্যাক করবে src।

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

অন্যান্য পদ্ধতির তুলনায় এই পদ্ধতির বিভিন্ন সুবিধা রয়েছে:

1. এটি কোনও অদ্ভুত হ্যাকস বা স্ক্রিপ্টগুলির উপর নির্ভর করে না
2. ইহা সাধারণ
3. আপনি এখনও Alt পাঠ্য অন্তর্ভুক্ত করতে পারেন
4. সমর্থনকারী ব্রাউজারগুলি srcsetকীভাবে এটি পরিচালনা করতে হবে তা এটি জানা উচিত যাতে এটি কেবল প্রয়োজনীয় ফাইলটি ডাউনলোড করে।

Comments

আজকাল কোনও ব্রাউজার এসভিজিকে সমর্থন করবে এমন এক> 99% সম্ভাবনা রয়েছে কেন তা কেন বিরক্ত করবেন?

— রবার্ট লঙ্গসন

প্রত্যেকে নিশ্চিত করার একটি অংশ পৃষ্ঠাটি নির্ভুলভাবে দেখতে পারে, গুগল আপনাকে আরও ভালবাসবে!

— হুটস

এটির চেয়ে আরও ভাল দেখাচ্ছে, বর্তমান সময়ে আপনি ফ্যালব্যাক চিত্রটি ~ 10% ব্যবহারকারীর দিকে ঠেলে দিচ্ছেন।

— ভোলকার ই।

@VolkerE। 10%? ক্যানিউজ প্রায় 2% এসভিজি সহায়তার অভাব দেখায় । আমি এখনও উত্তরের মতো srcset ব্যবহার করি যদিও 2% সমর্থন করি। ভবিষ্যতে, আমি আশা করি ব্রাউজারগুলি কেবল ডিভাইসের আকার বা ফাইল ফর্ম্যাট সমর্থন নয়, পারফরম্যান্স এবং আকারের মতো বিষয়ের উপর ভিত্তি করে srcset এর মতো তথ্য নিতে এবং উপযুক্ত চিত্র বাছাই করতে সক্ষম হবে।

— স্ক্রিবলমাচারে

ব্রাউজারগুলি এসভিজি সমর্থন করে তবে এসসিআরসিটি নয় কেবল তখনই এই সমাধানটির সমস্যা issue আইই 11 এর মতো, যা পিএনজির কাছে ডিফল্ট হয়ে গেছে যদিও এটি

— এসভিজিকে

Answer 6

আপনার এসভিজগুলি সিএসএসের সাথে পুরোপুরি স্টাইলযোগ্য হতে হলে তাদের ডিওমে ইনলাইন হতে হবে। এটি এসভিজি ইঞ্জেকশনের মাধ্যমে অর্জন করা যায়, যা এইচটিএমএল উপাদান (সাধারণত একটি) প্রতিস্থাপন করতে জাভাস্ক্রিপ্ট ব্যবহার করে<img> পৃষ্ঠাটি লোড হওয়ার পরে কোনও এসভিজি ফাইলের সামগ্রীগুলির সাথে উপাদান) ।

এসভিজিআইএনজেক্ট ব্যবহার করে এখানে একটি ন্যূনতম উদাহরণ :

<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 বৈশিষ্ট্যটিতে । এটি এসভিজি সমর্থন করে এমন সমস্ত ব্রাউজারের সাথে কাজ করে।

দাবি অস্বীকার: আমি এসভিজিআইএনজেক্টের সহ-লেখক

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> ট্যাগ ব্যবহার করেন তবে ওয়েবকিট ভিত্তিক ব্রাউজারগুলি এম্বেড বিটম্যাপযুক্ত চিত্রগুলি প্রদর্শন করবে না ।

এসভিজি ইনলাইন অফার সহ যে কোনও ধরণের উন্নত এসভিজি ব্যবহারের জন্য এখন পর্যন্ত সবচেয়ে নমনীয়।

ইন্টারনেট এক্সপ্লোরার এবং এজটি এসভিজিকে সঠিকভাবে আকার দেবে , তবে আপনাকে অবশ্যই উচ্চতা এবং প্রস্থ উভয়ই নির্দিষ্ট করতে হবে।

আপনি এসভিজির যে কোনও আকারে, অনক্লিক, অনমাউসওভার ইত্যাদি যুক্ত করতে পারেন : ওনমাউসওভার = "শীর্ষ.মাইফংশন (স্পষ্ট);"

আপনি এসভিজিতে ওয়েব ফন্টগুলি আপনার নিয়মিত স্টাইল শীটে অন্তর্ভুক্ত করেও ব্যবহার করতে পারেন ।

দ্রষ্টব্য: আপনি যদি চিত্রের কাছ থেকে এসভিজি রফতানি করে থাকেন তবে ওয়েব ফন্টের নামগুলি ভুল হবে। আপনি এটি আপনার সিএসএসে সংশোধন করতে পারেন এবং এসভিজিতে গোলযোগ এড়াতে পারেন। উদাহরণস্বরূপ, ইলাস্ট্রেটর আরিলকে ভুল নাম দেয় এবং আপনি এটির মতো এটি ঠিক করতে পারেন:

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

2013 সাল থেকে প্রকাশিত যে কোনও ব্রাউজারে এই সমস্ত কাজ করে ।

উদাহরণস্বরূপ, ওজেক.কম দেখুন । যোগাযোগের ফর্ম বাদে পুরো সাইটটি এসভিজির তৈরি।

সতর্কতা: ওয়েব ফন্টগুলি সাফারিতে যথার্থ আকারে পুনরায় আকার দেওয়া হয়েছে - এবং আপনার যদি সরল পাঠ্য থেকে গা bold় বা তির্যকগুলিতে প্রচুর স্থানান্তর হয় তবে ট্রানজিশন পয়েন্টগুলিতে অল্প পরিমাণে অতিরিক্ত বা অনুপস্থিত স্থান থাকতে পারে। আরও তথ্যের জন্য এই প্রশ্নের আমার উত্তর দেখুন ।

Comments

ধন্যবাদ. আমার imgট্যাগটিতে রাস্টার চিত্রগুলি কেন প্রদর্শিত হচ্ছে না তা বোঝার চেষ্টা করে আমার চুল টানতে মাত্র 3 ঘন্টা ব্যয় করেছে ... আপনি কি জানেন যে এটি কোথাও অফিসিয়ালি নথিভুক্ত হয়েছে কিনা?

— রাইব্রেড

@ অ্যান্ড্রু সুইফট, আপনি dev.ozake.com- এ সত্যিই দুর্দান্ত ভিজ্যুয়াল ফলাফল পেয়েছেন , তবে অ্যাক্সেসযোগ্যতার গুরুতর সমস্যা রয়েছে: অনুসন্ধান ইঞ্জিনগুলিতে সম্ভবত সাইটটি সূচীকরণ করতে বেশ কষ্ট হবে (আমি নিশ্চিত নই যে তারা এসভিজি ইভেন্টের মধ্যে লুকানো লিঙ্কগুলি বেছে নেবে) ; সাইটটি কীবোর্ড দ্বারা নাব্যযোগ্য নয়; মনে হচ্ছে পর্দার পাঠকরা এতে

— চটকাবেন

Answer 9

আমার দুটি সেন্ট: 2019 সালের হিসাবে, ব্যবহারে 93% ব্রাউজার (এবং তাদের প্রত্যেকের শেষ দুটি সংস্করণের 100%) <img>উপাদানগুলিতে এসভিজি পরিচালনা করতে পারে :

উত্স: আমি ব্যবহার করতে পারি

সুতরাং আমরা বলতে পারি যে <object>আর ব্যবহার করার কোনও কারণ নেই।

তবে এটি এখনও তার হয়েছে অনুকূল :

• পরিদর্শন করার সময় (যেমন ক্রোম দেব সরঞ্জামগুলির সাহায্যে) আপনি যদি এতে কিছুটা ছড়িয়ে পড়ে এবং লাইভ পরিবর্তনগুলি দেখতে চান তবে আপনাকে পুরো এসভিজি মার্কআপের সাথে উপস্থাপন করা হবে।

• আপনার ব্রাউজারটি এসভিজিগুলিকে সমর্থন না করার ক্ষেত্রে এটি একটি খুব দৃ fall় ফ্যালব্যাক বাস্তবায়ন সরবরাহ করে (অপেক্ষা করুন, তবে তাদের প্রত্যেকটি এটি করেন!) যা এসভিজি না পাওয়া গেলে এটিও কাজ করে। এটি এক্সএইচটিএমএল 2 স্পেসের মূল বৈশিষ্ট্য ছিল যা বেটাম্যাক্স বা এইচডি-ডিভিডি এর মতো

তবে এছাড়াও আছে কনস :

• এখানে কোনও এএমপি কাউন্টার পার্ট নেই <object>(এটি এটিকে ব্যবহার করে অনলাইনেও ব্যবহার করা পুরোপুরি নিরাপদ<amp-img> ।
• আপনার কোনওভাবে এম্বেডের সাথে সার্ভিস ওয়ার্কার আনার হ্যান্ডলারটি মিশ্রিত করা উচিত নয় , তাই কোনও <object>ট্যাগ থাকার ফলে আপনার পিডব্লিউএকে সত্যই অফলাইনে সক্ষম হতে বাধা দিতে পারে।

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>

ধারণাটি হ'ল ফলব্যাক শৈলীর সাথে বিশেষ এসভিজি inোকানো।

আরও বিশদ এবং পরীক্ষার প্রক্রিয়া আপনি আমার ব্লগে খুঁজে পেতে পারেন ।

Answer 11

এই jQuery ফাংশনটি এসভিজি চিত্রগুলিতে সমস্ত ত্রুটি ক্যাপচার করে এবং ফাইল এক্সটেনশানটিকে বিকল্প এক্সটেনশন দিয়ে প্রতিস্থাপন করে

ত্রুটি লোড করা ত্রুটিটি দেখতে 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> এইচটিএমএল ট্যাগ indোকাতে পারেন এবং নীচের বর্ণনা অনুযায়ী যা স্ট্যাকওভারফ্লোতে এটি সম্ভব:

আমি আমার পিসিতে এসভিজি ফাইলটি অনুসরণ করছি

<?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

আমি তখন ম্যানুয়ালি (চিত্র আইকন ব্যবহার না করে) নিম্নলিখিত এইচটিএমএল ট্যাগ যুক্ত করেছি

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

এবং ফলাফল ঠিক নীচে

কিছু সন্দেহ সহ ব্যবহারকারী, নিম্নলিখিত উত্তর সম্পাদনা করে আমি কি করেছি তা দেখতে পাওয়া সম্ভব স্ট্যাকওভারফ্লো প্রবিষ্টকরণ এসভিজি চিত্রের

স্মারক -১: এসভিজি ফাইলটিতে অবশ্যই থাকতে হবে <?xml?> উপাদান । শুরুতে, আমি কেবল একটি এসভিজি ফাইল তৈরি করেছি যা সরাসরি <svg>ট্যাগ দিয়ে শুরু হয় এবং কিছুই কাজ করে না!

স্মারক -২: শুরুতে, আমি IMAGEআইকন ব্যবহার করে একটি চিত্র sertোকানোর চেষ্টা করেছিEdit Toolbar । আমি আমার এসভিজি ফাইলের ইউআরএল পেস্ট করেছি তবে স্ট্যাকওভারফ্লো এই পদ্ধতিটি গ্রহণ করে না। দ্য<img>ট্যাগ ম্যানুয়ালি যোগ করা উচিত নয়।

আমি আশা করি এই উত্তরটি অন্যান্য ব্যবহারকারীদের সহায়তা করতে পারে।