SVG এর মৌলিক আকার তৈরি

এসভিজি (Scalable Vector Graphics) এর মাধ্যমে ওয়েব পেজে বিভিন্ন ধরনের ভেক্টর গ্রাফিক্স তৈরি করা যায়। এসভিজি ফাইল XML ভিত্তিক, যার মাধ্যমে আপনি সহজেই চিত্র, রেখা, বৃত্ত, আয়তক্ষেত্র, পলিগন ইত্যাদি গ্রাফিক্স তৈরি করতে পারেন। এই টিউটোরিয়ালে আমরা এসভিজির মাধ্যমে কিছু মৌলিক আকার তৈরি করার প্রক্রিয়া দেখব।

এসভিজি ফাইলের মৌলিক কাঠামো

এসভিজি ফাইল একটি সাধারণ XML ফাইল। একটি মৌলিক এসভিজি ফাইলের কাঠামো নিচের মতো দেখাবে:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <!-- এখানে আপনার গ্রাফিক্স কোড থাকবে -->
</svg>

এখানে:

• xmlns হলো XML নেমস্পেস, যা এসভিজি কোডকে XML ফাইল হিসেবে সনাক্ত করে।
• width এবং height হলো চিত্রটির আকার বা মাত্রা (প্রস্থ এবং উচ্চতা), যা পিক্সেলে নির্ধারণ করা হয়।

মৌলিক আকার তৈরি

এখানে কিছু মৌলিক গ্রাফিক্সের উদাহরণ দেওয়া হল যা এসভিজি দিয়ে তৈরি করা যেতে পারে:

রেখা (Line)

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <line x1="50" y1="50" x2="200" y2="200" stroke="black" stroke-width="2"/>
</svg>

এখানে:

• x1 ও y1 হলো রেখার শুরু বিন্দু।
• x2 ও y2 হলো রেখার শেষ বিন্দু।
• stroke হলো রেখার রঙ এবং stroke-width হলো রেখার প্রস্থ।

বৃত্ত (Circle)

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red"/>
</svg>

এখানে:

• cx এবং cy হলো বৃত্তটির কেন্দ্রবিন্দু (x ও y অবস্থান)।
• r হলো বৃত্তটির ব্যাসার্ধ (radius)।
• fill হলো বৃত্তটির পূর্ণরঙ (color) এবং stroke হলো বৃত্তের প্রান্তরেখার রঙ।

আয়তক্ষেত্র (Rectangle)

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <rect x="50" y="50" width="150" height="100" stroke="black" stroke-width="2" fill="blue"/>
</svg>

এখানে:

• x এবং y হলো আয়তক্ষেত্রটির উপরের বাম কোণের অবস্থান।
• width এবং height হলো আয়তক্ষেত্রটির প্রস্থ ও উচ্চতা।
• fill হলো আয়তক্ষেত্রের পূর্ণরঙ এবং stroke হলো আয়তক্ষেত্রের প্রান্তরেখার রঙ।

পলিগন (Polygon)

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <polygon points="50,150 150,150 100,50" stroke="black" stroke-width="2" fill="green"/>
</svg>

এখানে:

• points হলো পলিগনের কোণগুলির অবস্থান, যা একে অপরের সাথে সংযুক্ত থাকে।
• fill হলো পলিগনের পূর্ণরঙ এবং stroke হলো পলিগনের প্রান্তরেখার রঙ।

সারাংশ

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

এসভিজি (SVG) ফাইলের মধ্যে বিভিন্ন ধরনের গ্রাফিক্স তৈরি করতে ব্যবহার করা হয় কিছু মৌলিক ট্যাগ। এই ট্যাগগুলি বিভিন্ন ভেক্টর শেপ (যেমন বৃত্ত, আয়তক্ষেত্র, রেখা, পলিলাইন, পলিগন) তৈরি করার জন্য ব্যবহৃত হয়। নিচে এসভিজির এই প্রধান ট্যাগগুলোর ব্যাখ্যা দেওয়া হলো এবং এগুলির ব্যবহারের উদাহরণ দেওয়া হয়েছে।

<circle> ট্যাগ

<circle> ট্যাগের মাধ্যমে একটি বৃত্ত (circle) তৈরি করা হয়। এটি সাধারণত একটি কেন্দ্রে নির্দিষ্ট ব্যাসার্ধের বৃত্ত আঁকতে ব্যবহৃত হয়।

ব্যবহার:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" />
</svg>

ব্যাখ্যা:

