স্কেলেবেল ভেক্টর গ্রাফিক্স ব্যবহার করার সুবিধাগুলি
স্ক্যালেবেল ভেক্টর গ্রাফিক্স, বা এসভিজি, আজকের ওয়েবসাইট ডিজাইনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। আপনি যদি বর্তমানে আপনার ওয়েব ডিজাইন কাজের SVG ব্যবহার না করেন, তাহলে এখানে কিছু কারণ রয়েছে যা আপনি কেন শুরু করতে চান, সেইসাথে আপনি যদি এই বয়সের ব্রাউজারগুলির জন্য ব্যবহার করতে পারেন তবে এই ফাইলগুলি সমর্থন করে না
সমাধান
SVG এর সবচেয়ে বড় বেনিফিট রেজল্যুশন স্বাধীনতা হয়। কারণ SVG ফাইলগুলি পিক্সেল-ভিত্তিক রাস্টার ইমেজগুলির পরিবর্তে ভেক্টর গ্রাফিক্স, তাই তাদের কোনও ছবির গুণমান নষ্ট না করে পুনরায় আকার দেওয়া যায়। এটি বিশেষভাবে সহায়ক যখন আপনি প্রতিক্রিয়াশীল ওয়েবসাইটগুলি তৈরি করছেন যা একটি ভাল মাপের পর্দার মাপ এবং ডিভাইসগুলিতে ভাল চেহারা এবং ভাল কাজ করতে হবে ।
SVG ফাইলগুলিকে আপনার প্রতিক্রিয়াশীল ওয়েবসাইটের পরিবর্তনের আকার এবং লেআউটের প্রয়োজনগুলি মিটানোর জন্য আপ বা ডাউন করা যেতে পারে এবং আপনি যেসব গ্রাফিক্সের সাথে আপস করা মানের কোনও পদক্ষেপ নিয়েছেন সে বিষয়ে চিন্তা করতে হবে না।
ফাইলের আকার
প্রতিক্রিয়াশীল ওয়েবসাইটগুলিতে রাস্টার ইমেজ (JPG, PNG, GIF) ব্যবহার করে যে চ্যালেঞ্জগুলির মধ্যে একটি, সেই চিত্রগুলির ফাইলের আকার। যেহেতু রাস্টার ইমেজগুলি ভেক্টরদের যে ভাবে মাপবে না তাই আপনাকে আপনার পিক্সেল-ভিত্তিক ছবিগুলি যেকোন আকারের আকারে সরবরাহ করতে হবে যা সেগুলি প্রদর্শিত হবে। এটি কারণ আপনি সবসময় একটি ছবি ছোট করতে এবং তার মান বজায় রাখতে পারেন, কিন্তু একই ইমেজ বড় জন্য সত্য হয় না। শেষ ফলাফল হল যে আপনি প্রায়ই ছবিগুলি যেগুলি একটি ব্যক্তির পর্দায় দেখানো হয় তুলনায় অনেক বড়, যার মানে তারা একটি খুব বড় ফাইল ডাউনলোড করতে বাধ্য হয় না।
এসভিজি এই চ্যালেঞ্জ মোকাবেলা। যেহেতু ভেক্টর গ্রাফিক্সগুলি মাপযোগ্য, তবে আপনার কাছে ছোট ছোট ফাইলের আকার থাকতে পারে, যতক্ষণ না এই চিত্রগুলি প্রদর্শিত হবে। এটি শেষ পর্যন্ত একটি সাইটের সামগ্রিক পারফরম্যান্স এবং ডাউনলোড গতি উপর একটি ইতিবাচক প্রভাব থাকবে
CSS স্টাইলিং
SVG কোডটি সরাসরি একটি পৃষ্ঠার HTML এ যোগ করা যেতে পারে। এটি "ইনলাইন SVG" নামে পরিচিত। ইনলাইন SVG ব্যবহারের সুবিধাগুলি হল যে যেহেতু গ্রাফিক্স আসলে আপনার কোড ভিত্তিক ব্রাউজার দ্বারা টানা হয়েছে তাই কোনও ইমেজ ফাইল আনতে একটি HTTP অনুরোধ করা প্রয়োজন নেই। আরেকটি সুবিধা হলো ইনলাইন SVG সিএসএস এর সাথে স্টাইল করা যায়।
একটি SVG আইকন রঙ পরিবর্তন করতে হবে? পরিবর্তে যে কোনও চিত্র সম্পাদনা সফ্টওয়্যারটি খুলতে এবং ফাইলটি পুনরায় আপলোড করার প্রয়োজনের পরিবর্তে, আপনি কেবল CSS এর কয়েকটি লাইন দিয়ে SVG ফাইলটি পরিবর্তন করতে পারেন।
আপনি হোভার স্টেটগুলিতে অথবা নির্দিষ্ট ডিজাইন চাহিদার পরিবর্তে SVG গ্রাফিক্সগুলিতে অন্যান্য CSS শৈলীগুলি ব্যবহার করতে পারেন। আপনি একটি গ্রাফিক্স একটি পৃষ্ঠায় কিছু আন্দোলন এবং ইন্টারঅ্যাক্টিভিটি যোগ করতে এমনকি পরিণাম করতে পারেন।
অ্যানিমেশন
যেহেতু ইনলাইন SVG ফাইলগুলি সিএসএস এর সাথে সিলেক্ট করা যায়, আপনি তাদের উপর সিএসএস অ্যানিমেশন ব্যবহার করতে পারেন। CSS রূপান্তরিত এবং পরিবর্তনগুলি SVG ফাইলগুলিতে কিছু কিছু যোগ করার জন্য দুটি সহজ উপায়। আজকের ওয়েবসাইটগুলিতে ফ্লাশ ব্যবহার করে আসা ডাউনসাইডগুলির সাথে ঝগড়া না করে আপনি পৃষ্ঠায় সমৃদ্ধ ফ্ল্যাশের মত অভিজ্ঞতা পেতে পারেন।
SVG এর ব্যবহারগুলি
SVG হিসাবে শক্তিশালী হিসাবে, এই গ্রাফিক্স আপনি আপনার ওয়েবসাইট ব্যবহার করা হয় প্রতি অন্যান্য ইমেজ বিন্যাস প্রতিস্থাপন করতে পারবেন না। যে ছবিগুলি গভীর রঙের গভীরতার প্রয়োজন সেটি এখনও একটি JPG বা সম্ভবত একটি PNG ফাইল হতে হবে, কিন্তু আইকনগুলির মতো সাধারণ চিত্রগুলিকে SVG হিসাবে কার্যকর করার জন্য পুরোপুরি উপযুক্ত।
SVG আরো জটিল দৃষ্টান্তের জন্য উপযুক্ত হতে পারে, যেমন কোম্পানির লোগো বা গ্রাফ এবং চার্ট। সমস্ত গ্রাফিক্স মাপযোগ্য, সিএসএস এর সাথে স্টাইল করতে সক্ষম, এবং এই নিবন্ধে তালিকাভুক্ত অন্যান্য সুবিধার থেকে উপকৃত হবে।
পুরোনো ব্রাউজারগুলির জন্য সমর্থন
আধুনিক ওয়েব ব্রাউজারগুলিতে SVG- এর জন্য বর্তমান সমর্থন খুব ভাল। শুধুমাত্র এই গ্রাফিক্স জন্য সমর্থন অভাব শুধুমাত্র ব্রাউজার ইন্টারনেট এক্সপ্লোরার এর পুরোনো সংস্করণ (সংস্করণ 8 এবং নীচের) এবং অ্যান্ড্রয়েড এর কয়েক পুরোনো সংস্করণ সর্বোপরি, ব্রাউজিংয়ের জনসংখ্যার একটি খুব ছোট শতাংশ এখনও এই ব্রাউজার ব্যবহার করে, এবং সেই সংখ্যাটি সঙ্কুচিত করা চলছে এর মানে হল যে SVG ওয়েবসাইটগুলিতে বেশ নিরাপদে ব্যবহার করা যায়।
যদি আপনি SVG- এর জন্য একটি ফাঁকফোকর সরবরাহ করতে চান, আপনি ফিলামেন্ট গ্রুপ থেকে গ্রাম্পিকন মত টুল ব্যবহার করতে পারেন। এই সম্পদগুলি আপনার SVG চিত্র ফাইলগুলি গ্রহণ করবে এবং পুরাতন ব্রাউজারগুলির জন্য PNG ফাঁকাকরণ তৈরি করবে।
1/27/17 এ জেরেমি গিয়ার্ড দ্বারা সম্পাদিত