Loading…

के बारे में ऑनलाइन एसवीजी ब्यूटिफायर और मिनिफायर

गड़बड़ या बड़े आकार की एसवीजी फाइलों के साथ काम कर रहे हैं? अपना कोड पेस्ट करें या एक `.svg` फाइल अपलोड करें, **फॉर्मेट** चुनकर सुंदर बनाएं या **मिनिफाई** चुनकर इसका आकार घटाएं, और तुरंत साफ़, ऑप्टिमाइज़्ड एसवीजी मार्कअप प्राप्त करें। डिजाइनरों, फ्रंट-एंड डेवलपर्स और उन सभी के लिए आदर्श जिन्हें तेज़, सुरक्षित वेक्टर ऑप्टिमाइज़ेशन की आवश्यकता है। 🚀

हमारे एसवीजी फॉर्मेटर की मुख्य विशेषताएं

  • **ब्यूटिफाई मोड** स्मार्ट इंडेंटेशन, लाइन रैपिंग और एट्रिब्यूट अलाइनमेंट के साथ
  • **मिनिफाई मोड** जो व्हाइटस्पेस, कमेंट्स और रिडंडेंट मेटाडेटा हटाता है
  • हुड के नीचे प्रीटियर-स्टाइल फॉर्मेटिंग और एसवीजीओ-स्टाइल ऑप्टिमाइज़ेशन
  • कॉन्फ़िगरेबल इंडेंट स्टाइल (स्पेस या टैब्स) और इंडेंट साइज़
  • ऑप्शनल रैप कॉलम लंबे पाथ्स और एट्रिब्यूट्स को टाइडी रखने के लिए
  • सुसंगत अंत-पंक्ति शैली (LF / CRLF) जो विभिन्न OS पर स्वच्छ अंतर प्रदान करती है
  • 5 MB तक की `.svg` फ़ाइलें ड्रैग-एंड-ड्रॉप करें या इनलाइन SVG मार्कअप पेस्ट करें
  • 100% क्लाइंट-साइड प्रोसेसिंग — आपकी कलाकृति ब्राउज़र से बाहर कभी नहीं जाती
  • फ़ॉर्मेटेड (`.formatted.svg`) या मिनिफाइड (`.min.svg`) आउटपुट की वन-क्लिक कॉपी या डाउनलोड
  • रिस्पॉन्सिव UI जो लैपटॉप, डेस्कटॉप और टैबलेट पर अच्छी तरह काम करता है

🔧 SVG को फ़ॉर्मेट या मिनिफाई कैसे करें: त्वरित मार्गदर्शिका for svg-formatter

1

1. SVG पेस्ट या अपलोड करें

📥 अपनी `.svg` फ़ाइल ड्रैग-एंड-ड्रॉप करें या कच्चा SVG मार्कअप एडिटर में पेस्ट करें। टूल `image/svg+xml` कंटेंट को स्वचालित रूप से पहचान लेता है।

2

2. फ़ॉर्मेट या मिनिफाई चुनें

✨ मानव-पठनीय मार्कअप के लिए **फ़ॉर्मेट** चुनें (समीक्षा और वर्जन कंट्रोल के लिए बढ़िया) या न्यूनतम फ़ाइल आकार के लिए **मिनिफाई** चुनें।

3

3. फ़ॉर्मेटिंग विकल्प समायोजित करें

⚙️ **इंडेंट स्टाइल** (स्पेस या टैब), **इंडेंट साइज़** और वैकल्पिक **रैप / लाइन लंबाई** समायोजित करें। ये सीधे अंतर्निहित फ़ॉर्मेटर सेटिंग्स से मैप होते हैं।

4

4. पूर्वावलोकन और निर्यात

👀 ऑप्टिमाइज्ड SVG कोड का निरीक्षण करें, इसे अपने प्रोजेक्ट में जल्दी टेस्ट करें, फिर इसे क्लिपबोर्ड पर कॉपी करें या नई `.svg` फ़ाइल के रूप में डाउनलोड करें।

तकनीकी विवरण

सुंदरीकरण इंजन (फ़ॉर्मेट मोड)

फ़ॉर्मेट मोड SVG XML मार्कअप के लिए ट्यून किए गए Prettier-स्टाइल इंजन का उपयोग करता है। यह पठनीयता और स्थिर, पूर्वानुमेय अंतरों पर केंद्रित है।

