কখন ইনলাইন SVG বনাম img ব্যবহার করা উচিত?

Question

Accepted Answer

SVG একটি **ভেক্টর** ইমেজ ফরম্যাট (XML-ভিত্তিক), তাই এটি ঝাপসা না হয়ে যেকোনো আকারে স্কেল করে। আপনি এটি দুটি প্রধান উপায়ে অন্তর্ভুক্ত করতে পারেন, প্রতিটির নিজস্ব ট্রেড-অফ রয়েছে। ## ইনলাইন SVG — HTML-এ সরাসরি markup ```html ``` **সুবিধা:** আপনি এটি CSS (`fill`, `stroke`) দিয়ে স্টাইল করতে পারেন, এর অংশগুলি অ্যানিমেট করতে পারেন, `currentColor` এর মাধ্যমে রঙ পরিবর্তন করতে পারেন (টেক্সট রঙ উত্তরাধিকার), এবং ইভেন্টগুলির প্রতিক্রিয়া জানাতে পারেন — কারণ এটি বাস্তব DOM। কোনো অতিরিক্ত HTTP অনুরোধ নেই। **অসুবিধা:** HTML কে ফুলিয়ে দেয়, আলাদাভাবে ক্যাশ করা হয় না, পুনরাবৃত্ত আইকনগুলি markup নকল করে। ## SVG `` এর মাধ্যমে — একটি ফাইল হিসাবে রেফারেন্স করা হয় ```html

``` **সুবিধা:** ব্রাউজার দ্বারা ক্যাশ করা হয়, HTML পরিষ্কার রাখে, সহজ। **অসুবিধা:** আপনি আপনার CSS/JS দিয়ে এর অভ্যন্তরীণ অংশগুলি স্টাইল বা স্ক্রিপ্ট করতে **পারবেন না** — এটি একটি অস্বচ্ছ ইমেজ। ## সিদ্ধান্ত গাইড ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## অ্যাক্সেসিবিলিটি ```html ``` ## কেন এটি গুরুত্বপূর্ণ ইনলাইন বনাম `` SVG নির্বাচন করা এতে নেমে আসে যে আপনার গ্রাফিক **স্টাইল/অ্যানিমেট** করতে হবে (ইনলাইন) বা শুধু **দক্ষতার সাথে প্রদর্শন** করতে হবে (``)। আইকনগুলি যা হোভারে বা থিম পরিবর্তনে রঙ পরিবর্তন করে সেগুলি ইনলাইন হয় (প্রায়শই উপাদান হিসাবে); স্ট্যাটিক ব্র্যান্ড সম্পদ `` এর মাধ্যমে যায়। যেভাবেই হোক, ভেক্টরগুলি প্রতিটি রেজোলিউশনে স্পষ্ট থাকে — আইকন এবং লোগোর জন্য আদর্শ।

ইনলাইন SVG — HTML-এ সরাসরি markup

SVG <img> এর মাধ্যমে — একটি ফাইল হিসাবে রেফারেন্স করা হয়

সিদ্ধান্ত গাইড

অ্যাক্সেসিবিলিটি

কেন এটি গুরুত্বপূর্ণ

SVG `<img>` এর মাধ্যমে — একটি ফাইল হিসাবে রেফারেন্স করা হয়