SVG Paths এবং Complex Shapes

SVG (Scalable Vector Graphics) একটি XML ভিত্তিক গ্রাফিক্স ফরম্যাট যা ভেক্টর গ্রাফিক্সের জন্য ব্যবহৃত হয়। এসভিজির মাধ্যমে বিভিন্ন গ্রাফিক্যাল উপাদান তৈরি করা যায়, যার মধ্যে Paths এবং Complex Shapes অন্যতম। Paths হলো এসভিজির সবচেয়ে শক্তিশালী টুল, যার মাধ্যমে জটিল আকৃতি এবং গ্রাফিক্স তৈরি করা সম্ভব।

SVG Paths

SVG Paths হল একটি বিশেষ ধরনের উপাদান, যার মাধ্যমে জটিল এবং বেজিয়ার কেভ (Bezier curves) সহ রেখা তৈরি করা যায়। Paths একটি নির্দিষ্ট পাথ বা রুটে চলতে পারে এবং তাদের মধ্যে নানা ধরনের শেপ এবং বক্ররেখা আঁকা যেতে পারে। এটি স্ট্রোক এবং ফিলিং প্যাটার্নের মাধ্যমে খুবই শক্তিশালী এবং নমনীয় গ্রাফিক্স তৈরি করতে সহায়তা করে।

Path Syntax:

<path d="M10 10 H 90 V 90 H 10 Z" />

এখানে:

• M (Move To): পাথের শুরু পয়েন্ট নির্ধারণ করে।
• H (Horizontal Line To): অনুভূমিক রেখা আঁকতে ব্যবহৃত হয়।
• V (Vertical Line To): উল্লম্ব রেখা আঁকতে ব্যবহৃত হয়।
• Z (Close Path): পাথ বন্ধ করে এবং প্রথম পয়েন্টে ফিরে আসে।

উদাহরণ:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M10 10 H 90 V 90 H 10 Z" fill="lime" stroke="black" stroke-width="2"/>
</svg>

এখানে একটি সাধারণ স্কোয়ার আঁকা হয়েছে, যেখানে M, H, V, এবং Z কমান্ড ব্যবহার করা হয়েছে।

Complex Shapes with Paths

Paths-এর মাধ্যমে আরো জটিল আকৃতি এবং বক্ররেখা তৈরি করা যায়। এখানে কিছু কমপ্লেক্স শেপ তৈরি করার উদাহরণ দেওয়া হলো:

বেজিয়ার কেভ (Bezier Curves)

Cubic Bezier Curve (C): একটি কিউবিক বেজিয়ার কেভে ৩টি পয়েন্ট নির্ধারণ করা হয়, যা একটি বাঁকা রেখা তৈরি করে।

<path d="M10 80 C 40 10, 65 10, 95 80" fill="transparent" stroke="black" stroke-width="2"/>

এখানে:

• M পাথের শুরু পয়েন্ট নির্ধারণ করে।
• C কমান্ডটি একটি কিউবিক বেজিয়ার কেভ আঁকে, যেখানে ৪টি পয়েন্ট থাকে: ১টি শুরু পয়েন্ট, ২টি কন্ট্রোল পয়েন্ট এবং ১টি শেষ পয়েন্ট।

Quadratic Bezier Curve (Q)

কোয়ার্টারী বেজিয়ার কেভে ২টি কন্ট্রোল পয়েন্ট থাকে এবং এটি একটি সহজ বক্ররেখা তৈরি করে।

<path d="M10 80 Q 95 10 180 80" fill="transparent" stroke="black" stroke-width="2"/>

এখানে:

• Q কমান্ডে ১টি কন্ট্রোল পয়েন্ট এবং ১টি শেষ পয়েন্ট থাকে।

Multi-Line and Curved Path

একটি পাথের মধ্যে বিভিন্ন ধরনের রেখা এবং কেভ একত্রিত করা যেতে পারে, যা জটিল আকৃতি তৈরি করতে সহায়তা করে।

<path d="M10 10 H 90 C 100 50, 150 50, 160 10 S 230 10, 240 50" fill="transparent" stroke="black" stroke-width="2"/>

এখানে:

• S (Smooth Cubic Bezier Curve To) কিউবিক বেজিয়ার কেভের একটি বিশেষ কমান্ড যা পূর্ববর্তী কেভের সঙ্গে সংযুক্ত থাকে।

