SVG व्यूअर और मिनिफायर

SVG व्यूअर और मिनिफायर क्या है?#

SVG वेब पर आइकन, लोगो, और लाइन आर्ट हेतु पसंदीदा प्रारूप है — यह किसी भी आकार पर क्रिस्प रहता है और टेक्स्ट के रूप में संपादन योग्य है। पर डिज़ाइन टूल द्वारा निर्यात SVG फ़ाइलें बहुत कबाड़ लिए होती हैं: Inkscape और Sodipodi एडिटर नेमस्पेस, <metadata> ब्लॉक, लेखक टिप्पणियाँ, और हर टैग के बीच रिक्त स्थान। वह बोझ फ़ाइल को फुलाता है और स्रोत पढ़ने वाले का दिमाग खराब करता है। एक SVG मिनिफायर जो रेंडरिंग को प्रभावित नहीं करता उसे हटाता है और रिपोर्ट करता है कि कितना बचाया।

यह पृष्ठ व्यूअर और मिनिफायर दोनों है। बाईं ओर SVG स्रोत चिपकाएँ, दाईं ओर रेंडर हुआ देखें, टिप्पणियाँ, मेटाडेटा, एडिटर नेमस्पेस, और अंतर-तत्व रिक्त स्थान हटाने वाला स्वयं लिखित सफ़ाई पास चलाने हेतु मिनिफाई पर स्विच करें, और बाइट बचत पढ़ें। पूर्वावलोकन एक छवि data URI के माध्यम से रेंडर होता है ताकि SVG में एम्बेडेड कोई भी स्क्रिप्ट कभी न चले — आप सुरक्षित रूप से किसी अविश्वसनीय फ़ाइल की जाँच कर सकते हैं।

इसका उपयोग कैसे करें#

1. अपना SVG बाईं ओर इनपुट पेन में चिपकाएँ, या एक छोटा उदाहरण लोड करने हेतु नमूना क्लिक करें।
2. आउटपुट पेन और पूर्वावलोकन तुरंत अद्यतन होते हैं। डिफ़ॉल्ट रूप से टूलबार मिनिफाई पर होता है, इसलिए आउटपुट साफ़, छोटा SVG है।
3. यदि आप चाहते हैं कि आउटपुट मूल, अछूता स्रोत दिखाए (मिनिफाइड संस्करण से तुलना हेतु उपयोगी) तो मूल पर स्विच करें।
4. पेन के अंतर्गत आँकड़ा पैनल पढ़ें:
   • पहले बाइट्स / बाद में बाइट्स / बचत — इनपुट बनाम आउटपुट का UTF-8 आकार, और बचाया गया प्रतिशत।
   • हटाया गया सारांश — कितनी टिप्पणियाँ, मेटाडेटा ब्लॉक, एडिटर तत्व, एडिटर विशेषताएँ, और रिक्त-स्थान नोड हटाए गए।
   • viewBox — मूल <svg> से पढ़ा गया width / height / viewBox ज्यामिति, ताकि आप एक नज़र में आर्टबोर्ड आकार की पुष्टि कर सकें।
5. मिनिफाइड SVG लेने हेतु आउटपुट पेन पर कॉपी या डाउनलोड का उपयोग करें। दोनों पेन मिटाने हेतु साफ़ करें का उपयोग करें।

मुख्य विशेषताएँ#

• एक वास्तविक मिनिफायर, शून्य से लिखा — svgo नहीं। svgo मानक Node टूल है, लेकिन यह Node के fs और path पर निर्भर है और ब्राउज़र में साफ़ नहीं चलता। यह पृष्ठ अपना स्वयं का ट्री वॉक लेकर आता है, इसलिए शून्य सर्वर-साइड निर्भरता के साथ काम करता है।
• कबाड़ की पाँच श्रेणियाँ हटाई गईं। टिप्पणियाँ, <metadata> ब्लॉक, Inkscape/Sodipodi नेमस्पेस तत्व और विशेषताएँ, और अंतर-तत्व रिक्त स्थान — प्रत्येक गिना और रिपोर्ट किया।
• टेक्स्ट-जागरूक रिक्त-स्थान प्रबंधन। <text>, <tspan>, <title>, <desc>, <style>, और <script> के अंदर का रिक्त स्थान सुरक्षित रखा जाता है, ताकि लेबल और एम्बेडेड CSS इस पास में बचें।
• सुरक्षित पूर्वावलोकन। रेंडर एक data URI वाले <img> का उपयोग करता है, जिसे ब्राउज़र गैर-निष्पादन वाली छवि मानता है — SVG में एम्बेडेड स्क्रिप्ट नहीं चलतीं। आप बिना जोखिम किसी अविश्वसनीय फ़ाइल को चिपका सकते हैं।
• ईमानदार बाइट लेखा। आकार UTF-8 बाइट्स में मापे जाते हैं (अक्षर गणना नहीं), इसलिए CJK टेक्स्ट या इमोजी वाली फ़ाइल अपना वास्तविक ऑन-वायर आकार रिपोर्ट करती है।
• 100% स्थानीय। पार्सिंग और क्रमानुसारण आपके ब्राउज़र में होते हैं। SVG कभी पृष्ठ से बाहर नहीं जाता।

