HTML <svg> এলিমেন্ট SVG গ্রাফিক্সের জন্য একটি কন্টেইনার। SVG মানে Scalable Vector Graphics। SVG বক্স, সার্কেল, টেক্সট ইত্যাদি গ্রাফিক্স সংজ্ঞায়িত করার জন্য কার্যকর। SVG মানে Scalable Vector Graphics এবং এটি XML-এ ২ডি-গ্রাফিক্স এবং গ্রাফিক্যাল অ্যাপ্লিকেশন বর্ণনার একটি ভাষা এবং XMLটি SVG ভিউয়ার দ্বারা রেন্ডার হয়। অধিকাংশ ওয়েব ব্রাউজার PNG, GIF, এবং JPG-এর মতো SVG ডিসপ্লে করতে পারে।
HTML <canvas> এলিমেন্ট জাভাস্ক্রিপ্ট ব্যবহার করে গ্রাফিক্স আঁকতে ব্যবহৃত হয়। <canvas> এলিমেন্ট গ্রাফিক্সের জন্য একটি কন্টেইনার।
| SVG | HTML Canvas |
|---|---|
| SVG-র বেটার স্কেলেবিলিটি আছে। তাই যেকোনো রেজোলিউশনে হাই কোয়ালিটিতে প্রিন্ট করা যায়। | Canvas-র পুয়র স্কেলেবিলিটি। তাই হায়ার রেজোলিউশনে প্রিন্টের জন্য উপযুক্ত নয়। |
| SVG কম অবজেক্ট বা বড় সারফেসে বেটার পারফরম্যান্স দেয়। | Canvas ছোট সারফেস বা বেশি সংখ্যক অবজেক্টে বেটার পারফরম্যান্স দেয়। |
| SVG স্ক্রিপ্ট এবং CSS দিয়ে মডিফাই করা যায়। | Canvas শুধু স্ক্রিপ্ট দিয়ে মডিফাই করা যায়। |
| SVG ভেক্টর-ভিত্তিক এবং শেপ নিয়ে গঠিত। | Canvas র্যাস্টার-ভিত্তিক এবং পিক্সেল নিয়ে গঠিত। |
উদাহরণ
নিচের কোডটি চালিয়ে ওয়েব পেজে স্কেলেবল ভেক্টর গ্রাফিক্স (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 Circle</h2> <svg id = "svgelem" height = "200" xmlns = "https://www.w3.org/2000/svg"> <circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" /> </svg> </body> </html>
উদাহরণ
নিচের কোডটি চালিয়ে HTML5 Canvas-এ রেক্ট্যাঙ্গল আঁকার পদ্ধতি শিখতে পারেন:
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0,0,300,100); </script> </body> </html>