Paths with Arcs

আরেকটি শক্তিশালী কমান্ড হলো আর্ক (Arc), যা পাথের মধ্যে আর্ক বা বৃত্ত তৈরি করতে ব্যবহৃত হয়। এটি A কমান্ড দিয়ে করা হয়।

Arc Command Syntax:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

• rx ও ry: আর্কের এক্স এবং ওয়াই রেডিয়াস।
• x-axis-rotation: আর্কের রোটেশন কোণ।
• large-arc-flag: আর্কের দৈর্ঘ্য নির্দেশ করে।
• sweep-flag: আর্কটি কোন দিকে যাবে তা নির্দেশ করে।
• x এবং y: আর্কের শেষ পয়েন্ট।

উদাহরণ:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M10 80 A 45 45 0 0 1 100 80" fill="transparent" stroke="black" stroke-width="2"/>
</svg>

এখানে:

• A কমান্ডটি একটি আর্ক তৈরি করে, যা ১০০, ৮০ পয়েন্টে শেষ হয়।

সারাংশ

SVG Paths দিয়ে জটিল আকৃতি এবং বক্ররেখা তৈরি করা সম্ভব, যা ওয়েব গ্রাফিক্সের ক্ষেত্রে অত্যন্ত গুরুত্বপূর্ণ। Paths ব্যবহার করে কিউবিক ও কোয়ার্টারী বেজিয়ার কেভ, আর্ক, এবং নানা ধরনের জটিল শেপ তৈরি করা যায়, যা ডিজাইনারদের এবং ডেভেলপারদের একটি শক্তিশালী টুল সরবরাহ করে। Paths দিয়ে অত্যন্ত নিখুঁত এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করা যায়, যা ওয়েব পেজের গুণগত মান এবং পারফরম্যান্স বাড়াতে সাহায্য করে।

এসভিজি (SVG) এর Path ট্যাগটি একটি অত্যন্ত শক্তিশালী এবং নমনীয় উপাদান, যা জটিল আকার এবং ডিজাইন তৈরি করতে ব্যবহৃত হয়। এসভিজি Path এর মাধ্যমে বিভিন্ন ধরনের রেখা, বেজিয়ার কেভ (Bezier curves), আর্ক (Arc) এবং মুভমেন্টের মাধ্যমে কাস্টম গ্রাফিক্স তৈরি করা সম্ভব। এটি ওয়েব ডিজাইন ও গ্রাফিক্সে অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে।

SVG Path এর মৌলিক গঠন

এটি <path> ট্যাগের মাধ্যমে তৈরি হয় এবং এর d অ্যাট্রিবিউটের মাধ্যমে যেকোনো জটিল রুট বা পাথ নির্ধারণ করা হয়। d অ্যাট্রিবিউটের মধ্যে একটি স্ট্রিং থাকে, যা বিভিন্ন কমান্ড দিয়ে পাথের নির্দেশনা দেয়।

উদাহরণ:

<path d="M10 10 H 90 V 90 H 10 Z" stroke="black" stroke-width="4" fill="transparent" />

এখানে, M, H, V, Z এসব কমান্ডের মাধ্যমে পাথের রুট নির্ধারণ করা হয়েছে।

SVG Path এর প্রধান কমান্ডসমূহ

1. M (Move To):
   এটি পাথের শুরু পয়েন্ট নির্ধারণ করে। এর পরে যেকোনো নতুন পয়েন্টে পাথ সরানো হয়।

   উদাহরণ:

   M10 10
   

   এখানে, পাথ শুরু হবে (10, 10) পয়েন্টে।

2. L (Line To):
   এটি পাথের বর্তমান অবস্থান থেকে একটি সোজা রেখা আঁকতে ব্যবহৃত হয়, যেখানে নতুন পয়েন্টে চলে যায়।

   উদাহরণ:

   L90 10
   

   এখানে, পাথটি (90, 10) পয়েন্টে যাবে এবং সোজা রেখা তৈরি করবে।

3. H (Horizontal Line To):
   এটি একটি অনুভূমিক রেখা আঁকতে ব্যবহৃত হয়, শুধুমাত্র X অক্ষরের মান পরিবর্তন করা হয়।

   উদাহরণ:

   H90
   

   এখানে, Y অক্ষরের মান অপরিবর্তিত রেখে অনুভূমিকভাবে X অক্ষরে 90 পয়েন্টে যাবে।

