SVG-এর পূর্ণরূপ Scalable Vector Graphics। এটি W3C-এর এমন একটি ওপেন স্ট্যান্ডার্ড, যেখানে ছবি বর্ণনা করা হয় পিক্সেলের পরিবর্তে নির্দেশনা হিসেবে: এখানে একটি বৃত্ত আঁকুন, এ রেখাটি অনুসরণ করুন, এই আকারটি এই রঙে পূরণ করুন, এই শব্দটি ওই ফন্টে সেট করুন। যেহেতু ছবিটি মূলত কিছু নির্দেশনার সমষ্টি, তাই এটিকে যেকোনো মাপের করা যায়, কখনো ঝাপসা বা খসখসে হয় না। এই কারণেই লোগো, আইকন, মানচিত্র এবং চার্ট প্রায়ই SVG ফরম্যাটে থাকে।
একটি SVG কীভাবে ছবি সংরক্ষণ করে
একটি SVG ফাইল আসলে XML: পাঠযোগ্য টেক্সট, যা আপনি যে কোনো এডিটরে খুলতে পারেন। একটি <path> এলিমেন্টে থাকে অঙ্কন নির্দেশনার কম্প্যাক্ট স্ট্রিং, <rect>, <circle> এবং <polygon> প্রত্যাশিত কাজগুলোই করে, <text> এলিমেন্টে থাকে আসল সিলেক্টযোগ্য টেক্সট, আর <g> একাধিক এলিমেন্টকে গ্রুপ করে, যাতে সেগুলোকে একসাথে সরানো বা স্টাইল করা যায়। একটি viewBox অ্যাট্রিবিউট কোঅর্ডিনেট সিস্টেম নির্ধারণ করে, যা পুরো অঙ্কনটিকে পরিষ্কারভাবে স্কেল হতে সাহায্য করে।
টেক্সট হওয়ায় SVG খুব ভালোভাবে কমপ্রেস করা যায়; gzipped SVG (কখনো কখনো .svgz এক্সটেনশন দেওয়া হয়) প্রায়ই মূল আকারের অনেক কম হয়। টেক্সট হওয়ার মানে এইটাও যে SVG-কে CSS দিয়ে স্টাইল করা যায়, অ্যানিমেট করা যায় এবং স্ক্রিপ্ট চালানো যায়। ব্রাউজার এটিকে আলাদা একটি অপাক ইমেজ হিসেবে নয়, বরং ডকুমেন্টের অংশ হিসেবে বিবেচনা করে।
এই শেষ ক্ষমতাটির একটি নিরাপত্তা দিকও আছে, যা জানা জরুরি: একটি SVG-তে <script> এলিমেন্ট থাকতে পারে। যেকোনো জায়গায় যেখানে ব্যবহারকারী SVG আপলোড করতে পারে, সেটিকে অবশ্যই স্যানিটাইজ করতে হবে বা এমনভাবে সার্ভ করতে হবে যাতে স্ক্রিপ্ট এক্সিকিউট না হয়। এই কারণেই কিছু সাইট সব ধরনের রাস্টার ফরম্যাট নিলেও SVG গ্রহণ করে না।
ফটোগ্রাফের জন্য SVG একটি দুর্বল কনটেইনার। আপনি চাইলে এর ভেতরে একটি রাস্টার ইমেজ এম্বেড করতে পারেন, কিন্তু তাতে আপনি মূলত XML-এর ভেতরে পিক্সেলের ছবি রাখবেন, আর স্কেল করার কোনো সুবিধাই পাবেন না।
একটি SVG কী মেটাডেটা বহন করে
SVG-তে একটি আলাদা <metadata> এলিমেন্ট থাকে, এবং স্ট্যান্ডার্ডে কী থাকবে তা নির্দিষ্ট না থাকায়, এডিটরগুলো সেখানে প্রায়ই অনেক কিছু লিখে। সাধারণত সেখানে Dublin Core টার্ম ব্যবহার করে RDF রাখা হয়: dc:title, dc:creator, dc:date, dc:description, dc:rights এবং একটি লাইসেন্স URI। <title> এবং <desc> এলিমেন্টও রুটে বা যেকোনো আলাদা শেপের উপর থাকতে পারে, যেখানে সেগুলো স্ক্রিন রিডারের জন্য এক ধরনের অ্যাক্সেসিবিলিটি টেক্সট হিসেবে কাজ করে।
তারপর থাকে এডিটরের নিজস্ব বুককিপিং, আর সেটাই সাধারণত সবচেয়ে বড় অংশ। Inkscape তার নিজের পুরো একটি namespace লেখে: ডকুমেন্টের উইন্ডো জিওমেট্রি, শেষবার সেভ করার সময়কার জুম লেভেল ও কার্সর পজিশন, গাইড লাইন, গ্রিড সেটিংস, লেয়ারের নাম ও দৃশ্যমানতা, এবং একটি inkscape:version স্ট্রিং। Illustrator তার নিজস্ব ডকুমেন্ট আইডেন্টিফায়ার এবং হিস্ট্রি সহ একটি XMP প্যাকেট এম্বেড করে। এইগুলোর কোনোটাই আসলে কিছু আঁকে না।
এ থেকে দুটি বাস্তব দিক মাথায় রাখা যায়। এডিটরের ডেটা সহজেই ফাইলের বড় অংশ হয়ে উঠতে পারে, তাই প্রকাশ করার আগে SVG-কে একটি অপ্টিমাইজারের মাধ্যমে চালালে প্রায়ই আকার অর্ধেক হয়ে যায়। আর লেয়ারের নামগুলো হলো আপনারই লেখা টেক্সট: <g inkscape:label="client logo v3 REJECTED"> ছবিতে অদৃশ্য, কিন্তু ফাইলে পুরোপুরি দৃশ্যমান।
কখন SVG ব্যবহার করবেন
ফটোগ্রাফের বদলে আঁকা যেকোনো কিছুর জন্য SVG ব্যবহার করুন: লোগো, আইকন, ডায়াগ্রাম, চার্ট, ইলাস্ট্রেশন, মানচিত্র। ওয়েবের জন্য এটি সঠিক পছন্দ, যেখানে একটিমাত্র ফাইল সব স্ক্রিন ডেনসিটিতে কাজ করে, এবং প্রিন্টের জন্যও, যেখানে এটিকে যেকোনো আকারে স্কেল করা যায়।
ফটোগ্রাফ এবং ধারাবাহিক টোনযুক্ত যেকোনো কিছুর জন্য PNG বা JPG ব্যবহার করুন। যখন এমন কোনো সফটওয়্যারে ছবি খুলতে হবে যা SVG-এর জন্য খুব পুরোনো বা খুব সীমিত, তখন একটি ফ্ল্যাট রাস্টার কপি এক্সপোর্ট করুন, এবং প্রকাশের আগে এডিটরের মেটাডেটা মুছে ফেলুন, একদিকে ফাইল ছোট রাখতে এবং অন্যদিকে কারণ লেয়ারের নাম সব সময় সবার দেখার জন্য নয়।