আমাদের এসভিজি ফরম্যাটারের মূল বৈশিষ্ট্য
- **বিউটিফাই মোড** স্মার্ট ইন্ডেন্টেশন, লাইন র্যাপিং ও অ্যাট্রিবিউট অ্যালাইনমেন্ট সহ
- **মিনিফাই মোড** যা হোয়াইটস্পেস, কমেন্ট ও অপ্রয়োজনীয় মেটাডেটা সরিয়ে দেয়
- হুডের নিচে প্রিটিয়ার-স্টাইল ফরম্যাটিং ও এসভিজিও-স্টাইল অপ্টিমাইজেশন
- কনফিগারযোগ্য ইন্ডেন্ট স্টাইল (স্পেস বা ট্যাব) ও ইন্ডেন্ট সাইজ
- ঐচ্ছিক র্যাপ কলাম দীর্ঘ পাথ ও অ্যাট্রিবিউট গোছানো রাখতে
- সামঞ্জস্যপূর্ণ লাইন শেষের শৈলী (LF / CRLF) বিভিন্ন অপারেটিং সিস্টেমে পরিষ্কার ডিফের জন্য
- ৫ MB পর্যন্ত `.svg` ফাইল ড্র্যাগ-এন্ড-ড্রপ করুন বা ইনলাইন SVG মার্কআপ পেস্ট করুন
- ১০০% ক্লায়েন্ট-সাইড প্রসেসিং — আপনার আর্টওয়ার্ক ব্রাউজার ছেড়ে যায় না
- ফর্ম্যাটেড (`.formatted.svg`) বা মিনিফাইড (`.min.svg`) আউটপুট এক ক্লিকে কপি বা ডাউনলোড করুন
- রেস্পন্সিভ UI যা ল্যাপটপ, ডেস্কটপ এবং ট্যাবলেটে ভালভাবে কাজ করে
🔧 কিভাবে SVG ফর্ম্যাট বা মিনিফাই করবেন: দ্রুত গাইড for svg-formatter
১. SVG পেস্ট বা আপলোড করুন
📥 আপনার `.svg` ফাইল ড্র্যাগ-এন্ড-ড্রপ করুন বা কাঁচা SVG মার্কআপ এডিটরে পেস্ট করুন। টুলটি স্বয়ংক্রিয়ভাবে স্ট্যান্ডার্ড `image/svg+xml` কনটেন্ট শনাক্ত করে।
২. ফর্ম্যাট বা মিনিফাই নির্বাচন করুন
✨ মানুষের পাঠযোগ্য মার্কআপের জন্য **ফর্ম্যাট** নির্বাচন করুন (রিভিউ এবং ভার্সন কন্ট্রোলের জন্য দুর্দান্ত) বা সর্বনিম্ন সম্ভাব্য ফাইল সাইজের জন্য **মিনিফাই**।
৩. ফর্ম্যাটিং অপশনস টিউন করুন
⚙️ **ইন্ডেন্ট স্টাইল** (স্পেস বা ট্যাব), **ইন্ডেন্ট সাইজ** এবং ঐচ্ছিক **র্যাপ / লাইন দৈর্ঘ্য** সামঞ্জস্য করুন। এগুলি সরাসরি অন্তর্নিহিত ফর্ম্যাটার সেটিংসে ম্যাপ করে।
৪. প্রিভিউ ও এক্সপোর্ট
👀 অপ্টিমাইজড SVG কোড পরীক্ষা করুন, আপনার প্রজেক্টে দ্রুত এটি টেস্ট করুন, তারপর ক্লিপবোর্ডে কপি করুন বা ফলাফলটি নতুন `.svg` ফাইল হিসেবে ডাউনলোড করুন।
প্রযুক্তিগত বিবরণ
বিউটিফিকেশন ইঞ্জিন (ফর্ম্যাট মোড)
ফর্ম্যাট মোড SVG XML মার্কআপের জন্য টিউন করা একটি প্রিটিয়ার-স্টাইল ইঞ্জিন ব্যবহার করে। এটি পাঠযোগ্যতা এবং স্থিতিশীল, পূর্বাভাসযোগ্য ডিফের উপর ফোকাস করে।
| দিক | আচরণ | নোটস |
|---|---|---|
| ইন্ডেন্ট স্টাইল | স্পেস বা ট্যাব | **ইন্ডেন্ট স্টাইল** এর মাধ্যমে কনফিগারযোগ্য (`indentStyle` এ ম্যাপ করে)। |
| ইন্ডেন্ট সাইজ | ১–৮ স্পেস | স্পেস ব্যবহার করার সময় নেস্টিং প্রস্থ নিয়ন্ত্রণ করে (`indentSize` এ ম্যাপ করে)। |
| র্যাপ / লাইন দৈর্ঘ্য | ০–১২০ কলাম | `0` র্যাপিং নিষ্ক্রিয় করে; অন্যথায় দীর্ঘ লাইনগুলি নির্বাচিত কলামের চারপাশে মোড়ানো হয় (`wrapLineLength` এ ম্যাপ করে)। |
| লাইন শেষ | LF (`\n`) বা CRLF (`\r\n`) | বিভিন্ন অপারেটিং সিস্টেমে লাইন শেষ সামঞ্জস্যপূর্ণ রাখে (`endOfLine` এ ম্যাপ করে)। |
| আউটপুট ভাষা | এক্সএমএল-স্টাইল এসভিজি | নিরাপদ এম্বেডিংয়ের জন্য এসভিজি-সামঞ্জস্যপূর্ণ এক্সএমএল কাঠামো বজায় রাখে। |
মিনিফিকেশন পাইপলাইন (মিনিফাই মোড)
মিনিফাই মোড ভিজ্যুয়াল আউটপুট সংরক্ষণ করে আকার হ্রাসে ফোকাস করা একটি এসভিজিও-অনুপ্রাণিত পাইপলাইন ব্যবহার করে।
| ধাপ | বর্ণনা | প্রভাব |
|---|---|---|
| মন্তব্য সরান | `<!-- ... -->` মন্তব্য নোড সরিয়ে দেয় যা রেন্ডারিংকে প্রভাবিত করে না। | ছোট ফাইল, পরিষ্কার ডিফস। |
| অপ্রয়োজনীয় সাদা স্থান বাদ দিন | অপ্রয়োজনীয় স্পেস, ট্যাব এবং লাইন ব্রেক সংকুচিত করে। | ভার্বোস এডিটর-এক্সপোর্টেড এসভিজির জন্য বড় লাভ। |
| মেটাডেটা ট্রিম করুন | ঐচ্ছিকভাবে নন-রেন্ডারিং মেটাডেটা নোড সরিয়ে দেয় যখন নিরাপদ। | পাবলিক প্রোডাকশন অ্যাসেটের জন্য ভাল। |
| অ্যাট্রিবিউট স্বাভাবিক করুন | একটি স্থিতিশীল উপায়ে অ্যাট্রিবিউট সরল করে এবং পুনরায় অর্ডার করে। | আরও কমপ্যাক্ট আউটপুট, ভাল ক্যাশেবিলিটি। |
এনকোডিং ও সামঞ্জস্যতা
আউটপুট হল ইউটিএফ-৮ এসভিজি যা আধুনিক ব্রাউজার এবং টুলিংয়ের সাথে সামঞ্জস্যপূর্ণ, এসভিজি ২ স্পেসিফিকেশনের সাথে সারিবদ্ধ।
পারফরম্যান্স ও সীমাবদ্ধতা (সাধারণ ডেস্কটপ ব্রাউজার)
| ফাইল টাইপ | ইনপুট সাইজ | বিউটিফাই টাইম | মিনিফাই টাইম | সাধারণ সাইজ হ্রাস |
|---|---|---|---|---|
| আইকন | ৫ কেবি | ⚡ < ১৫ মিলিসেকেন্ড | ⚡ < ২০ মিলিসেকেন্ড | ≈ ২৫–৪০% |
| ইলাস্ট্রেশন | ১০০ কেবি | ⚡ < ৬০ মিলিসেকেন্ড | ⚡ < ৯০ মিলিসেকেন্ড | ≈ ৪০–৫৫% |
| হিরো গ্রাফিক | ৫০০ কেবি | ⏱️ < ৩০০ মিলিসেকেন্ড | ⏱️ < ৪৫০ মিলিসেকেন্ড | ≈ ৫০–৬০% |
পাওয়ার ব্যবহারকারীদের জন্য সিএলআই বিকল্প
টার্মিনাল ওয়ার্কফ্লো বা সিআই ইন্টিগ্রেশন পছন্দ করেন? এই টুলের অনুরূপ আচরণের জন্য প্রেটিয়ার এবং এসভিজিও একত্রিত করুন:
লিনাক্স / 🍎 ম্যাকওএস
প্রেটিয়ার দিয়ে এসভিজি সুন্দর করুন
npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svgআপনার এসভিজি মার্কআপে সামঞ্জস্যপূর্ণ ইন্ডেন্টেশন এবং লাইন র্যাপিং প্রয়োগ করে।
এসভিজিও দিয়ে এসভিজি মিনিফাই করুন
npx svgo input.svg -o input.min.svgছোট ফাইলের জন্য মন্তব্য, মেটাডেটা এবং অপ্রয়োজনীয় সাদা স্থান সরিয়ে দেয়।
উইন্ডোজ (পাওয়ারশেল বা সিএমডি)
xmlstarlet ব্যবহার করে এসভিজি প্রিটি-প্রিন্ট করুন (WSL বা নেটিভের মাধ্যমে)
xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg২-স্পেস ইন্ডেন্ট দিয়ে এসভিজি/এক্সএমএল ফরম্যাট করে।
এসভিজিও দিয়ে এসভিজি মিনিফাই করুন (গ্লোবাল ইন্সটল ছাড়া)
npx svgo input.svg -o min.svgএককালীন অপ্টিমাইজেশনের জন্য `npx` এর মাধ্যমে সরাসরি এসভিজিও চালায়।
ব্যবহারিক প্রয়োগ
ওয়েব পারফরম্যান্স ও ফ্রন্টএন্ড বান্ডিল
- ডিজাইন সিস্টেম, আইকন সেট এবং স্প্রাইট শীটে এসভিজি পেলোড হ্রাস করুন।
- অতিরিক্ত HTTP অনুরোধ বাঁচাতে HTML/CSS-এ মিনিফাইড এসভিজি ইনলাইন করুন।
- ল্যান্ডিং পেজে হিরো ইলাস্ট্রেশন সঙ্কুচিত করে কোর ওয়েব ভাইটালস উন্নত করুন।
<img src="/assets/hero.min.svg" alt="Optimized hero graphic" />.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }ডিজাইন হ্যান্ডঅফ ও ভার্সন কন্ট্রোল
- কোড রিভিউয়ের আগে ডিফ পড়া যায় এমন করতে এক্সপোর্ট করা এসভিজি সুন্দর করুন।
- সহযোগিতার জন্য একটি সুন্দর `.formatted.svg` এবং প্রোডাকশনের জন্য একটি `.min.svg` রাখুন।
- একটি ডিজাইন সিস্টেম জুড়ে সামঞ্জস্যপূর্ণ ইন্ডেন্টেশন এবং অ্যাট্রিবিউট অর্ডারিং প্রয়োগ করুন।
মোবাইল, ইমেইল ও হাইব্রিড অ্যাপস
- হালকা প্রচারণার জন্য HTML ইমেইলে ইনলাইন এসভিজি মিনিফাই করুন।
- অনেক আইকন শিপ করার সময় রিয়্যাক্ট নেটিভ / ক্যাপাসিটর / আইওনিক-এ অ্যাপ বান্ডিল সাইজ হ্রাস করুন।
- ধীর বা মিটারযুক্ত সংযোগে ব্যবহারকারীদের ব্যান্ডউইথ সাশ্রয় করুন।
❓ Frequently Asked Questions
❓এসভিজি ফরম্যাটিং কি?
📏মিনিফিকেশন কি আমার এসভিজির চেহারা পরিবর্তন করবে?
🔒আমার এসভিজি কি সার্ভারে আপলোড হয়?
🚀মিনিফিকেশন কতটা আকার সাশ্রয় করতে পারে?
⚠️`<metadata>` বা কমেন্ট সরালে কি আমার ওয়ার্কফ্লো ভেঙে যেতে পারে?
Pro Tips
পরিষ্কার ডিফের জন্য আপনার রেপোতে একটি আনমিনিফাইড `icon.formatted.svg` রাখুন, তারপর আপনার বিল্ড স্টেপের অংশ হিসাবে `icon.min.svg` জেনারেট করুন।
মিনিফাই করার আগে সর্বদা অর্থপূর্ণ `<title>` এবং `<desc>` এলিমেন্ট অন্তর্ভুক্ত করুন যাতে আপনার এসভিজিগুলি স্ক্রিন রিডারদের জন্য অ্যাক্সেসিবল থাকে।
ভারী ইলাস্ট্রেশন এবং চার্ট থেকে আরও বাইট বের করতে এসভিজি মিনিফিকেশনকে এইচটিটিপি কম্প্রেশন (Gzip/Brotli) এর সাথে একত্রিত করুন।
আইকন সেটের জন্য, একটি স্প্রাইট কৌশল বিবেচনা করুন: একবার মিনিফাই করুন, তারপর সর্বত্র এসভিজি কোড ডুপ্লিকেট করার পরিবর্তে `<use>` এর মাধ্যমে আইকনগুলি রেফারেন্স করুন।
Additional Resources
Other Tools
- সিএসএস সৌন্দর্যবর্ধক
- এইচটিএমএল সৌন্দর্যবর্ধক
- জাভাস্ক্রিপ্ট সৌন্দর্যবর্ধক
- পিএইচপি সৌন্দর্যবর্ধক
- রং নির্বাচক
- স্প্রাইট এক্সট্র্যাক্টর
- বেস৬৪ ডিকোডার
- বেস৬৪ এনকোডার
- সি-শার্প ফরম্যাটার
- সিএসভি ফরম্যাটার
- Dockerfile Formatter
- এলম ফরম্যাটার
- ইএনভি ফরম্যাটার
- গো ফরম্যাটার
- গ্রাফকিউএল ফরম্যাটার
- এইচসিএল ফরম্যাটার
- আইএনআই ফরম্যাটার
- জেসন ফরম্যাটার
- ল্যাটেক ফরম্যাটার
- মার্কডাউন ফরম্যাটার
- অবজেক্টিভসি ফরম্যাটার
- Php Formatter
- প্রোটো ফরম্যাটার
- পাইথন ফরম্যাটার
- রুবি ফরম্যাটার
- রাস্ট ফরম্যাটার
- স্কালা ফরম্যাটার
- শেল স্ক্রিপ্ট ফরম্যাটার
- এসকিউএল ফরম্যাটার
- Swift ফরম্যাটার
- TOML ফরম্যাটার
- Typescript Formatter
- XML ফরম্যাটার
- YAML ফরম্যাটার
- Yarn ফরম্যাটার
- সিএসএস মিনিফায়ার
- Html Minifier
- Javascript Minifier
- জেসন মিনিফায়ার
- XML মিনিফায়ার
- এইচটিটিপি হেডার ভিউয়ার
- পিডিএফ থেকে টেক্সট
- রেজেক্স টেস্টার
- সার্প র্যাংক চেকার
- Whois লুকআপ