4. V (Vertical Line To):
   এটি একটি উল্লম্ব রেখা আঁকতে ব্যবহৃত হয়, শুধুমাত্র Y অক্ষরের মান পরিবর্তন করা হয়।

   উদাহরণ:

   V90
   

   এখানে, X অক্ষরের মান অপরিবর্তিত রেখে উল্লম্বভাবে Y অক্ষরে 90 পয়েন্টে যাবে।

5. C (Cubic Bezier Curve):
   এটি একটি বেজিয়ার কেভের মাধ্যমে একটি নির্দিষ্ট পয়েন্টে যেতে ব্যবহৃত হয়। এর মধ্যে দুটি কন্ট্রোল পয়েন্ট এবং একটি শেষ পয়েন্ট থাকে।

   উদাহরণ:

   C20 20, 40 40, 60 60
   

   এটি (20, 20) এবং (40, 40) কন্ট্রোল পয়েন্ট ব্যবহার করে (60, 60) পয়েন্টে যাবে।

6. S (Smooth Cubic Bezier Curve):
   এটি একটি প্রগতি যুক্ত কেভ তৈরি করতে ব্যবহৃত হয়, যেখানে পূর্বের কন্ট্রোল পয়েন্টকে স্মুথলি ফলো করা হয়।

7. Q (Quadratic Bezier Curve):
   এটি একটি সাধারণ বেজিয়ার কেভ যা দুটি পয়েন্টের মধ্যে সোজা রেখা এবং একটি কন্ট্রোল পয়েন্ট ব্যবহার করে।

   উদাহরণ:

   Q20 20, 40 40
   

   এখানে, (20, 20) কন্ট্রোল পয়েন্টের মাধ্যমে (40, 40) পয়েন্টে চলে যাবে।

8. T (Smooth Quadratic Bezier Curve):
   এটি একটি স্মুথ কেভের মতো কাজ করে যা পূর্বের কন্ট্রোল পয়েন্টকে ফলো করে।

9. A (Arc To):
   এটি একটি আর্ক তৈরি করতে ব্যবহৃত হয়, যেখানে রেডিয়াস, রোটেশন, এবং সেন্টার পয়েন্টসহ আর্কের সকল ডাটা উল্লেখ করতে হয়।

   উদাহরণ:

   A30 30 0 1 0 150 150
   

10. Z (Close Path):
    এটি পাথের শেষ পয়েন্টকে প্রথম পয়েন্টের সাথে সংযুক্ত করে একটি বন্ধ পাথ তৈরি করে।

    উদাহরণ:

    Z
    

SVG Path এর উদাহরণ

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 Z" stroke="black" stroke-width="4" fill="transparent" />
</svg>

এটি একটি বর্গক্ষেত্র তৈরি করবে যার প্রতিটি পাশের দৈর্ঘ্য 80 পিক্সেল।

SVG Path এর ব্যবহার

কাস্টম আকার তৈরি:
এসভিজি Path এর মাধ্যমে আপনি যেকোনো ধরনের কাস্টম আকার বা ডিজাইন তৈরি করতে পারেন, যেমন পলিগন, বেজিয়ার কেভ, এবং অন্যান্য জটিল রূপরেখা।

অ্যানিমেশন:
এসভিজি Path ব্যবহার করে গ্রাফিক্সের মধ্যে অ্যানিমেশন তৈরি করা যায়। CSS বা JavaScript এর মাধ্যমে পাথের অ্যানিমেশন করা যায়, যা ওয়েব পেজের ইন্টারঅ্যাকটিভিটি বাড়ায়।

লোগো এবং আইকন ডিজাইন:
এসভিজি Path ব্যবহার করে ওয়েবসাইট বা অ্যাপের জন্য সুন্দর এবং স্কেলেবল লোগো বা আইকন ডিজাইন করা যায়, যা যেকোনো স্ক্রীনে পরিষ্কার থাকে।

সারাংশ

