এসভিজি বনাম ক্যানভাস

আপনার ওয়াইল্ড-টেক-ওয়াই জীবনের কোনও পর্যায়ে আপনাকে একটি অ্যানিমেশন ব্যবহার করতে হয়েছিল। এর জটিলতা অনুসারে, আপনি জটিল এসভিজি বা ক্যানভাস অ্যানিমেশনগুলি সাধারণ সিএসএস বা জেএস অ্যানিমেশন ব্যবহার করে শেষ করবেন। একটি সিদ্ধান্ত নেওয়া হয়েছে, এটা সঠিক ছিল? বেশ, দেখা যাক.

প্রথমত, আপনি যদি কিছু সাধারণ জটিল অ্যানিমেশন চান তবে এসভিজি বা ক্যানভাসের পারফরম্যান্স এতটা প্রাসঙ্গিক নয়, সুতরাং এটি অগ্রাধিকারের বিষয়।

ক্যানভাস

গৌরবময় এইচটিএমএল 5 এ ক্যানভাস যুক্ত হয়েছিল। যেমনটি আমরা জানি, ক্যানভাস সীমাবদ্ধ কারণ এটি কেবল জেএসের মাধ্যমে চালিত হতে পারে।

ক্ষমতা:

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

যেমন থোর তার হাতুড়ি আছে, ক্যানভাসে ওয়েবজিএল রয়েছে। ওয়েবজিএল (ওয়েব গ্রাফিক লাইব্রেরি) একটি শক্তিশালী জেএস এপিআই যা ইন্টারেক্টিভ 3 ডি এবং 2 ডি গ্রাফিক্স এবং উপাদানগুলির রেন্ডারিংয়ের জন্য ব্যবহার করা যেতে পারে। ক্যানভাস উপাদানটি হার্ডওয়ার-ত্বরণযুক্ত গ্রাফিক্স আঁকার / তৈরি করতে এপিআই দ্বারা ব্যবহৃত হয়।

উদাহরণ:

সত্যি কথা বলতে, সিনট্যাক্সটি বেশ সোজা এবং পড়া সহজ। চল একটু দেখি:

এইচটিএমএল:

"<ক্যানভাস আইডি =" ক্যানভাস "> "

javascript:

var ক্যানভাস = ডকুমেন্ট.গেটমেন্টমেন্টবাইআইডি ('ক্যানভাস');
var ctx = canvas.getContext ('2d');
ctx.fillStyle = 'সবুজ';
ctx.fillRect (10, 10, 100, 100);

আউটপুট একটি সবুজ বাক্স হবে। সহজ।

ক্যানভাস একটি উচ্চ-কর্মক্ষমতা উপাদান সরবরাহ করে যা ইন্টারেক্টিভ এম্বেড বা গেম যেমন স্প্রাইটস, চিত্র সম্পাদনা এবং অ্যাপ্লিকেশনগুলির জন্য প্রতি পিক্সেল ম্যানিপুলেশন সক্ষমতা প্রয়োজন for দুর্ভাগ্যক্রমে, রেজোলিউশনগুলি বাড়ার সাথে সাথে ক্যানভাস অ্যাপ্লিকেশনগুলির কার্যকারিতা হ্রাস পায় এবং পূর্ণ-স্ক্রিন ব্যবহারকারীর ইন্টারফেসগুলিতে ব্যবহারের জন্য সুপারিশ করা হবে না।

করা SVG

এসভিজি (স্কেলেবল ভেক্টর গ্রাফিক্স) ওয়েবে গ্রাফিক্স সংজ্ঞায়িত করার জন্য একটি সরঞ্জাম হিসাবে ব্যবহৃত হয়। এসভিজি উপাদানটির নিজস্ব ভিউপোর্ট এবং সমন্বয় ব্যবস্থা রয়েছে। এসভিজি কেবলমাত্র নির্দিষ্ট সামগ্রী উপাদানগুলিকেই অনুমতি দেয় যেমন: , , <ক্লিপপথ>, , , <ফিল্টার>, , , <ফায়ারঅনবজেক্ট>, <ইমেজ>, <মার্কার>, <মাস্ক>, <প্যাটার্ন>, <স্ক্রিপ্ট>, <স্টাইল>, <স্যুইচ>, <টেক্সট>, <ভিউ> এবং এর গ্রাফিক উপাদানগুলি <ম্যানিমেট>, <ম্যানিমেট কালার>, <মনিটমোশন> , , <ডিস্কার্ড>, , , <সার্কেল>, <সেলাইপস>, <লাইন>, <পোলিগন>, <পোলাইন>, <সঠিক>।

ক্ষমতা

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

এসভিজি সত্যিকারের ইন-ব্রাউজার, এটি ভেক্টর ভিত্তিক যা একটি উচ্চ মানের অভিজ্ঞতা সরবরাহ করে তবে এটি অন্যান্য মাল্টিমিডিয়া উপাদান, অডিও ট্যাগ এবং ভিডিওর সাথেও তৈরি করা যায়।