पहलूव्यवहारटिप्पणियाँ
इंडेंट स्टाइलस्पेस या टैब**इंडेंट स्टाइल** के माध्यम से कॉन्फ़िगर करने योग्य (`indentStyle` से मैप होता है)।
इंडेंट साइज़1–8 स्पेसस्पेस उपयोग करते समय नेस्टिंग चौड़ाई नियंत्रित करता है (`indentSize` से मैप होता है)।
रैप / लाइन लंबाई0–120 कॉलम`0` रैपिंग अक्षम करता है; अन्यथा लंबी लाइनें चुने गए कॉलम के आसपास रैप होती हैं (`wrapLineLength` से मैप होता है)।
अंत-पंक्तिLF (`\n`) या CRLF (`\r\n`)विभिन्न OS पर लाइन समाप्ति सुसंगत रखता है (`endOfLine` से मैप होता है)।
आउटपुट भाषाXML-शैली SVGसुरक्षित एम्बेडिंग के लिए SVG-संगत XML संरचना बनाए रखता है।

मिनीफिकेशन पाइपलाइन (मिनीफाई मोड)

मिनीफाई मोड आकार कम करने पर केंद्रित SVGO-प्रेरित पाइपलाइन का उपयोग करता है, जबकि दृश्य आउटपुट संरक्षित रहता है।

चरणविवरणप्रभाव
टिप्पणियाँ हटाएँ`<!-- ... -->` टिप्पणी नोड्स हटाता है जो रेंडरिंग को प्रभावित नहीं करते।छोटी फाइलें, साफ़ अंतर।
अनावश्यक रिक्त स्थान हटाएँअनावश्यक स्पेस, टैब और लाइन ब्रेक को संकुचित करता है।वर्बोज़ एडिटर-निर्यातित SVGs के लिए बड़ा लाभ।
मेटाडेटा ट्रिम करेंवैकल्पिक रूप से गैर-रेंडरिंग मेटाडेटा नोड्स हटाता है जब सुरक्षित हो।सार्वजनिक उत्पादन संपत्तियों के लिए अच्छा।
विशेषताएँ सामान्य करेंविशेषताओं को स्थिर तरीके से सरल और पुन: क्रमित करता है।अधिक कॉम्पैक्ट आउटपुट, बेहतर कैशेबिलिटी।

एन्कोडिंग और संगतता

आउटपुट UTF-8 SVG है जो आधुनिक ब्राउज़रों और टूलिंग के साथ संगत है, SVG 2 विशिष्टता के अनुरूप।

प्रदर्शन और सीमाएँ (सामान्य डेस्कटॉप ब्राउज़र)

फ़ाइल प्रकारइनपुट आकारब्यूटिफाई समयमिनीफाई समयसामान्य आकार कमी
आइकन5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
चित्रण100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
हीरो ग्राफिक500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
वास्तविक प्रदर्शन आपके CPU, ब्राउज़र और SVG जटिलता पर निर्भर करता है।

पावर यूजर्स के लिए CLI विकल्प

टर्मिनल वर्कफ़्लो या CI एकीकरण पसंद है? इस टूल के समान व्यवहार के लिए Prettier और SVGO को संयोजित करें:

लिनक्स / 🍎 macOS

Prettier के साथ SVG को सुंदर बनाएं

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

आपके SVG मार्कअप को सुसंगत इंडेंटेशन और लाइन रैपिंग लागू करता है।

SVGO के साथ SVG को छोटा करें

npx svgo input.svg -o input.min.svg

छोटी फ़ाइलों के लिए टिप्पणियाँ, मेटाडेटा और अनावश्यक व्हाइटस्पेस हटाता है।

विंडोज (PowerShell या CMD)

xmlstarlet का उपयोग करके SVG को प्रीटी-प्रिंट करें (WSL या नेटिव के माध्यम से)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

2-स्पेस इंडेंट के साथ SVG/XML को फ़ॉर्मेट करता है।

SVGO के साथ SVG को छोटा करें (कोई ग्लोबल इंस्टॉल नहीं)

npx svgo input.svg -o min.svg

एक-बार के ऑप्टिमाइज़ेशन के लिए `npx` के माध्यम से सीधे SVGO चलाता है।

Prettier + SVGO को अपने बिल्ड या प्री-कमिट हुक्स में जोड़ें ताकि डिज़ाइनर रॉ SVG एक्सपोर्ट कर सकें और आपकी पाइपलाइन उन्हें ऑप्टिमाइज़ रखे।

व्यावहारिक अनुप्रयोग

वेब प्रदर्शन और फ्रंटएंड बंडल

  • डिज़ाइन सिस्टम, आइकन सेट और स्प्राइट शीट में SVG पेलोड कम करें।
  • अतिरिक्त HTTP अनुरोध बचाने के लिए HTML/CSS में मिनिफाइड SVG इनलाइन करें।
  • लैंडिंग पेजों पर हीरो इलस्ट्रेशन को सिकोड़कर Core Web Vitals में सुधार करें।
<img src="/assets/hero.min.svg" alt="Optimized hero graphic" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