এসভিজি Path একটি অত্যন্ত শক্তিশালী টুল যা ওয়েব গ্রাফিক্স ডিজাইনে জটিল আকার এবং ডিজাইন তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন ধরনের কমান্ডের মাধ্যমে রেখা, বেজিয়ার কেভ, আর্ক ইত্যাদি তৈরি করার সুযোগ দেয়। এসভিজি Path ওয়েবসাইটে স্কেলেবল এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করতে সহায়ক, যা রেসপন্সিভ ডিজাইন এবং অ্যানিমেশনে কার্যকর।

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 ব্যবহার করে জটিল গ্রাফিক্স ডিজাইন করা যায়। এর মাধ্যমে রেখা, বক্র রেখা, আর্ক এবং অন্যান্য আকৃতি তৈরি করা সম্ভব, যা ওয়েব পেজে অত্যন্ত শক্তিশালী এবং ইন্টারেক্টিভ ডিজাইন তৈরি করতে সাহায্য করে।

এসভিজি (SVG) তে <path> একটি শক্তিশালী ট্যাগ যা জটিল এবং সৃজনশীল গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের রেখা, কেভ, আর্চ, এবং অন্যান্য জ্যামিতিক আকার তৈরি করতে সক্ষম। <path> ট্যাগটি বিশেষভাবে ব্যবহারকারীদের একাধিক পয়েন্ট এবং কেভের মাধ্যমে জটিল আকারের ডিজাইন তৈরিতে সাহায্য করে, যা অন্য কোন সাধারণ শেপ (যেমন বৃত্ত বা আয়তক্ষেত্র) দিয়ে সম্ভব নয়।

<path> ট্যাগের মাধ্যমে গ্রাফিক্স তৈরি করতে d অ্যাট্রিবিউট ব্যবহার করা হয়, যা পাথের ডেটা ধারণ করে। এই ডেটাতে একাধিক কমান্ড এবং পয়েন্ট থাকে যা পাথের আকার, রেখা এবং কেভ নির্ধারণ করে।

Path কমান্ডের মূল ধরণ

Path কমান্ডের মধ্যে কিছু মৌলিক ধরণ থাকে, যা গ্রাফিক্স তৈরির জন্য ব্যবহৃত হয়। এই কমান্ডগুলো হল:

• M (Move to): নতুন পয়েন্টে যাওয়ার জন্য ব্যবহৃত হয়।
• L (Line to): একটি সোজা রেখা আঁকতে ব্যবহৃত হয়।
• H (Horizontal line to): অনুভূমিক রেখা আঁকতে ব্যবহৃত হয়।
• V (Vertical line to): উল্লম্ব রেখা আঁকতে ব্যবহৃত হয়।
• C (Cubic Bezier curve): একটি কিউবিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• S (Smooth cubic Bezier curve): একটি মসৃণ কিউবিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• Q (Quadratic Bezier curve): একটি কোয়াড্রাটিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• T (Smooth quadratic Bezier curve): একটি মসৃণ কোয়াড্রাটিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• A (Elliptical Arc): একটি বৃত্তাকার আর্ক আঁকতে ব্যবহৃত হয়।
• Z (Close path): পাথটি বন্ধ করতে ব্যবহৃত হয়, অর্থাৎ প্রথম পয়েন্টে ফিরে যাওয়া।

Complex Shape তৈরি করতে Path ব্যবহার করা

এখন, আমরা কিছু উদাহরণ দেখে বুঝবো কিভাবে d অ্যাট্রিবিউট ব্যবহার করে জটিল আকার তৈরি করা যায়।

উদাহরণ ১: একটি ট্রায়াঙ্গেল (Triangle)

একটি ট্রায়াঙ্গেল তৈরি করতে <path> ট্যাগের মাধ্যমে তিনটি পয়েন্টে সোজা রেখা আঁকতে হবে।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 50 150 L 150 150 L 100 50 Z" stroke="black" stroke-width="2" fill="lightgreen" />
</svg>

• M 50 150: পাথের শুরু পয়েন্ট (50, 150) তে গমন।
• L 150 150: সোজা রেখা আঁকুন (150, 150) পয়েন্টে।
• L 100 50: সোজা রেখা আঁকুন (100, 50) পয়েন্টে।
• Z: পাথটি বন্ধ করুন, অর্থাৎ প্রথম পয়েন্টে ফিরে যান।

উদাহরণ ২: কিউবিক বেজিয়ার কেভ (Cubic Bezier Curve)

