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



এসভিজি কি?

এসভিজি এর পূর্ণরুপ হল Scalable Vector Graphics,
ওয়েব এ গ্রাফিক্স নির্ধারণ করতে এসভিজি ব্যবহার করা হয়,
এসভিজি, W3C করতিক সমর্থিত।


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




ক্যানভাস এবং SVG এর পার্থক্য

এসভিজি হল দ্বি মাত্রিক গ্রাফিক্সকে এক্সএমএল এ বর্ণনা করার একটি ভাষা এর ক্যানভাস হল জাভাস্ক্রিপ্ট ব্যবহার করে দ্বি মাত্রিক গ্রাফিক্স অংকন করার একটি পদ্ধতি।

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







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

Copyright 2016-2018 by websschool.com, All Rights Reserved.