SVG গ্রাফিক্সে বিভিন্ন আকার তৈরি করতে path এলিমেন্ট ব্যবহৃত হয়। path এলিমেন্টটি একটি অত্যন্ত শক্তিশালী টুল যা জটিল এবং কাস্টম আকার তৈরি করতে সহায়তা করে। path এলিমেন্টের মধ্যে যে ডাটা থাকে, তা d এট্রিবিউটের মাধ্যমে দেওয়া হয়। d এট্রিবিউটের মধ্যে থাকা Path Commands গুলি বিভিন্ন ধরনের আকার তৈরি এবং রূপান্তর করতে ব্যবহৃত হয়।
d এট্রিবিউট
d এট্রিবিউটটি path এলিমেন্টের মধ্যে থাকা নির্দেশাবলীর (commands) একটি স্ট্রিং হিসেবে কাজ করে। এই স্ট্রিংটি গ্রাফিক্যাল আকার তৈরি করার জন্য গতি নির্দেশনা এবং আকারের রূপরেখা প্রদান করে। Path Commands এর মাধ্যমে বিভিন্ন ধরনের রেখা, বাঁকা রেখা, বৃত্ত, আয়তক্ষেত্র ইত্যাদি তৈরি করা যায়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10,10 L90,90 C100,100 150,100 150,50 Z" stroke="black" fill="transparent"/>
</svg>
এখানে:
M10,10থেকে শুরু হচ্ছে একটি নতুন পথ।L90,90একটি সরল রেখা আঁকবে।C100,100 150,100 150,50একটি বাঁকা রেখা তৈরি করবে।Zচিত্রটির পথ বন্ধ করে দেবে।
Path Commands
d এট্রিবিউটে বিভিন্ন ধরনের কমান্ড ব্যবহার করা যায়। কিছু মূল কমান্ড নিচে আলোচনা করা হলো:
M (Move To)
Mকমান্ডটি পাথের শুরু পয়েন্টে চলে যায়। এটি বর্তমান পয়েন্ট থেকে নির্দিষ্ট কোঅর্ডিনেটে চলে যায়, তবে কোন রেখা আঁকা হয় না।- উদাহরণ:
M10,10– এটি ১০,১০ কোঅর্ডিনেটে চলে যাবে।
L (Line To)
Lকমান্ডটি বর্তমান পয়েন্ট থেকে নতুন পয়েন্টে সরল রেখা আঁকতে ব্যবহৃত হয়।- উদাহরণ:
L90,90– এটি ৯০,৯০ কোঅর্ডিনেটে একটি রেখা আঁকবে।
C (Cubic Bezier Curve)
Cকমান্ডটি একটি কিউবিক বেজিয়ার কার্ভ আঁকতে ব্যবহৃত হয়, যেখানে তিনটি পয়েন্ট প্রয়োজন: দুটি কন্ট্রোল পয়েন্ট এবং একটি শেষ পয়েন্ট।- উদাহরণ:
C100,100 150,100 150,50– এটি একটি কিউবিক বেজিয়ার কার্ভ আঁকবে, যেখানে ১০০,১০০ এবং ১৫০,১০০ কন্ট্রোল পয়েন্ট এবং ১৫০,৫০ শেষ পয়েন্ট।
S (Smooth Cubic Bezier Curve To)
Sকমান্ডটিCকমান্ডের মতো, তবে এটি পূর্ববর্তী কন্ট্রোল পয়েন্টগুলির উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে নতুন কন্ট্রোল পয়েন্ট তৈরি করে।- উদাহরণ:
S150,150 200,100– এটি একটি মসৃণ কিউবিক বেজিয়ার কার্ভ আঁকবে।
Q (Quadratic Bezier Curve)
Qকমান্ডটি একটি কিউড্র্যাটিক বেজিয়ার কার্ভ তৈরি করতে ব্যবহৃত হয়, যেখানে দুটি পয়েন্ট লাগে: একটি কন্ট্রোল পয়েন্ট এবং একটি শেষ পয়েন্ট।- উদাহরণ:
Q50,150 150,150– এটি একটি কিউড্র্যাটিক বেজিয়ার কার্ভ আঁকবে, যেখানে ৫০,১৫০ কন্ট্রোল পয়েন্ট এবং ১৫০,১৫০ শেষ পয়েন্ট।
T (Smooth Quadratic Bezier Curve To)
Tকমান্ডটিQকমান্ডের মতো, তবে এটি পূর্ববর্তী কন্ট্রোল পয়েন্টগুলির উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে নতুন কন্ট্রোল পয়েন্ট তৈরি করে।- উদাহরণ:
T200,200– এটি একটি মসৃণ কিউড্র্যাটিক বেজিয়ার কার্ভ আঁকবে।
A (Elliptical Arc To)
Aকমান্ডটি একটি উপবৃত্তাকার (elliptical) আর্ক তৈরি করতে ব্যবহৃত হয়।- উদাহরণ:
A50,50 0 0,1 200,200– এটি একটি উপবৃত্তাকার আর্ক আঁকবে।
Z (Close Path)
Zকমান্ডটি বর্তমান পাথটি বন্ধ করে দেয়, অর্থাৎ শেষ পয়েন্টটি প্রথম পয়েন্টের সাথে যুক্ত করে।- উদাহরণ:
Z– এটি বর্তমান পাথটি বন্ধ করে দিবে।
Path Commands এর উদাহরণ
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10,10 L90,90 C100,100 150,100 150,50 Z" stroke="black" fill="transparent"/>
</svg>
এখানে:
M10,10কমান্ডটি চিত্রের শুরু পয়েন্ট ১০,১০ এ নিয়ে আসে।L90,90কমান্ডটি ৯০,৯০ পর্যন্ত একটি সরল রেখা আঁকে।C100,100 150,100 150,50কমান্ডটি একটি কিউবিক বেজিয়ার কার্ভ তৈরি করে।Zকমান্ডটি পাথটি বন্ধ করে দেয়।
সারাংশ
d এট্রিবিউটের মাধ্যমে path এলিমেন্টে বিভিন্ন ধরনের Path Commands ব্যবহার করে জটিল গ্রাফিক্স ডিজাইন করা যায়। এর মাধ্যমে রেখা, বক্র রেখা, আর্ক এবং অন্যান্য আকৃতি তৈরি করা সম্ভব, যা ওয়েব পেজে অত্যন্ত শক্তিশালী এবং ইন্টারেক্টিভ ডিজাইন তৈরি করতে সাহায্য করে।
Read more