• cx ও cy: বৃত্তের কেন্দ্রের X ও Y অবস্থান নির্ধারণ করে।
• r: বৃত্তের ব্যাসার্ধ (radius)।
• stroke: বৃত্তের বর্ডারের রং।
• stroke-width: বর্ডারের প্রস্থ।
• fill: বৃত্তের অভ্যন্তরের রং।

<rect> ট্যাগ

<rect> ট্যাগের মাধ্যমে একটি আয়তক্ষেত্র (rectangle) তৈরি করা হয়। এটি দৈর্ঘ্য ও প্রস্থ নির্ধারণ করে একটি আয়তক্ষেত্র আঁকতে ব্যবহৃত হয়।

ব্যবহার:

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="80" stroke="blue" stroke-width="4" fill="yellow" />
</svg>

ব্যাখ্যা:

• x ও y: আয়তক্ষেত্রের উপরের বাম কোণার X ও Y অবস্থান।
• width ও height: আয়তক্ষেত্রের প্রস্থ এবং উচ্চতা।
• stroke: আয়তক্ষেত্রের বর্ডারের রং।
• stroke-width: বর্ডারের প্রস্থ।
• fill: আয়তক্ষেত্রের অভ্যন্তরের রং।

<line> ট্যাগ

<line> ট্যাগের মাধ্যমে একটি সোজা রেখা (line) আঁকা হয়। এটি দুটি পয়েন্টের মধ্যে রেখা তৈরি করে।

ব্যবহার:

<svg width="200" height="200">
  <line x1="10" y1="10" x2="190" y2="190" stroke="green" stroke-width="2" />
</svg>

ব্যাখ্যা:

• x1 ও y1: রেখার প্রথম পয়েন্টের X ও Y অবস্থান।
• x2 ও y2: রেখার দ্বিতীয় পয়েন্টের X ও Y অবস্থান।
• stroke: রেখার রং।
• stroke-width: রেখার প্রস্থ।

<polyline> ট্যাগ

<polyline> ট্যাগের মাধ্যমে একাধিক সংযুক্ত রেখা (connected lines) তৈরি করা হয়, যাকে পলিলাইন বলা হয়। এটি একাধিক পয়েন্টের মাধ্যমে একটি আঁকাবাঁকা রেখা তৈরি করে।

ব্যবহার:

<svg width="200" height="200">
  <polyline points="50,150 100,50 150,150" stroke="purple" stroke-width="3" fill="none" />
</svg>

ব্যাখ্যা:

• points: একাধিক পয়েন্টের তালিকা, যেখানে প্রতিটি পয়েন্টের X ও Y মান দিয়ে রেখাগুলি সংযুক্ত করা হয়।
• stroke: রেখার রং।
• stroke-width: রেখার প্রস্থ।
• fill: অভ্যন্তরের রং (এখানে "none" ব্যবহার করা হয়েছে, কারণ পলিলাইনে কোনো পূর্ণতা নেই)।

<polygon> ট্যাগ

<polygon> ট্যাগের মাধ্যমে একটি বহুভুজ (polygon) আঁকা হয়, যা একাধিক পয়েন্টের মাধ্যমে তৈরি হয়। পলিগন চিত্রে সাধারণত অনেকগুলো সোজা রেখা যুক্ত থাকে যা একটি ঘেরাবন্ধ গঠন তৈরি করে।

ব্যবহার:

<svg width="200" height="200">
  <polygon points="100,10 40,180 190,60 10,60 160,180" stroke="orange" stroke-width="4" fill="blue" />
</svg>

ব্যাখ্যা:

• points: একাধিক পয়েন্টের তালিকা যা পলিগনের কোণগুলির অবস্থান নির্দেশ করে।
• stroke: পলিগনের বর্ডারের রং।
• stroke-width: বর্ডারের প্রস্থ।
• fill: পলিগনের অভ্যন্তরের রং।

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

এসভিজি (SVG) ফরম্যাটে বিভিন্ন মৌলিক আকার (যেমন, বৃত্ত, আয়তক্ষেত্র, রেখা, পাথ, ইত্যাদি) তৈরি করা হয় এবং এগুলোর জন্য বিশেষ এট্রিবিউট (attributes) এবং স্টাইলিং (styling) প্রদান করা হয়। এসভিজি চিত্রগুলো XML কোডে লেখা হয়, যার মাধ্যমে প্রতিটি উপাদান (এলিমেন্ট) নির্দিষ্ট আকার, রঙ, আচ্ছাদন, ইত্যাদি বৈশিষ্ট্য নির্ধারণ করা হয়।