ভিউবক্স অ্যাট্রিবিউটটি একটি লজিকাল সমন্বয় ব্যবস্থা কায়েম করে যা এসভিজি চিত্রের স্থানাঙ্কের সাথে সম্পর্কিত। এই ক্ষেত্রে, আমাদের ছবিটি 100 বাই 100 ভিউপোর্টে স্থাপন করা হয়েছে।

প্রিজারঅ্যাস্পেক্টরেটিও বৈশিষ্ট্যটি নির্দিষ্ট করে যে অনুপাতের অনুপাতটি ছবিটিকে উপলব্ধ আকারে কেন্দ্র করে, উচ্চতা বা প্রস্থের সর্বাধিক আকার এবং তারপরে কোনও ওভারফ্লো কেটে ফেলে সংরক্ষণ করতে হবে।

উদাহরণ:
বাক্য গঠনটি সহজেই পঠনযোগ্য:


<পাথ
ঘ = "M2409,211.5c0,116.25,94.24,210.5,210.5,210.5a209.45,209.45,0,0,0,115.68-34.66c.55.62,1,1.31,1.55,1.9L2848,500.47A42.79,42.79,0, 1,0,2908.47,440L2797.24,328.73c-.59-.59-1.28-1-1.9-1.55A209.46,209.46,0,0,0,2830,211.5C2830,95.24,2735.75,1,2619.5,1S2409,95.24 , 2409,211.5M2482,211.5A137.53,137.53,0,1,1,2619.5,349,137.53,137.53,0,0,1,2482,211.5 ">

  

আউটপুট এই মত একটি অনুসন্ধান আইকন হতে চলেছে।

তবে এটি একটি এসভিজি উপাদান। ইমেজ নয়! যা উদাহরণস্বরূপ কিছু অসুস্থ ইউআই ইন্টারঅ্যাক্টিভিটির জন্য ব্যবহার করা যেতে পারে:

https://codepen.io/arcticben/pen/xqBbqK

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

আসুন তাদের তুলনা করা যাক।

নমনীয়তা?

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

উদাহরণ স্বরূপ:

চিত্র
.element
পটভূমি-চিত্র: url (/images/image.svg);
}
 <পথ ডি = "এম 2409,211.5c0,116.25,94.24,210.5,210.5 , 210.5a209.45,209.45,0,0,0,115.68-34.66c.55.62,1,1.31,1.55,1.9L2848,500.47A42.79,42.79,0,1,0,2908.47,440L2797.24,328.73c-.59-। 59-1.28-1-1.9-1.55A209.46,209.46,0,0,0,2830,211.5C2830,95.24,2735.75,1,2619.5,1S2409,95.24,2409,211.5M2482,211.5A137.53,137.53,0,1, 1,2619.5,349,137.53,137.53,0,0,1,2482,211.5 "> 

>

আপনি ব্রাউজার / উইন্ডোটির আকারটি যে আকারে পরিবর্তন করবেন তা মান একই থাকবে। এসভিজিগুলিকে কী প্রকৃতপক্ষে নমনীয় করে তোলে আপনি তাদের প্রাকৃতিক ছাড়িয়ে তাদের আকার বাড়িয়ে তুলতে পারেন।

এসভিজিগুলিকে সঞ্চার করার জন্য তিনটি উপায় রয়েছে। সিএসএস এবং এসএমআইএল হ'ল "ঘোষণামূলক" পদ্ধতি এবং অবশ্যই জাভাস্ক্রিপ্ট।

লোড সময়

এই গবেষণামূলক নিবন্ধটির ভিত্তিতে আমরা সহজেই বুঝতে পারি যে আপনি ক্যানভাস বা এসভিজি ব্যবহার করেন বা না করেন তা বেশিরভাগ ক্ষেত্রে আপনার নির্দিষ্ট প্রয়োগের উপর নির্ভর করে।

একটি গ্রাফিক্স-নিবিড় গেম, যেখানে অনেকগুলি অবজেক্ট সমস্ত সময় পুনরায় চিত্রায়িত হয় সম্ভবত ক্যানভাসে সবচেয়ে ভাল প্রয়োগ করা হয়েছে। অন্যদিকে, মানচিত্রের দর্শকদের মতো অ্যাপ্লিকেশনগুলিতে বৃহত্তর রেন্ডারিং অঞ্চলগুলি জড়িত থাকতে পারে এবং এসভিজির কাছে তাদের আরও ভাল ধার দিতে পারে।

মূল পার্থক্য

ক্যানভাস

করা SVG

উদাহরণ

এখানে কিছু ব্যক্তিগত উদাহরণ দেওয়া হল:

করা SVG:

ক্যানভাস:

উপসংহার

আপনি যদি এটি দরকারী মনে হয় ভাগ!