SVG ভেক্টর (.svg)

W3C স্ট্যান্ডার্ড

Scalable Vector Graphics (SVG) হল একটি XML-ভিত্তিক ভেক্টর ইমেজ ফরম্যাট যা ইন্টারঅ্যাক্টিভিটি, CSS স্টাইলিং এবং অ্যানিমেশনের সমর্থন সহ দ্বিমাত্রিক গ্রাফিক্সের জন্য ব্যবহৃত হয়।

উদ্ভাবক: World Wide Web Consortium (W3C)বছর: 2001MIME: image/svg+xml

SVG থেকে PNG-তে রূপান্তর করুন

বিনামূল্যের ব্রাউজারভিত্তিক SVG-থেকে-PNG রূপান্তরকারী। আপনার ডিভাইসেই ফাইল তাৎক্ষণিকভাবে রূপান্তর করুন।

SVG থেকে PNG রূপান্তরকারী

অনলাইনে SVG কম্প্রেস করুন

ব্যক্তিগত - ফাইল কখনোই আপনার ডিভাইস ছেড়ে যায় না

SVG কম্প্রেস করুন

ইনস্পেক্ট ও মেটাডেটা

অপারেটিং সিস্টেম এবং ফাইল অ্যানালাইজারগুলো শুরুর বাইনারি বাইট সিকোয়েন্স পরীক্ষা করে SVG ফাইল শনাক্ত করে:

এখানে ফাইল নির্বাচন করুন বা ড্রপ করুন

ব্যক্তিগত - ফাইল কখনোই আপনার ডিভাইস ছেড়ে যায় না

অথবা পেস্ট করুন Ctrl+V

নেটওয়ার্কে কোনো ডেটা পাঠানো হয় না - গোপনীয়তার নিশ্চয়তা: বাহ্যিক সার্ভারে ০ বাইট আপলোড করা হয়েছে। সমস্ত প্রক্রিয়াকরণ আপনার ব্রাউজার স্যান্ডবক্সে স্থানীয়ভাবে ঘটেছে।

বাইট-লেভেল হেডার সিগনেচার (ম্যাজিক বাইটস)

হেক্স সিগনেচার (অফসেট 0):

3C 73 76 67

ASCII রিপ্রেজেন্টেশন: <svg

স্ট্যান্ডার্ডাইজেশন: W3C Recommendation (SVG 1.1 / SVG 2)

প্রযুক্তিগত বৈশিষ্ট্য

কন্টেইনার আর্কিটেকচার	XML-ভিত্তিক টেক্সট মার্কআপ ডকুমেন্ট যা টু-ডি ভেক্টর জ্যামিতি নির্ধারণ করে
কম্প্রেশন	Gzip / Brotli টেক্সট সংকোচন (SVGZ গিজিপ কম্প্রেশন ব্যবহার করে)
বাইট এন্ডিয়াননেস	প্রযোজ্য নয় (টেক্সট-ভিত্তিক UTF-8 / UTF-16 ক্যারেক্টার স্ট্রিম)
কালার স্পেস	sRGB, CSS Color Module 4 (Display P3, lab, lch)
চ্যানেল ও কাঠামো	সীমাহীন রেজোলিউশন ভেক্টর আকৃতি, বেজিয়ার কার্ভ, টাইপোগ্রাফি এবং অপাসিটি মাস্ক
সর্বোচ্চ মাত্রা	রেজোলিউশন-স্বাধীন (পিক্সেল ভেঙে না গিয়ে যেকোনো ভিউপোর্টে অনির্দিষ্টকালের জন্য স্কেল করে)
স্বচ্ছতা	সম্পূর্ণ পরিবর্তনশীল আলফা স্বচ্ছতা এবং CSS ব্লেন্ড মোড
স্ট্রিমিং ও প্রোগ্রেসিভ	ব্রাউজার XML পার্সার দ্বারা প্রগতিশীল টেক্সট স্ট্রিম পার্সিং সমর্থিত

টেকনিক্যাল তুলনা ম্যাট্রিক্স: SVG বনাম প্রতিযোগীগণ

