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

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