৬০ সেকেণ্ডে ওয়েব ডিজাইনারদের জন্য SVG

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

বিটম্যাপ ইমেজ যেমন JPEGs, GIFs, এবং PNGs সবগুলোই যখন আপনি বড় করবেন তখন সেগুলোকে দেখতে বাজে লাগবে। তাই যদি আপনি ফাইল সাইজের সঙ্গে সঙ্গে কোন ইমেজ ভাল দেখাতে চান তাহলে আপনাকে এই ইমেজের মাত্রা বা dimension-ও বড় করতে হবে অর্থাৎ বড় সাইজের ইমেজ ব্যবহার করতে হবে। অন্যদিকে SVG ইমেজ (যেটা দিয়ে বোঝানো হয়, স্কেলেবল ভেক্টর গ্রাফিক্স) দেখতে ঠিক একই রকম দেখায়, এটা একই সাইজে, অথবা বড় করে যেভাবেই দেখা হোক না কেন এটা সব সময়ই নিখুঁত দেখাবে।

চলুন, তাহলে ওয়েব ডিজাইনের জন্য SVG এর ব্যবহার মাত্র ষাট সেকেন্ডে দেখা যাক!

ওয়েব ডিজাইনের জন্য একটি SVG ফাইল কি করতে পারে

SVG ইমেজ ফাইল ফরম্যাট CSS এ ব্যাকগ্রাউণ্ড হিসেবে ব্যবহার হতে পারে, অথবা আপনি চাইলে এটাকে কোন কন্টেন্টে রেগুলার ইমেজ হিসেবেও ব্যবহার করতে পারেন। আপনি চাইলে আইকন এবং লোগো হিসেবেও SVG ফাইল ব্যবহার করতে পারেন, যেটা দেখতে সর্বদাই নিখুঁত মনে হবে। এবং আপনি ইচ্ছা করলে এটাকে অ্যানিমেট বা রূপান্তরও করতে পারেন। এছাড়াও এগুলোতে দারুন সব ফিল্টার এবং ইফেক্টও যোগ করতে পারেন। (নিচের অপশন থেকে লুকাস বেবারের তৈরি করা SVG ফিল্টার ডেমোটি দেখতে পারেন)। এমনকি আপনি চাইলে এগুলোর রংও CSS দিয়ে পরিবর্তন করতে পারবেন।

কোডের অভ্যন্তরীণ ভাগে SVG ফাইল খুব সহজেই পাঠযোগ্য এবং সম্পাদনাযোগ্য XML কোড। এবং SVG এর ভিতরের লেখাটি খুব সাধারণ, ইনডেক্স-যোগ্য এবং সার্চ-ইঞ্জিন বান্ধব।

SVG ফাইল খুব সহজেই Affinity Designer, Boxy SVG, Illustrator, Gravit Designer, অথবা Inkscape দিয়ে তৈরি করা যায়। এসব গ্রাফিক এডিটিং প্রোগ্রাম দিয়ে আপনি চাইলে যেকোনো SVG ফাইল তৈরি করতে পারবেন। মুহূর্তেই আপনার ইমেজ তৈরি করুন, SVG হিসেবে এটাকে এক্সপোর্ট করুন, এবং এটা আপনার ওয়েবসাইটে ব্যবহার করার জন্য সম্পূর্ণ প্রস্তুত। ব্যস, ষাট সেকেন্ডে ওয়েব ডিজাইনের জন্য SVG ফাইলের ব্যবহার শিখে গেলেন!