প্রযুক্তিগত বৈশিষ্ট্য	SVG (বর্তমান)	HTML5 Canvas	PDF	PNG
রেন্ডারিং মডেল	রিটেইনড মোড ভেক্টর DOM	ইমিডিয়েট মোড বিটম্যাপ ক্যানভাস	রিটেইনড মোড ফিক্সড পেজ কন্টেইনার	র‍াস্টার পিক্সেল গ্রিড
স্টাইলিং এবং CSS	CSS ক্লাস এবং ভ্যারিয়েবলের মাধ্যমে সম্পূর্ণ স্টাইলযোগ্য	JavaScript ক্যানভাস API রিড্র প্রয়োজন	কোনো গতিশীল CSS স্টাইলিং নেই	নির্দিষ্ট র‍াস্টার পিক্সেল
অসীম স্কেলেবিলিটি	হ্যাঁ (গাণিতিক ভেক্টর কার্ভ)	ম্যানুয়াল রেজোলিউশন স্কেলিং প্রয়োজন	হ্যাঁ (ভেক্টর উপাদান)	না (বড় করলে পিক্সেলটেড হয়ে যায়)
ইন্টারঅ্যাক্টিভিটি	নেটিভ DOM ইভেন্ট (হভার, ক্লিক, অ্যানিমেশন)	ম্যানুয়াল হিট ডিটেকশন গণিত প্রয়োজন	স্ট্যাটিক ডকুমেন্ট	ইমেজ ম্যাপ বা ক্যানভাস প্রয়োজন

সাধারণ করাপশন মোড এবং হেক্স রিকভারি গাইড

ব্রাউজারে XML পার্সিং ত্রুটি দেখায়: বন্ধ না করা টোকেন বা অমিল ট্যাগ।

মূল কারণ: ত্রুটিপূর্ণ XML সিনট্যাক্স, অনুপস্থিত ক্লোজিং ট্যাগ, বা আনএসকেপড অ্যামপারস্যান্ড('&'-এর পরিবর্তে '&')।

পুনরুদ্ধার: একটি XML লিন্টার (xmllint file.svg) দিয়ে যাচাই করুন এবং অসামঞ্জস্যপূর্ণ ট্যাগগুলো সংশোধন করুন।

নিরাপত্তা বিশ্লেষণ ও পার্সার অ্যাটাক ভেক্টর

যেহেতু SVG একটি এক্সিকিউটেবল XML যা '<script>' ট্যাগ এবং বাহ্যিক এন্টিটি সমর্থন করে, তাই অবিশ্বস্ত SVG প্রদর্শিত হলে এটি উল্লেখযোগ্য XSS এবং SSRF ঝুঁকি উপস্থাপন করে।

পরিচিত অ্যাটাক ভেক্টর

এমবেডেড '<script>' ট্যাগ বা 'onload=' ইভেন্ট হ্যান্ডলারের মাধ্যমে সংরক্ষিত ক্রস-সাইট স্ক্রিপ্টিং (XSS)।
ব্যাকএন্ড সার্ভারে পার্স করা হলে স্থানীয় সার্ভার ফাইল পঠনকারী XML এক্সটার্নাল এন্টিটি (XXE) আক্রমণ।
বিলিয়ন লাফ্স XML এন্টিটি প্রসারণ যা পরিষেবার অস্বীকৃতি (DoS) ঘটায়।

প্রতিরক্ষামূলক সেরা অনুশীলন: এম্বেড করার আগে সর্বদা DOMPurify ব্যবহার করে SVG স্যানিটাইজ করুন, অথবা 'Content-Security-Policy: default-src 'none'' সহ SVG পরিবেশন করুন বা '<img>' ট্যাগ হিসাবে পরিবেশন করুন যা স্বয়ংক্রিয়ভাবে স্ক্রিপ্ট নিষ্ক্রিয় করে।

ঐতিহাসিক উৎপত্তি ও মাইলফলক

2018W3C SVG 2 ক্যান্ডিডেট রিকমেন্ডেশন আধুনিক CSS স্টাইলিং একীভূত করে।

2011SVG 1.1 (দ্বিতীয় সংস্করণ) সার্বজনীন মোবাইল এবং ডেস্কটপ ব্রাউজার সমর্থন প্রমিত করে।

