HTML SVG
HTML SVG দিয়ে অ্যানিমেশন এবং ড্রয়িং টুলস তৈরি: একটি শিক্ষানবিস গাইড
HTML SVG (Scalable Vector Graphics) হলো ওয়েব ডেভেলপমেন্টের একটি শক্তিশালী টুল, যা ব্যবহার করে আপনি ওয়েব পেজে 2D ভেক্টর গ্রাফিক্স, অ্যানিমেশন এবং ইন্টারেক্টিভ ড্রয়িং তৈরি করতে পারেন। SVG হলো XML-ভিত্তিক ফরম্যাট, যা স্কেলেবল এবং রেজোলিউশন-স্বাধীন গ্রাফিক্স তৈরি করে। এই ব্লগে আমরা SVG-এর বেসিক থেকে শুরু করে ড্রয়িং টুল এবং অ্যানিমেশন তৈরির প্রক্রিয়া ধাপে ধাপে আলোচনা করব। আপনি যদি ওয়েব ডেভেলপমেন্টে নতুন হন, তাহলেও এই টিউটোরিয়াল আপনার জন্য সহজ এবং বোধগম্য হবে।
HTML SVG কী?
SVG হলো একটি XML-ভিত্তিক ফরম্যাট, যা HTML-এর <svg> ট্যাগ ব্যবহার করে ওয়েব পেজে ভেক্টর-ভিত্তিক আকৃতি, লাইন, এবং অ্যানিমেশন তৈরি করে। এটি ক্যানভাসের তুলনায় ভিন্ন কারণ এটি DOM (Document Object Model)-এর অংশ এবং প্রতিটি আকৃতি একটি HTML উপাদান হিসেবে থাকে। SVG গ্রাফিক্স স্কেল করলেও গুণমান হারায় না এবং CSS ও JavaScript দিয়ে সহজেই নিয়ন্ত্রণ করা যায়। এটি লোগো, আইকন, ডেটা ভিজুয়ালাইজেশন, এবং ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশনে ব্যবহৃত হয়।
ধাপ ১: SVG সেটআপ করা
প্রথমে আমাদের HTML ফাইলে একটি <svg> ট্যাগ যোগ করতে হবে। এটি একটি কনটেইনার হিসেবে কাজ করে, যেখানে আমরা বিভিন্ন SVG উপাদান (যেমন <rect>, <circle>, <line>) যোগ করব।
উদাহরণ: SVG সেটআপ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>HTML SVG টিউটোরিয়াল</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg id="mySVG" width="500" height="500"></svg>
<script>
// SVG অ্যাক্সেস করা
const svg = document.getElementById('mySVG');
</script>
</body>
</html>
<svg>ট্যাগেid,width, এবংheightসেট করা হয়েছে।- SVG উপাদানগুলো এই কনটেইনারের মধ্যে যোগ করা হবে।
ধাপ ২: বেসিক ড্রয়িং টুলস
SVG-তে আপনি বিভিন্ন আকৃতি যেমন আয়তক্ষেত্র, বৃত্ত, এবং লাইন আঁকতে পারেন। এগুলো <rect>, <circle>, <line> ইত্যাদি ট্যাগ ব্যবহার করে তৈরি করা হয়।
উদাহরণ: আকৃতি অঙ্কন
<svg id="mySVG" width="500" height="500">
<!-- ভরাট আয়তক্ষেত্র -->
<rect x="50" y="50" width="100" height="80" fill="blue" />
<!-- আউটলাইন আয়তক্ষেত্র -->
<rect x="200" y="50" width="100" height="80" fill="none" stroke="red" stroke-width="3" />
<!-- বৃত্ত -->
<circle cx="350" cy="100" r="40" fill="green" />
<!-- লাইন -->
<line x1="50" y1="200" x2="250" y2="200" stroke="black" stroke-width="5" />
</svg>
<rect>: আয়তক্ষেত্র আঁকে (x,y,width,height)।<circle>: বৃত্ত আঁকে (cx,cy,rব্যাসার্ধ)।<line>: লাইন আঁকে (x1,y1থেকেx2,y2)।fillএবংstrokeব্যবহার করে রঙ এবং আউটলাইন নিয়ন্ত্রণ করা হয়।
ধাপ ৩: ইন্টারেক্টিভ ড্রয়িং টুল
এখন আমরা একটি ইন্টারেক্টিভ ড্রয়িং টুল তৈরি করব, যেখানে ব্যবহারকারী মাউস দিয়ে SVG-তে লাইন আঁকতে পারবে। SVG-তে লাইন আঁকতে আমরা <polyline> বা <path> উপাদান ব্যবহার করব।
উদাহরণ: ফ্রিহ্যান্ড ড্রয়িং
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>SVG ফ্রিহ্যান্ড ড্রয়িং</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg id="mySVG" width="500" height="500"></svg>
<script>
const svg = document.getElementById('mySVG');
let isDrawing = false;
let currentPath = null;
let points = [];
svg.addEventListener('mousedown', startDrawing);
svg.addEventListener('mousemove', draw);
svg.addEventListener('mouseup', stopDrawing);
svg.addEventListener('mouseout', stopDrawing);
function startDrawing(e) {
isDrawing = true;
points = [];
const point = getMousePosition(e);
points.push(`${point.x},${point.y}`);
currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
currentPath.setAttribute('points', points.join(' '));
currentPath.setAttribute('stroke', 'black');
currentPath.setAttribute('stroke-width', '5');
currentPath.setAttribute('fill', 'none');
svg.appendChild(currentPath);
}
function draw(e) {
if (!isDrawing) return;
const point = getMousePosition(e);
points.push(`${point.x},${point.y}`);
currentPath.setAttribute('points', points.join(' '));
}
function stopDrawing() {
isDrawing = false;
currentPath = null;
}
function getMousePosition(e) {
const rect = svg.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
</script>
</body>
</html>
<polyline>: ব্যবহারকারীর মাউসের পয়েন্টগুলো সংযুক্ত করে লাইন তৈরি করে।createElementNS: SVG উপাদান তৈরি করতে SVG নেমস্পেস ব্যবহার করা হয়।- মাউস ইভেন্টগুলো ট্র্যাক করে ব্যবহারকারী অঙ্কন করতে পারে।
ধাপ ৪: SVG-তে অ্যানিমেশন
SVG-তে অ্যানিমেশন তৈরির জন্য আমরা CSS অ্যানিমেশন, SMIL, অথবা JavaScript ব্যবহার করতে পারি। এখানে আমরা JavaScript এবং <animate> ট্যাগ ব্যবহার করে একটি চলমান বৃত্ত অ্যানিমেশন তৈরি করব।
উদাহরণ: চলমান বৃত্ত অ্যানিমেশন
<svg id="mySVG" width="500" height="500">
<circle id="movingCircle" cx="50" cy="50" r="20" fill="purple">
<animate attributeName="cx" from="50" to="450" dur="2s" repeatCount="indefinite" />
<animate attributeName="cy" from="50" to="450" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
<animate>ট্যাগ:cxএবংcyঅ্যাট্রিবিউট পরিবর্তন করে বৃত্তকে সরায়।dur: অ্যানিমেশনের সময়কাল (২ সেকেন্ড)।repeatCount="indefinite": অ্যানিমেশন বারবার চলবে।
JavaScript দিয়ে বাউন্সিং অ্যানিমেশন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>SVG অ্যানিমেশন</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg id="mySVG" width="500" height="500">
<circle id="movingCircle" cx="50" cy="50" r="20" fill="purple" />
</svg>
<script>
const circle = document.getElementById('movingCircle');
let x = 50, y = 50, speedX = 2, speedY = 2;
const radius = 20;
const svg = document.getElementById('mySVG');
function animate() {
x += speedX;
y += speedY;
// বাউন্স লজিক
if (x + radius > 500 || x - radius < 0) speedX = -speedX;
if (y + radius > 500 || y - radius < 0) speedY = -speedY;
circle.setAttribute('cx', x);
circle.setAttribute('cy', y);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
- JavaScript দিয়ে
cxএবংcyআপডেট করে বৃত্ত সরানো হয়। requestAnimationFrame: মসৃণ অ্যানিমেশনের জন্য ব্যবহৃত হয়।- বৃত্তটি SVG-এর সীমানায় ধাক্কা লাগলে বাউন্স করে।
ধাপ ৫: ড্রয়িং এবং অ্যানিমেশন একত্রে
এখন আমরা একটি উদাহরণ দেখব, যেখানে ব্যবহারকারী ফ্রিহ্যান্ড ড্রয়িং করতে পারবে এবং একটি চলমান বৃত্ত অ্যানিমেশন হিসেবে দেখা যাবে। SVG-তে অঙ্কন সংরক্ষণ করা সহজ কারণ এটি DOM-এর অংশ, তাই আমাদের ক্যানভাসের মতো ক্লিয়ার করার প্রয়োজন নেই।
উদাহরণ: ড্রয়িং এবং অ্যানিমেশন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>SVG ড্রয়িং এবং অ্যানিমেশন</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg id="mySVG" width="500" height="500">
<circle id="movingCircle" cx="50" cy="50" r="20" fill="red" />
</svg>
<script>
const svg = document.getElementById('mySVG');
const circle = document.getElementById('movingCircle');
let isDrawing = false;
let currentPath = null;
let points = [];
// ড্রয়িং ইভেন্ট
svg.addEventListener('mousedown', startDrawing);
svg.addEventListener('mousemove', draw);
svg.addEventListener('mouseup', stopDrawing);
svg.addEventListener('mouseout', stopDrawing);
function startDrawing(e) {
isDrawing = true;
points = [];
const point = getMousePosition(e);
points.push(`${point.x},${point.y}`);
currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
currentPath.setAttribute('points', points.join(' '));
currentPath.setAttribute('stroke', 'black');
currentPath.setAttribute('stroke-width', '5');
currentPath.setAttribute('fill', 'none');
svg.appendChild(currentPath);
}
function draw(e) {
if (!isDrawing) return;
const point = getMousePosition(e);
points.push(`${point.x},${point.y}`);
currentPath.setAttribute('points', points.join(' '));
}
function stopDrawing() {
isDrawing = false;
currentPath = null;
}
function getMousePosition(e) {
const rect = svg.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
// অ্যানিমেশন
let x = 50, y = 50, speedX = 2, speedY = 2;
const radius = 20;
function animate() {
x += speedX;
y += speedY;
if (x + radius > 500 || x - radius < 0) speedX = -speedX;
if (y + radius > 500 || y - radius < 0) speedY = -speedY;
circle.setAttribute('cx', x);
circle.setAttribute('cy', y);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
- ব্যবহারকারী মাউস দিয়ে অঙ্কন করতে পারে, এবং অঙ্কন DOM-এ থাকায় মুছে যায় না।
- বৃত্তটি অ্যানিমেশন হিসেবে চলে এবং বাউন্স করে।
ধাপ ৬: উন্নত টিপস
- CSS দিয়ে স্টাইলিং: SVG উপাদানে CSS ব্যবহার করে
fill,stroke, এবংstroke-widthনিয়ন্ত্রণ করুন। - অ্যানিমেশন: CSS
@keyframesবা<animateTransform>ব্যবহার করে ঘূর্ণন বা স্কেলিং অ্যানিমেশন তৈরি করুন। - পাথ অঙ্কন:
<path>ট্যাগ ব্যবহার করে জটিল আকৃতি তৈরি করুন। - ইন্টারেক্টিভিটি: SVG উপাদানে
onclick,onmouseoverইভেন্ট যোগ করুন। - রেসপনসিভ SVG:
viewBoxঅ্যাট্রিবিউট ব্যবহার করে SVG-কে রেসপনসিভ করুন, যেমন<svg viewBox="0 0 500 500">।
ধাপ ৭: আরও শেখার জন্য রিসোর্স
- MDN Web Docs: SVG-এর বিস্তারিত গাইড (https://developer.mozilla.org/en-US/docs/Web/SVG)।
- W3Schools: শিক্ষানবিস-বান্ধব টিউটোরিয়াল (https://www.w3schools.com/graphics/svg_intro.asp)।
- X প্ল্যাটফর্ম:
#SVGTutorialবা#SVGAnimationহ্যাশট্যাগ দিয়ে সার্চ করে কমিউনিটির উদাহরণ দেখুন। - YouTube টিউটোরিয়াল: “SVG Tutorial” সার্চ করে ভিডিও টিউটোরিয়াল দেখুন।
উপসংহার
HTML SVG একটি শক্তিশালী এবং বহুমুখী টুল, যা ব্যবহার করে আপনি ওয়েবে স্কেলেবল গ্রাফিক্স এবং অ্যানিমেশন তৈরি করতে পারেন। এই ব্লগে আমরা বেসিক SVG ড্রয়িং, ফ্রিহ্যান্ড ড্রয়িং টুল, এবং অ্যানিমেশনের উদাহরণ দেখেছি। আপনি যদি আরও উন্নত ফিচার যোগ করতে চান, যেমন রঙ পরিবর্তন, পাথ অঙ্কন, বা ইন্টারেক্টিভ ডিজাইন, তাহলে এই বেসিক জ্ঞান দিয়ে শুরু করতে পারেন।
