HTML5-এ SVG ব্যবহার করার পদ্ধতি
SVG-এর полন রূপ Scalable Vector Graphics এবং এটি XML-এ ২D-গ্রাফিক্স এবং গ্রাফিক্যাল অ্যাপ্লিকেশন বর্ণনার একটি ভাষা, जिसे SVG ভিউয়ার রেন্ডার করে।
SVG मुख্যভাবে ভেক্টর টাইপ ডায়াগ্রামের জন্য উপযোগী—যেমন পাই চার্ট, X,Y কোঅর্ডিনেট সিস্টেমে দ্বিমাত্রিক গ্রাফ ইত্যাদি।
HTML5-এ Scalable Vector Graphics (SVG) ব্যবহার করতে, সরাসরি <svg>...</svg> ট্যাগ ব্যবহার করে এম্বেড করতে হয় নিচের সিন্ট্যাক্স অনুযায়ী:
সিন্ট্যাক্স
<svg xmlns="https://www.w3.org/2000/svg"> ... </svg>
HTML5 SVG-এ আকৃতি আঁকতে ব্যবহার করুন:
<circle>এলিমেন্ট — বৃত্ত আঁকার জন্য<rect>এলিমেন্ট — আয়তক্ষেত্র আঁকার জন্য<line>এলিমেন্ট — রেখা আঁকার জন্য<ellipse>এলিমেন্ট — উপবৃত্ত আঁকার জন্য<polygon>এলিমেন্ট — পলিগন আঁকার জন্য
আপনি <img>, <iframe>, <object> বা <embed> ট্যাগ ব্যবহার করেও SVGকে ওয়েব পেজে যোগ করতে পারেন। চলুন <svg> ট্যাগ ব্যবহার করে HTML5 SVG যোগ করার উদাহরণ দেখি।
উদাহরণ
নিচের কোডটি চালিয়ে HTML5-এ SVG ব্যবহার শিখুন। এখানে আমরা একটি বৃত্ত আঁকব:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Circle</title>
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
<circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>
</body>
</html>