একটি কিউবিক বেজিয়ার কেভ তৈরি করতে C কমান্ড ব্যবহার করা হয়।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="blue" stroke-width="2" fill="transparent" />
</svg>

• M 10 80: শুরু পয়েন্ট (10, 80)।
• C 40 10, 65 10, 95 80: কিউবিক বেজিয়ার কেভের জন্য তিনটি পয়েন্ট দেয়া হয়েছে, যা কেভের আকার নির্ধারণ করে।
• S 150 150, 180 80: দ্বিতীয় কেভটি একটি মসৃণ কিউবিক বেজিয়ার কেভ হিসেবে তৈরি হয়েছে।

উদাহরণ ৩: কোয়াড্রাটিক বেজিয়ার কেভ (Quadratic Bezier Curve)

কোয়াড্রাটিক বেজিয়ার কেভ তৈরি করতে Q কমান্ড ব্যবহার করা হয়।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 Q 95 10, 180 80" stroke="red" stroke-width="2" fill="transparent" />
</svg>

• M 10 80: শুরু পয়েন্ট (10, 80)।
• Q 95 10, 180 80: একটি কোয়াড্রাটিক বেজিয়ার কেভ তৈরি হয়েছে, যেখানে (95, 10) হল কন্ট্রোল পয়েন্ট এবং (180, 80) হল শেষ পয়েন্ট।

উদাহরণ ৪: বৃত্তাকার আর্ক (Elliptical Arc)

বৃত্তাকার আর্ক তৈরি করতে A কমান্ড ব্যবহার করা হয়।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 A 50 50 0 0 1 150 80" stroke="green" stroke-width="2" fill="transparent" />
</svg>

• M 10 80: শুরু পয়েন্ট (10, 80)।
• A 50 50 0 0 1 150 80: একটি বৃত্তাকার আর্ক আঁকা হয়েছে, যার রেডিয়াস ৫০ এবং শেষ পয়েন্ট (150, 80)।

Path Transformations

পাথের বিভিন্ন অংশে রূপান্তর (Transformation) প্রয়োগ করা যায়। এর জন্য transform অ্যাট্রিবিউট ব্যবহার করা হয়। এর মধ্যে রয়েছে:

• rotate(): আকারটি ঘোরানো।
• scale(): আকারের সাইজ পরিবর্তন করা।
• translate(): পাথটি স্থানান্তর করা।
• skewX() / skewY(): আকারটি খাড়া বা অনুভূমিকভাবে ভাঁজ করা।

উদাহরণ:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 C 40 10, 65 10, 95 80" stroke="blue" stroke-width="2" fill="transparent" transform="rotate(45 95 80)" />
</svg>

এখানে পাথটি 45 ডিগ্রি ঘুরানো হয়েছে (কেন্দ্র (95, 80))।

সারাংশ

এসভিজি তে <path> ট্যাগ ব্যবহার করে খুবই জটিল এবং সৃজনশীল আকার তৈরি করা যায়। পাথ কমান্ডগুলির মাধ্যমে গ্রাফিক্সের বিভিন্ন ধরনের রেখা, কেভ, আর্চ এবং বিভিন্ন আকার আঁকা সম্ভব। এই ট্যাগের শক্তিশালী ক্ষমতা ওয়েব ডিজাইন, অ্যানিমেশন, এবং অন্যান্য গ্রাফিক্সের জন্য অত্যন্ত কার্যকরী।

SVG এর একটি গুরুত্বপূর্ণ উপাদান হলো path। এটি একটি খুবই শক্তিশালী ট্যাগ যা সোজা রেখা, বৃত্ত, কোণ এবং অন্যান্য যেকোনো আকৃতি তৈরি করতে ব্যবহৃত হয়। পাথ দিয়ে বিভিন্ন জটিল আকার তৈরি করা সম্ভব, যেমন স্যরিপ, কার্ভ ইত্যাদি। পাথের স্টাইলিং এবং ট্রান্সফর্মেশন করা যায় CSS এবং জাভাস্ক্রিপ্টের মাধ্যমে।

Path এর স্টাইলিং

SVG এর path ট্যাগ দিয়ে বিভিন্ন ধরনের গ্রাফিক্যাল উপাদান তৈরি করা হয়। path ট্যাগের মাধ্যমে ভিন্ন ধরনের আকৃতি তৈরি করা সম্ভব, এবং এই আকৃতির স্টাইলিংও করা যায়।