মৌলিক আকার এবং তাদের এট্রিবিউট

এসভিজি ফরম্যাটে বিভিন্ন মৌলিক আকার তৈরি করতে কিছু সাধারণ এট্রিবিউট ব্যবহার করা হয়:

বৃত্ত (Circle)

বৃত্ত তৈরি করতে <circle> ট্যাগ ব্যবহার করা হয়। এর কয়েকটি সাধারণ এট্রিবিউট হলো:

• cx: বৃত্তের কেন্দ্রের অনুভূমিক স্থান।
• cy: বৃত্তের কেন্দ্রের উল্লম্ব স্থান।
• r: বৃত্তের ব্যাসার্ধ (radius)।
• fill: বৃত্তের রঙ।
• stroke: বৃত্তের আউটলাইন (বর্ডার) রঙ।
• stroke-width: বর্ডারের প্রস্থ।

উদাহরণ:

<circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2" />

আয়তক্ষেত্র (Rectangle)

আয়তক্ষেত্র তৈরি করতে <rect> ট্যাগ ব্যবহার করা হয়। এর কয়েকটি সাধারণ এট্রিবিউট হলো:

• x: আয়তক্ষেত্রের বাম পাশের অনুভূমিক স্থান।
• y: আয়তক্ষেত্রের উপরের পাশের উল্লম্ব স্থান।
• width: আয়তক্ষেত্রের প্রস্থ।
• height: আয়তক্ষেত্রের উচ্চতা।
• fill: আয়তক্ষেত্রের রঙ।
• stroke: আউটলাইন রঙ।
• stroke-width: আউটলাইন প্রস্থ।

উদাহরণ:

<rect x="10" y="10" width="100" height="50" fill="red" stroke="black" stroke-width="2" />

রেখা (Line)

রেখা তৈরি করতে <line> ট্যাগ ব্যবহার করা হয়। এর কয়েকটি সাধারণ এট্রিবিউট হলো:

• x1: রেখার শুরু পয়েন্টের অনুভূমিক স্থান।
• y1: রেখার শুরু পয়েন্টের উল্লম্ব স্থান।
• x2: রেখার শেষ পয়েন্টের অনুভূমিক স্থান।
• y2: রেখার শেষ পয়েন্টের উল্লম্ব স্থান।
• stroke: রেখার রঙ।
• stroke-width: রেখার প্রস্থ।

উদাহরণ:

<line x1="10" y1="10" x2="100" y2="100" stroke="green" stroke-width="2" />

পাথ (Path)

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

• d: পাথের ডেটা, যেখানে বিভিন্ন কমান্ড যেমন "M" (move), "L" (line), "C" (curve) ইত্যাদি ব্যবহার করা হয়।
• fill: পাথের ভেতরের রঙ।
• stroke: পাথের বর্ডার রঙ।
• stroke-width: পাথের বর্ডারের প্রস্থ।

উদাহরণ:

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

এসভিজি স্টাইলিং

এসভিজি উপাদানগুলোর স্টাইলিং করার জন্য দুটি প্রধান পদ্ধতি আছে:

Inline স্টাইলিং

এসভিজি উপাদানগুলোর জন্য সরাসরি style অ্যাট্রিবিউট ব্যবহার করা যায়, যা CSS (Cascading Style Sheets) এর মতো কাজ করে।

উদাহরণ:

<circle cx="50" cy="50" r="40" style="fill: blue; stroke: black; stroke-width: 2;" />

External বা Internal CSS

এসভিজি তে বাইরের CSS ফাইল বা ইনলাইন স্টাইল শীট ব্যবহার করা যায়। এই পদ্ধতিতে স্টাইলগুলি একটি আলাদা ব্লকে বা ফাইলে সংজ্ঞায়িত করা হয় এবং এসভিজি উপাদানে তা রেফারেন্স করা হয়।

উদাহরণ:

<style>
  .mycircle {
    fill: blue;
    stroke: black;
    stroke-width: 2;
  }
</style>

<circle cx="50" cy="50" r="40" class="mycircle" />

সারাংশ

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

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

SVG Shapes এর প্রাথমিক শেপগুলো

১. রেকটেঙ্গল (Rectangle)
এটি একটি আয়তাকার শেপ যা rect ট্যাগ দিয়ে তৈরি করা হয়।