डिज़ाइन हैंडऑफ और वर्जन कंट्रोल

  • डिफ़्स को पठनीय बनाने के लिए कोड रिव्यू से पहले एक्सपोर्ट किए गए SVG को सुंदर बनाएं।
  • सहयोग के लिए एक सुंदर `.formatted.svg` और प्रोडक्शन के लिए एक `.min.svg` रखें।
  • डिज़ाइन सिस्टम में सुसंगत इंडेंटेशन और एट्रिब्यूट ऑर्डरिंग लागू करें।

मोबाइल, ईमेल और हाइब्रिड ऐप्स

  • हल्के अभियानों के लिए HTML ईमेल में इनलाइन SVG को छोटा करें।
  • कई आइकन शिप करते समय React Native / Capacitor / Ionic में ऐप बंडल आकार कम करें।
  • धीमे या मीटर्ड कनेक्शन पर उपयोगकर्ताओं के लिए बैंडविड्थ बचाएं।

❓ Frequently Asked Questions

❓एसवीजी फॉर्मेटिंग क्या है?

फॉर्मेटिंग (या सुंदरीकरण) आपके एसवीजी मार्कअप को सुसंगत इंडेंटेशन, लाइन ब्रेक और विशेषता क्रम के साथ पुनर्गठित करती है। यह छवि के रेंडरिंग को नहीं बदलती, केवल कोड की दिखावट और डिफ-व्यवहार को प्रभावित करती है।

📏क्या मिनीफिकेशन मेरे एसवीजी की उपस्थिति बदल देगा?

सामान्य मामलों में नहीं। मिनीफिकेशन टिप्पणियों, अतिरिक्त व्हाइटस्पेस और गैर-रेंडरिंग मेटाडेटा को हटाता है। यह आकार कम करते हुए दृश्य परिणाम को संरक्षित रखने के लिए डिज़ाइन किया गया है। यदि आप संपादन उपकरणों के लिए विशेष मेटाडेटा पर निर्भर हैं, तो मूल फ़ाइल का बैकअप रखें।

🔒क्या मेरा एसवीजी सर्वर पर अपलोड होता है?

कभी नहीं। सभी फॉर्मेटिंग और मिनीफिकेशन पूरी तरह से आपके ब्राउज़र में जावास्क्रिप्ट/वेबएसेम्बली का उपयोग करके चलते हैं। आपकी एसवीजी फ़ाइलें किसी सर्वर पर नहीं भेजी जातीं और न ही दूरस्थ रूप से संग्रहीत की जाती हैं।

🚀मिनीफिकेशन से कितना आकार बचाया जा सकता है?

वास्तविक बचत आमतौर पर **30% से 70%** के बीच होती है, यह इस बात पर निर्भर करता है कि एसवीजी को कैसे निर्यात किया गया था और इसमें कितना मेटाडेटा या व्हाइटस्पेस शामिल है।

⚠️क्या `<metadata>` या टिप्पणियों को हटाने से मेरा वर्कफ़्लो टूट सकता है?

सार्वजनिक वेब ग्राफिक्स के लिए, मेटाडेटा और टिप्पणियों को हटाना आमतौर पर सुरक्षित है। हालाँकि, यदि आपके डिज़ाइन उपकरण उन खंडों में संपादन डेटा या लाइसेंसिंग जानकारी संग्रहीत करते हैं, तो भविष्य के संपादनों के लिए संस्करण नियंत्रण में एक मूल, अमिनीफाइड प्रति रखें।

Pro Tips

Best Practice

साफ डिफ्स के लिए अपने रेपो में एक अमिनीफाइड `icon.formatted.svg` रखें, फिर अपने बिल्ड स्टेप के हिस्से के रूप में `icon.min.svg` जनरेट करें।

Best Practice

मिनीफाई करने से पहले हमेशा सार्थक `<title>` और `<desc>` तत्व शामिल करें ताकि आपके एसवीजी स्क्रीन रीडर के लिए सुलभ रहें।

Best Practice

एसवीजी मिनीफिकेशन को एचटीटीपी कम्प्रेशन (ग्जिप/ब्रॉटली) के साथ जोड़कर भारी चित्रों और चार्ट्स से और भी बाइट्स बचाएं।

Best Practice

आइकन सेट के लिए, एक स्प्राइट रणनीति पर विचार करें: एक बार मिनीफाई करें, फिर हर जगह एसवीजी कोड डुप्लिकेट करने के बजाय `<use>` के माध्यम से आइकन्स को रेफरेंस करें।

Additional Resources

डब्ल्यू3सी एसवीजी 2 विशिष्टता
Documentation
एमडीएन वेब डॉक्स: एसवीजी
Documentation
एसवीजीओ (गिटहब)
Documentation
प्रीटियर एक्सएमएल / एसवीजी फॉर्मेटिंग
Documentation

Other Tools