প্রধান স্টাইলিং এট্রিবিউটস:

1. stroke: পাথের বাইরের বর্ডার বা প্রান্তের রঙ নির্ধারণ করে।
   • উদাহরণ: stroke="black"
2. fill: পাথের ভিতরের অংশের রঙ নির্ধারণ করে।
   • উদাহরণ: fill="red"
3. stroke-width: পাথের বর্ডারের প্রস্থ নির্ধারণ করে।
   • উদাহরণ: stroke-width="5"
4. stroke-dasharray: পাথের বর্ডারে ড্যাশ বা ডট তৈরি করতে ব্যবহৃত হয়।
   • উদাহরণ: stroke-dasharray="5, 5" (ড্যাশের দৈর্ঘ্য ৫ পিক্সেল এবং দুরত্বও ৫ পিক্সেল)
5. stroke-linecap: পাথের শেষ প্রান্তের আকার নির্ধারণ করে।
   • উদাহরণ: stroke-linecap="round" (গোলাকার প্রান্ত)
6. stroke-linejoin: পাথের কোণগুলির আকার নির্ধারণ করে।
   • উদাহরণ: stroke-linejoin="round" (গোলাকার কোণ)

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 10 H 90 V 90 H 10 Z" fill="red" stroke="black" stroke-width="3" />
</svg>

এখানে, M 10 10 H 90 V 90 H 10 Z পাথটি একটি বর্গাকার আকৃতি তৈরি করছে, যার ভিতরের অংশে লাল রঙ এবং বাইরের প্রান্তে কালো রঙের বর্ডার রয়েছে।

Path Transformations

SVG এর path ট্যাগের উপর transformation প্রক্রিয়াগুলি দিয়ে গ্রাফিক্সকে স্থানান্তর (translation), ঘূর্ণন (rotation), মাপ পরিবর্তন (scaling) এবং পরিপথে (skewing) পরিবর্তন করা যায়। এসব ট্রান্সফর্মেশন CSS বা SVG ট্রান্সফর্ম অ্যাট্রিবিউট দিয়ে করা সম্ভব।

প্রধান ট্রান্সফর্মেশন এট্রিবিউটস:

1. translate(): পাথের অবস্থান স্থানান্তরিত করতে ব্যবহৃত হয়।
   • উদাহরণ: transform="translate(50, 50)" (50 পিক্সেল উল্লম্ব এবং অনুভূমিক স্থানান্তর)
2. rotate(): পাথের চারপাশে ঘূর্ণন তৈরি করে।
   • উদাহরণ: transform="rotate(45)" (পাথটি 45 ডিগ্রী ঘুরবে)
3. scale(): পাথের আকার বড় বা ছোট করতে ব্যবহৃত হয়।
   • উদাহরণ: transform="scale(2)" (পাথটি দ্বিগুণ আকারে পরিবর্তিত হবে)
4. skewX() এবং skewY(): পাথের আকৃতিকে অনুভূমিক বা উল্লম্বভাবে বিকৃত করে।
   • উদাহরণ: transform="skewX(30)" (আকৃতিটি অনুভূমিকভাবে 30 ডিগ্রি বিকৃত হবে)
5. matrix(): একাধিক ট্রান্সফর্মেশন একসাথে প্রয়োগ করতে ব্যবহৃত হয়।
   • উদাহরণ: transform="matrix(1, 0, 0, 1, 50, 50)" (একসাথে স্থানান্তর এবং স্কেলিং)

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 10 H 90 V 90 H 10 Z" fill="red" stroke="black" stroke-width="3" transform="rotate(45 50 50)" />
</svg>

এখানে, পাথটি 45 ডিগ্রী ঘুরানো হয়েছে, যেখানে (50 50) হল ঘূর্ণনের কেন্দ্র।

সারাংশ

এসভিজি path ট্যাগের মাধ্যমে বিভিন্ন আকৃতি তৈরি করা যায় এবং সেই আকৃতির স্টাইলিং এবং ট্রান্সফর্মেশন CSS বা SVG এট্রিবিউটস ব্যবহার করে করা হয়। path স্টাইলিং এবং ট্রান্সফর্মেশন ওয়েব ডিজাইনে অত্যন্ত কার্যকরী হতে পারে, বিশেষ করে জটিল এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করতে।