২. সার্কেল (Circle)
এটি একটি বৃত্তাকার শেপ যা circle ট্যাগ দিয়ে তৈরি করা হয়।

৩. এলিপ্স (Ellipse)
এটি একটি এলিপ্স শেপ যা ellipse ট্যাগ দিয়ে তৈরি করা হয়।

৪. লাইন (Line)
এটি দুটি পয়েন্টের মধ্যে একটি সরলরেখা তৈরি করে, যা line ট্যাগ দিয়ে তৈরি হয়।

৫. পলিগন (Polygon)
এটি অনেকটি সোজা রেখার মাধ্যমে গঠিত একটি বহুস্তরীয় শেপ, যা polygon ট্যাগ দিয়ে তৈরি হয়।

৬. পাথ (Path)
এটি একটি কাস্টম শেপ তৈরি করার জন্য ব্যবহৃত হয়, যা path ট্যাগ দিয়ে তৈরি হয়। এটি জটিল শেপ তৈরির জন্য সবচেয়ে বেশি ব্যবহৃত হয়।

SVG Shapes ব্যবহার করে ছবি তৈরি করা

এখানে কিছু সহজ উদাহরণ দেয়া হলো, যেগুলোর মাধ্যমে এসভিজি শেপগুলি ব্যবহার করে ছবি তৈরি করা যায়।

১. রেকটেঙ্গল (Rectangle) দিয়ে ছবি তৈরি

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="blue" />
</svg>

এটি একটি নীল রঙের ১০০x১০০ পিক্সেলের আয়তক্ষেত্র তৈরি করবে, যেটি ১০, ১০ পিক্সেল পজিশনে থাকবে।

২. সার্কেল (Circle) দিয়ে ছবি তৈরি

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

এটি একটি লাল রঙের বৃত্ত তৈরি করবে, যার কেন্দ্র (100, 100) এবং ব্যাসার্ধ হবে ৫০ পিক্সেল।

৩. এলিপ্স (Ellipse) দিয়ে ছবি তৈরি

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="green" />
</svg>

এটি একটি সবুজ রঙের এলিপ্স তৈরি করবে, যার কেন্দ্র (100, 100) এবং অনুভূমিক রেডিয়াস ৮০ পিক্সেল এবং উল্লম্ব রেডিয়াস ৫০ পিক্সেল।

৪. লাইন (Line) দিয়ে ছবি তৈরি

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="150" y2="150" stroke="black" stroke-width="2" />
</svg>

এটি একটি সোজা কালো রঙের লাইন তৈরি করবে, যেটি (10, 10) থেকে (150, 150) পজিশনে যাবে।

৫. পলিগন (Polygon) দিয়ে ছবি তৈরি

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,150 150,150 100,50" fill="orange" />
</svg>

এটি একটি কমলা রঙের ত্রিভুজ (পলিগন) তৈরি করবে, যার তিনটি কোণ হবে (50,150), (150,150), এবং (100,50) পজিশনে।

৬. পাথ (Path) দিয়ে ছবি তৈরি

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

এটি একটি বেগুনি রঙের চতুর্ভুজ তৈরি করবে, যেখানে M পয়েন্টের অবস্থান নির্দেশ করে, H অনুভূমিক রেখা এবং V উল্লম্ব রেখা নির্দেশ করে।

একাধিক Shapes একত্রিত করে ছবি তৈরি

এসভিজি শেপগুলি একত্রিত করে আরও জটিল ছবি তৈরি করা যায়। উদাহরণস্বরূপ, একটি বাড়ির চিত্র তৈরি করতে আপনি বিভিন্ন শেপ ব্যবহার করতে পারেন:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- বাড়ির বডি -->
  <rect x="50" y="80" width="100" height="80" fill="brown" />
  <!-- ছাদ -->
  <polygon points="50,80 100,30 150,80" fill="red" />
  <!-- দরজা -->
  <rect x="90" y="120" width="20" height="40" fill="yellow" />
  <!-- জানালা -->
  <rect x="60" y="100" width="20" height="20" fill="blue" />
  <rect x="120" y="100" width="20" height="20" fill="blue" />
</svg>

এটি একটি বাড়ির সাদৃশ্য তৈরি করবে, যার মধ্যে রয়েছে একটি বর্গাকার বডি, একটি ত্রিভুজাকার ছাদ, একটি দরজা এবং দুটি জানালা।

সারাংশ

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

