এইচটিএমএল(৫) SVG
SVG কি?
- SVG পূর্ণরূপ হল Scalable Vector Graphics ।
- SVG ওয়েবের জন্য গ্রাফিক্স ডিফাইন করতে ব্যবহৃত হয়।
- SVG ব্যবহার করার জন্য সরাসরি W3C পরামর্শ দেয়।
এইচটিএমএল <svg> এলিমেন্ট
এইচটিএমএল <svg> এলিমেন্টি SVG গ্রাফিক্স বা চিত্রের জন্য একটি ধারক বা পাত্র।
পথ, বক্স, বৃত্ত, টেক্সট এবং গ্রাফিক ইমেজ আকার জন্য SVG বিভিন্ন পদ্ধতি রয়েছে।
ব্রাউজার সাপোর্ট
যে সকল ব্রাউজার <svg> এলিমেন্ট সাপোর্ট করে তা নিম্নে উল্লেখ করা হলঃ
| এলিমেন্ট | |||||
|---|---|---|---|---|---|
| <svg> | ৪.০ | ৯.০ | ৩.০ | ৩.২ | ১০.১ |
SVG বৃত্ত
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
নিজে চেষ্টা করি »
SVG আয়তক্ষেত্র
উদাহরণ
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
নিজে চেষ্টা করি »
SVG গোলাকৃতি আয়তক্ষেত্র
উদাহরণ
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
নিজে চেষ্টা করি »
SVG তারকা (Star)
উদাহরণ
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"
/>
</svg>
নিজে চেষ্টা করি »
SVG লোগো(Logo)
উদাহরণ
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
দুঃখিত, আপনার ব্রাউজার ইনলাইন SVG সমর্থন করে না।
</svg>
নিজে চেষ্টা করি »
SVG এবং Canvas এর মধ্যে পার্থক্য
SVG XML- 2D গ্রাফিক্স বর্ণনাকারী একটি ভাষা।
Canvas এর চিত্র গুলো 2D গ্রাফিক্স এর উপর হয়(জাভাস্ক্রিপ্ট দিয়ে)।
SVG হলো XML ভিত্তিক, যার মানে প্রতিটি এলিমেন্ট SVG DOM এর মধ্যে পাওয়া যায়। আপনি একটি এলিমেন্টের জন্য জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারেন।
একটি SVG অবজেক্ট এর অ্যাট্রিবিউট পরিবর্তন করা হয়, ব্রাউজার স্বয়ংক্রিয়ভাবে SVG আকৃতি পুনরায় প্রদান করতে পারে।
Canvas এ পিক্সেল দ্বারা পিক্সেল উপস্থাপন করা হয়। Canvas এর মধ্যে একবার যদি কোন চিত্র আঁকা হয়, তখন ব্রাউজার তা ভুলে যায়। যদি এর অবস্থান পরিবর্তন করা হয়, তবে সম্পূর্ন দৃশ্য পুনরায় আকতে হবে। শুধুমাত্র অবজেক্ট গুলো গ্রাফিক দ্বারা আচ্ছাদিত থাকে।
Canvas এবং SVG এর তুলনা
নীচের টেবিলে Canvas এবং SVG মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য দেখানো হলঃ
| Canvas | SVG |
|---|---|
|
|
SVG সম্পর্কে আরও জানার জন্য, আমাদের SVG টিউটোরিয়াল পড়ুন.