HTML5-এ SVG ইমেজ ব্যবহার করতে <img>`, `
যদি SVG একটি ফাইল হিসেবে সেভ করা থাকে, তবে এটি সরাসরি একটি ইমেজ হিসেবে ব্যবহার করা যায়:
উদাহরণ
নিচের কোড চালিয়ে SVG ইমেজ ব্যবহারের উদাহরণ দেখুন:
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG ইমেজ</title> </head> <body> <h2 align="center">HTML5 SVG ইমেজ</h2> <img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" alt="smile" height="100px" width="100px" /> </body> </html>
বিভিন্ন পদ্ধতি:
- <img> ট্যাগ: সবচেয়ে সহজ, CSS দিয়ে স্টাইল করা যায়, ক্যাশ হয়।
- ইনলাইন <svg>: CSS ও JavaScript দিয়ে ম্যানিপুলেট করা যায়, কোনো অতিরিক্ত HTTP রিকোয়েস্ট লাগে না।
- <object> ট্যাগ: ফলব্যাক কন্টেন্ট যোগ করা যায়, কিন্তু স্ক্রিপ্টিং সীমিত।
- <embed> ট্যাগ: পুরানো পদ্ধতি, বর্তমানে কম ব্যবহার হয়।
সর্বোত্তম অভ্যাস: আইকন এবং সহজ গ্রাফিক্সের জন্য ইনলাইন SVG, জটিল ইলাস্ট্রেশনের জন্য <img> ব্যবহার করুন।