2001W3C VML এবং PGML প্রস্তাব থেকে বিকশিত SVG 1.0 স্পেসিফিকেশন প্রকাশ করে।

প্রধান সুবিধাসমূহ ও গুণাবলী

অসীম রেজোলিউশন স্বাধীনতা: যেকোনো ডিসপ্লে বা প্রিন্ট স্কেলে স্পষ্ট লাইন এবং টাইপোগ্রাফি।
লোগো, আইকন এবং UI ইন্টারফেস উপাদানের জন্য অত্যন্ত ছোট ফাইলের সাইজ।
ব্রাউজার DOM-এর ভিতরে CSS এবং JavaScript এর মাধ্যমে সম্পূর্ণ স্ক্রিপ্টযোগ্য এবং স্টাইলযোগ্য।

কারিগরি সীমাবদ্ধতা ও অসুবিধা

ফটোগ্রাফ বা জটিল কন্টিনিউয়াস-টোন ছবির জন্য অনুপযুক্ত।
হাজার হাজার নোড সহ জটিল ভেক্টর পাথ CPU রেন্ডারিং ল্যাগ এবং উচ্চ ব্যাটারি ড্রেন ঘটাতে পারে।
XML প্রকৃতির কারণে এমবেডেড স্ক্রিপ্টিং অনুমোদিত হয়, যার ফলে বিশ্বস্ত নয় এমন আপলোড রেন্ডার করার আগে কঠোর স্যানিটাইজেশনের প্রয়োজন হয়।

আকর্ষণীয় কারিগরি তথ্য

SVG সাধারণ XML টেক্সট হওয়ায় Gzip দিয়ে কম্প্রেস করলে .svgz ফাইল তৈরি হয়, যা প্রায়ই ফাইলের আকার ৭০% থেকে ৮০% কমায়।
viewBox অ্যাট্রিবিউট একটি বিমূর্ত স্থানাঙ্ক ক্যানভাস সংজ্ঞায়িত করে যা শারীরিক স্ক্রিন পিক্সেলের সাথে গতিশীলভাবে ম্যাপ করে।
প্রারম্ভিক ওয়েব ব্রাউজারগুলিতে মূলত নেটিভ SVG ইঞ্জিন ছিল না, যার ফলে ২০১১ সালের দিকে নেটিভ ব্রাউজার সমর্থন দৃঢ় হওয়ার আগে Adobe SVG Viewer ব্রাউজার প্লাগইন বিতরণ করতে বাধ্য হয়েছিল।

সচরাচর জিজ্ঞাসিত প্রযুক্তিগত প্রশ্নাবলি

SVG ফাইলে কি ক্ষতিকারক কোড থাকতে পারে?

হ্যাঁ। যেহেতু SVG বৈধ XML, তাই এতে এমবেডেড JavaScript ('<script>') থাকতে পারে যা ব্রাউজারে সরাসরি লোড হলে বা ইনলাইন '<svg>' উপাদানে খোলা হলে চলে। '<img>' ট্যাগের মাধ্যমে SVG পরিবেশন করা হলে স্ক্রিপ্ট এক্সিকিউশন স্বয়ংক্রিয়ভাবে নিষ্ক্রিয় হয়ে যায়।

PNG-এর পরিবর্তে আমার কখন SVG ব্যবহার করা উচিত?

আইকন, লোগো, চার্ট, ইলাস্ট্রেশন এবং টাইপোগ্রাফির জন্য SVG ব্যবহার করুন যেখানে সমস্ত স্ক্রিন সাইজে স্পষ্ট স্কেলিং এবং ছোট ফাইলের সাইজ প্রয়োজন। ফটোগ্রাফের জন্য PNG বা WebP ব্যবহার করুন।

আমি কীভাবে বড় বা জটিল SVG ফাইল অপ্টিমাইজ করতে পারি?

আপনি SVGO-এর মতো টুল ব্যবহার করে বা SVG কম্প্রেশন চালিয়ে অপ্রয়োজনীয় মেটাডেটা, এডিটর কমেন্টস (Inkscape বা Illustrator থেকে), অদৃশ্য গ্রুপ এবং অব্যবহৃত নেমস্পেস ঘোষণা অপসারণ করে ভেক্টর পাথ পরিষ্কার করতে পারেন।