এইচটিএমএল৫ এসভিজি - HTML5 SVG


এসভিজি কি?


<svg> এলিমেন্ট

এইচটিএমএল <svg> এলিমেন্ট হল এসভিজি গ্রাফিক্সের জন্য একটি ধারক বা container. বক্স, বৃত্ত, টেক্সট বা কোন গ্রাফিক্সের ছবি যুক্ত করার জন্য এসভিজির বিভিন্ন মেথড রয়েছে।


ব্রাউজার সাপোর্ট

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে <svg> এলিমেন্ট সমর্থন বা support করে।

এলিমেন্ট
<svg> 4.0 9.0 3.0 3.2 10.1


SVG বৃত্ত

নিচে একটি উদাহরন দেখুন, যেখানে svg ব্যবহার করে একটি বৃত্ত অংকন করা হয়েছে।

উদাহরণ


<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

কোড এডিটর



SVG আয়তক্ষেত্র

নিচে একটি উদাহরন দেখুন, যেখানে svg ব্যবহার করে একটি আয়তক্ষেত্র অংকন করা হয়েছে।

উদাহরণ


<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

কোড এডিটর



SVG গোলাকার আয়তক্ষেত্র

নিচে একটি উদাহরন দেখুন, যেখানে svg ব্যবহার করে একটি গোলাকার আয়তক্ষেত্র অংকন করা হয়েছে।

উদাহরণ


<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" />
</svg>

কোড এডিটর



SVG Star

নিচে একটি উদাহরন দেখুন, যেখানে svg ব্যবহার করে একটি তারকা বা Star অংকন করা হয়েছে।

উদাহরণ


<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;" />
</svg>

কোড এডিটর



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

নিচে একটি উদাহরন দেখুন, যেখানে svg ব্যবহার করে একটি logo তৈরি করা হয়েছে।

SVG Sorry, your browser does not support inline SVG.

উদাহরণ


<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>

কোড এডিটর