এসভিজি (Scalable Vector Graphics) ফরম্যাটে গ্রাফিক্সের চিত্র তৈরি করতে নানা ধরনের এট্রিবিউট ব্যবহার করা হয়। এর মধ্যে Fill, Stroke, এবং Stroke-width তিনটি গুরুত্বপূর্ণ এট্রিবিউট যা চিত্রের রঙ, বর্ডার, এবং প্রস্থ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এই তিনটি এট্রিবিউটের সাহায্যে আপনি গ্রাফিক্সের স্টাইল কাস্টমাইজ করতে পারেন।

Fill এট্রিবিউট

Fill এট্রিবিউটটি এসভিজি উপাদানের ভেতরের অংশের রঙ নির্ধারণ করে। এটি মূলত চিত্রের পটভূমি বা পূর্ণ অংশের রঙ কনফিগার করে।

ব্যবহার:

• fill দিয়ে আপনি গ্রাফিক্যাল উপাদানের ভেতরের রঙ নির্বাচন করতে পারেন।
• আপনি এখানে সিএসএস রঙের নাম, হেক্সাডেসিমাল রঙ, RGB, RGBA ইত্যাদি ব্যবহার করতে পারেন।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

এখানে, <circle> উপাদানের ভেতরের অংশটি লাল (red) রঙে পূর্ণ হবে।

Stroke এট্রিবিউট

Stroke এট্রিবিউটটি এসভিজি উপাদানের প্রান্ত বা বর্ডারের রঙ নির্ধারণ করে। এটি একটি রেখার বা আকৃতির বাইরের সীমারেখার রঙ চয়েস করতে ব্যবহৃত হয়।

ব্যবহার:

• stroke দিয়ে আপনি যে কোনো গ্রাফিক্যাল উপাদানের প্রান্তের রঙ নির্ধারণ করতে পারেন।
• এই এট্রিবিউটেও আপনি সিএসএস রঙের নাম, হেক্সাডেসিমাল রঙ, RGB, RGBA ইত্যাদি ব্যবহার করতে পারেন।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="yellow" stroke="black" />
</svg>

এখানে, <circle> এর ভেতরের অংশটি হলুদ (yellow) রঙে পূর্ণ হবে এবং বর্ডার হবে কালো (black)।

Stroke-width এট্রিবিউট

Stroke-width এট্রিবিউটটি এসভিজি উপাদানের প্রান্তের প্রস্থ নির্ধারণ করে। এটি ব্যবহার করে আপনি একটি রেখার বা আকৃতির বর্ডারের প্রস্থ নির্ধারণ করতে পারেন।

ব্যবহার:

• stroke-width দিয়ে আপনি বর্ডারের প্রস্থ বা thickness নিয়ন্ত্রণ করতে পারেন। এটি পিক্সেলে নির্ধারিত হয়।
• এর মান সাধারণত একটি সাঙ্ঘাতিক সংখ্যা (যেমন 2, 5, 10, ইত্যাদি) হিসেবে দেওয়া হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="green" stroke="black" stroke-width="4" />
</svg>

এখানে, <circle> এর প্রান্তের প্রস্থ হবে ৪ পিক্সেল (4px), এবং বর্ডারের রঙ হবে কালো (black)।

একসাথে Fill, Stroke, এবং Stroke-width এর ব্যবহার

এই তিনটি এট্রিবিউট একসাথে ব্যবহার করে আপনি একটি গ্রাফিক্সের ভেতরের রঙ, বাইরের বর্ডার রঙ এবং বর্ডারের প্রস্থ কাস্টমাইজ করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে তিনটি এট্রিবিউট একসাথে ব্যবহার করা হয়েছে:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="blue" stroke="red" stroke-width="5" />
</svg>

এখানে:

• <rect> উপাদানের ভেতরের অংশ নীল (blue) রঙে পূর্ণ হবে।
• প্রান্তের রঙ হবে লাল (red) এবং প্রস্থ হবে ৫ পিক্সেল (5px)।

সারাংশ

• Fill: এসভিজি উপাদানের ভেতরের রঙ নির্ধারণ করে।
• Stroke: এসভিজি উপাদানের বাইরের প্রান্তের রঙ নির্ধারণ করে।
• Stroke-width: এসভিজি উপাদানের প্রান্তের প্রস্থ বা thickness নির্ধারণ করে।

এসভিজি চিত্রে এই তিনটি এট্রিবিউট ব্যবহার করে আপনি চিত্রের স্টাইল অত্যন্ত কাস্টমাইজডভাবে তৈরি করতে পারবেন, যা ডিজাইনে খুবই কার্যকর।