विस्तृत उदाहरण#

एक सामान्य Inkscape निर्यात कई पंक्तियों के एडिटर नेमस्पेस घोषणाओं और वास्तविक आर्ट से पहले एक <metadata> ब्लॉक के साथ खुल सकता है:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

इसे चिपकाएँ, मोड मिनिफाई पर छोड़ें, और आउटपुट सिकुड़ कर यह हो जाता है:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

आँकड़ा पैनल लगभग पहले बाइट्स ~520, बाद में बाइट्स ~210, बचत ~60% रिपोर्ट करता है, हटाए गए सारांश में 1 टिप्पणी, 1 मेटाडेटा ब्लॉक, और 1 एडिटर विशेषता (inkscape:connector-curvature) दिखाता है। चेकमार्क पूर्वावलोकन में समान रूप से रेंडर होता है — ऐसी कोई चीज़ नहीं हटाई गई जो रेखांकन को प्रभावित करती।

अक्सर पूछे जाने वाले प्रश्न#

क्या यह SVG में एम्बेडेड स्क्रिप्ट चलाता है?#

नहीं। पूर्वावलोकन <img src="data:image/svg+xml;base64,…"> के रूप में रेंडर होता है, और <img> से लोड की गई छवियाँ गैर-स्क्रिप्टिंग संदर्भ हैं — ब्राउज़र उस SVG के अंदर कोई <script> निष्पादित नहीं करेगा। यह पृष्ठ को ऐसी SVG फ़ाइलों की जाँच हेतु सुरक्षित बनाता है जिन्हें आपने नहीं बनाया। हालाँकि, स्रोत <script> टैग मिनिफाइड आउटपुट में सुरक्षित रहता है; क्या यह चलता है यह इस बात पर निर्भर है कि आप SVG को बाद में कैसे एम्बेड करते हैं।

केवल svgo क्यों नहीं उपयोग करते?#

svgo Node बिल्ड पाइपलाइन में सही टूल है, लेकिन यह Node के fs और path मॉड्यूल पर निर्भर है और ब्राउज़र टैब में साफ़ नहीं चलता। इस पृष्ठ का मिनिफायर कोई Node निर्भरता रहित स्व-निहित ट्री वॉक है, इसलिए पूरी तरह क्लाइंट-साइड काम करता है — कीमत यह है कि यह svgo के गहरे अनुकूलनों से कम आक्रामक है।

मेरी फ़ाइल पर बचत छोटी है।#

पहले से हाथ से लिखी फ़ाइलों (कोई एडिटर नेमस्पेस, कोई मेटाडेटा, कोई टिप्पणी नहीं) हटाने हेतु बहुत कम होती हैं, इसलिए बचत केवल रिक्त स्थान से कुछ प्रतिशत हो सकती है। सबसे बड़ा लाभ डिज़ाइन-टूल निर्यात से आता है — Inkscape, Illustrator — ठीक वहीं जहाँ अधिकांश कबाड़ उत्पन्न होता है।

क्या मिनिफ़िकेशन SVG रेंडरिंग बदलता है?#

नहीं, उन श्रेणियों हेतु जो यह टूल हटाता है: टिप्पणियाँ, मेटाडेटा, एडिटर नेमस्पेस, और अंतर-तत्व रिक्त स्थान में कोई रेंडरिंग सिमेंटिक्स नहीं। टेक्स्टुअल तत्वों (<text>, <title>, <desc>, <style>, <script>) के अंदर का रिक्त स्थान जानबूझकर सुरक्षित रखा जाता है, क्योंकि वहाँ यह भार-वहन कर सकता है।