X

X

X

HTML5 স্কেলেবল ভেক্টর গ্রাফিক্স


SVG বলতে কি বোঝায়?

  • SVG এর পুরো অর্থ Scalable Vector Graphics
  • ওয়েব পেজে গ্রাফিক্স অবজেক্ট তৈরি করার জন্য SVG ব্যবহৃত হয়।
  • SVG W3C অনুমোদিত এবং সুপারিশকৃত।

HTML <svg> ইলামেন্ট

HTML <svg> ‌ইলামেন্ট SVG গ্রাফিক্স অবজেক্টের কন্টেইনার।

SVG দিয়ে বিভিন্ন উপায়ে রেখা, বক্স, বৃত্ত, টেক্সট এবং ছবি অংকন করা যায়।


Browser সাপোর্ট

নিচে SVG সাপোর্ট করে এমন ব্রাউজারের সর্বনিম্ন ভার্শনগুলো উল্লেখ্য করা হলো। অর্থাৎ, এসব ব্রাউজারে এই ভার্শনগুলো থেকে পরবর্তী ভার্শনে SVG সাপোর্ট করে।

Element
<svg> 4.0 9.0 3.0 3.2 10.1

SVG দিয়ে বৃত্ত অংকন

Code Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


SVG দিয়ে আয়তক্ষেত্র অংকন

Code Example

<svg width="400" height="100">
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


SVG দিয়ে বৃত্তাকার কোনো বিশিষ্ট আয়তক্ষেত্র অংকন

Code Example

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


SVG দিয়ে তারকা অংকন

Code Example

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


SVG দিয়ে লোগো অংকন

SVG দু:খিত! আপনার ব্রাউজার ইনলাইন SVG সাপোর্ট করে না।

Code Example

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


SVG এবং Canvas এর মধ্যে পার্থক্য

XML দিয়ে দ্বিমাত্রিক গ্রাফিক্স অবজেক্ট তৈরি করার জন্য SVG ব্যবহার করা হয়। অর্থাৎ, SVG XML ফরম্যাট এ লিখা হয়।

ক্যানভাস জাভাস্ক্রিপ্ট দিয়ে দ্বিমাত্রিক গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়।

SVG XML এর ভিত্তি করে তৈরি। অর্থাৎ, এর প্রতিটি ইলামেন্টে DOM সাপোর্ট রয়েছে। যার কারণে এর বিভিন্ন উপাদানে জাভাস্ক্রিপ্ট ইভেন্ট যুক্ত করা যায়। SVG এর প্রতিটি ইলামেন্টকে পৃথক পৃথক অবজেক্ট হিসেবে বিবেচিত। সুতরাং, যদি ব্রাউজারে দৃশ্যমান এরিয়ার আকারের পরিবর্তন হয়, তবে গ্রাফিক্স ইলামেন্টগুলো স্বয়ংক্রিয়ভাবে নতুন করে তৈরি হয়।

ক্যানভাস পিক্সেল X পিক্সেল আকারে অবজেক্ট তৈরি করে। যখন এটি ব্রাউজারে একবার তৈরি হয়ে যায়, তখন ব্রাউজার এর উপর আর কোনো নিয়ন্ত্রণ রাখে না। এটি তখন একটি স্থির গ্রাফিক্স হিসেবে বিবেচিত হয়।


Canvas এবং SVG এর মধ্যে তুলনা

নিচে Canvas এবং SVG এর মধ্যে কিছু পার্থক্য উল্লেখ্য করা হলো:

Canvas SVG
  • রেজ্যুলেশন এর নির্ভরশীল।
  • ইভেন্ট যুক্ত করা যায় না।
  • টেক্সট ভালোভাবে উপস্থাপিত হয় না।
  • তৈরি ইমেজটিকে আপনি .png অথবা .jpg আকারে সেভ করতে পারবেন।
  • গেম তৈরি করার জন্য এটি উপযুক্ত।
  • রেজ্যুলেশন এর উপর নির্ভরশীল নয়।
  • ইভেন্ট হ্যান্ডলার সাপোর্ট করে।
  • (Google Maps) এর মত বড় আকারের এপ্লিকেশন তৈরি করার জন্য SVG ব্যবহৃত হয়।
  • যদি অনেকগুলো DOM ইলামেন্ট থাকে তবে রেন্ডারিং একটু ধীরগতির হয়।
  • গেম তৈরির ক্ষেত্রে উপযুক্ত নয়।

বিস্তারিত জানার জন্য SVG Tutorial লিংকটি অনুসরণ করুন।