टूल्स95

ऑप्टिमाइज़ / एक व्यावहारिक इमेज गाइड

SVG फ़ाइलों को कैसे कंप्रेस करें

एक हल्का वेक्टर तभी उपयोगी होता है जब सही विवरण बने रहें।

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

गाइड का पालन करें
एक सत्यापित स्रोत और उसका डाउनलोड किया गया परिणाम
पहले मूल बैंगनी कक्षा SVG आइकन।

मूल 985-बाइट SVG, इस तुलना के लिए 1,024 पिक्सेल पर रेंडर किया गया।

बाद में ऑप्टिमाइज़ किया गया SVG जो कक्षा आइकन को उसी डिस्प्ले आकार पर बनाए रखता है।

वास्तविक 635-बाइट SVG, उसी 1,024 पिक्सेल डिस्प्ले रिज़ॉल्यूशन पर रेंडर किया गया।

मूल 985-बाइट SVG, इस तुलना के लिए 1,024 पिक्सेल पर रेंडर किया गया। वास्तविक 635-बाइट SVG, उसी 1,024 पिक्सेल डिस्प्ले रिज़ॉल्यूशन पर रेंडर किया गया।
विज्ञापन
त्वरित वीडियो ट्यूटोरियल How to compress an SVG with a preview Choose an SVG, review the comparison, adjust precision and download the optimized vector. अंग्रेजी वर्णन वीडियो देखें

How to compress an SVG with a preview

विज्ञापन

इस उदाहरण का पालन करें, फिर उन्हीं कंट्रोल्स को अपनी छवि के लिए अपनाएं। SVG कंप्रेसर खोलें.

01

एक स्थिर SVG अपलोड करें या मार्कअप पेस्ट करें

SVG कंप्रेसर खोलें और एक SVG फ़ाइल चुनें या एक नमूना आज़माएं। नमूना svg-compressor.svg है, एक 985-बाइट ऑर्बिट मार्क जिसमें 512 × 512 व्यूबॉक्स, ग्रेडिएंट फिल, शीर्षक और विवरण है। जब मार्कअप पहले से ही किसी एडिटर या क्लिपबोर्ड में हो तो पेस्ट SVG का उपयोग करें।

यह टूल 2 MB प्रत्येक पर 20 फ़ाइलों तक स्वीकार करता है। यह एक पूर्ण SVG दस्तावेज़ को पार्स करता है और बाहरी फ़ाइलों को लोड किए बिना मानक SVG दस्तावेज़ घोषणाओं को हटा देता है। विकृत XML, कस्टम इकाई घोषणाएं और आंतरिक दस्तावेज़ सबसेट अस्वीकार कर दिए जाते हैं। बहुत जटिल फ़ाइलें तत्व या प्रसंस्करण-समय सीमा तक भी पहुँच सकती हैं।

यह वर्कफ़्लो स्थिर वेक्टर आर्टवर्क तैयार करता है। स्क्रिप्ट, इवेंट हैंडलर, बाहरी संसाधन, एनिमेशन और एम्बेडेड रैस्टर छवियों को हटा दिया जाता है। मूल पूर्वावलोकन पहले से ही सैनिटाइज़ किया गया है, इसलिए इसे स्रोत फ़ाइल में हर सुविधा की अप्रतिबंधित रेंडरिंग के रूप में नहीं समझा जाना चाहिए।

मूल SVG की एक प्रति रखें। एक इंटरैक्टिव चित्रण या एक SVG जिसमें एक तस्वीर है, एक स्थिर वेक्टर आइकन से अलग उपयोग का मामला है।

02

परिणाम की तुलना करें और दशमलव सटीकता सेट करें

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

सेटिंग्स खोलें और उदाहरण के लिए दशमलव सटीकता को 2 पर सेट करें। सटीकता 1 से 5 तक होती है और 3 से शुरू होती है। कम मान संख्यात्मक ज्यामिति को सरल बना सकते हैं लेकिन महीन वक्रों, छोटे अंतराल या संरेखित किनारों को स्थानांतरित कर सकते हैं। जब पूर्वावलोकन महत्वपूर्ण विवरण खो देता है तो इसे बढ़ाएं।

यह नमूना सीधी ज्यामिति का उपयोग करता है, इसलिए सटीकता 2 इसके पहचानने योग्य आकार को बनाए रखती है। जटिल दशमलव निर्देशांक वाले अन्य SVG अधिक बदल सकते हैं। अनुकूलित SVG मार्कअप देखें जो उस वास्तविक टेक्स्ट को उजागर करता है जिसे डाउनलोड किया जाएगा; यह मूल का अलग प्रतिनिधित्व नहीं है।

एक वेक्टर की उसके इच्छित प्रदर्शन आकार और बड़े दृश्य पर जांच करें। एक छोटे थंबनेल में सूक्ष्म बदलाव देखना मुश्किल हो सकता है।

इस गाइड में दिया गया उदाहरण

एक नमूना आज़माएं: svg-compressor.svg, 985 बाइट्स, 512 × 512 व्यूबॉक्स। दशमलव परिशुद्धता 2; सुलभ शीर्षक/विवरण रखें और आंतरिक आईडी को छोटा करना सक्षम; रिस्पॉन्सिव आयाम और पठनीय आउटपुट मार्कअप अक्षम। डाउनलोड किया गया SVG: 635 बाइट्स।

स्रोत SVG
985 बाइट्स
ऑप्टिमाइज़ किया गया SVG
635 बाइट्स
मापी गई कमी
35.5%
संरक्षित संदर्भ
शीर्षक, विवरण और 512 × 512 व्यूबॉक्स
03

विवरण सुरक्षित रखें और बाहरी IDs पर विचार करें

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

आंतरिक IDs को छोटा करें डिफ़ॉल्ट रूप से चालू है। ऑप्टिमाइज़र SVG के भीतर संदर्भों को अपडेट करता है, लेकिन बाहरी CSS या जावास्क्रिप्ट अभी भी मूल IDs पर निर्भर हो सकते हैं। जब फ़ाइल किसी बड़े एप्लिकेशन का हिस्सा हो जो अपने तत्वों को नाम देता है, तो इस विकल्प को बंद कर दें, और उस संदर्भ में तैयार SVG का परीक्षण करें।

उदाहरण के लिए रिस्पॉन्सिव आयाम और पठनीय आउटपुट मार्कअप को बंद रखें। रिस्पॉन्सिव आयाम निश्चित चौड़ाई और ऊंचाई को हटा देता है जब निर्देशांक व्यूबॉक्स स्केलेबल आकार प्रदान कर सकता है। पठनीय आउटपुट इंडेंटेशन जोड़ता है और रखरखाव के लिए उपयोगी है, लेकिन टेक्स्ट का आकार बढ़ा सकता है।

एक स्टैंडअलोन आइकन फ़ाइल के लिए, आंतरिक ID सफाई आमतौर पर सीधी होती है। बाहरी रूप से स्क्रिप्ट किए गए आरेख के लिए, पहचानकर्ताओं को संरक्षित करना कुछ सहेजे गए बाइट्स से अधिक मायने रख सकता है।

04

तैयार वेक्टर को डाउनलोड और सत्यापित करें

स्टार्ट चुनें, फिर डाउनलोड करें। कार्यशील आउटपुट 985-बाइट स्रोत की तुलना में 635 बाइट्स है: 35.5% की कमी। इसका शीर्षक और विवरण बना रहता है, और प्रदर्शित तुलना वास्तविक स्रोत और डाउनलोड किए गए SVG से प्रस्तुत की जाती है।

यह लेख परिणाम के स्पष्ट चित्रण के लिए दोनों वेक्टर को 1,024 पिक्सेल पर रेंडर करता है; उनका तार्किक समन्वय आकार 512 × 512 रहता है। एक बड़ा पूर्वावलोकन सहेजी गई SVG में कोई रैस्टर सामग्री नहीं जोड़ता है। मौजूदा प्रोडक्शन एसेट को बदलने से पहले अपने गंतव्य पृष्ठ में वास्तविक वेक्टर की समीक्षा करें।

एक फ़ाइल अपने मूल बेसनाम के साथ SVG के रूप में डाउनलोड होती है। एक बैच एक ZIP के रूप में डाउनलोड होता है, जिसमें डुप्लिकेट फ़ाइल नामों के लिए क्रमांकित प्रत्यय होते हैं। प्रोसेसिंग ब्राउज़र में होती है। यदि आप बाद में अलग-अलग ऑप्टिमाइज़ेशन सेटिंग्स आज़माना चाहते हैं तो मूल स्रोत को सुरक्षित रखें।

फ़ाइल-आकार की बचत केवल इस नमूने के आधार पर मापी जाती है। पहले से ऑप्टिमाइज़ की गई SVG में बहुत कम सुधार दिख सकता है या वह थोड़ी बड़ी हो सकती है।

उपयोगी विवरण

सामान्य प्रश्न

क्या ऑप्टिमाइज़्ड SVG बिल्कुल वैसा ही दिखेगा?

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

दशमलव परिशुद्धता क्या बदलती है?

यह संख्यात्मक ज्यामिति और पथ डेटा के लिए उपयोग की जाने वाली परिशुद्धता को नियंत्रित करता है। कम मान आकार को कम कर सकते हैं लेकिन बारीक विवरणों को स्थानांतरित कर सकते हैं। डिफ़ॉल्ट 3 है।

क्या यह शीर्षक और विवरण रखता है?

हाँ, डिफ़ॉल्ट रूप से। उन SVG तत्वों को संरक्षित करने के लिए 'सुलभ शीर्षक और विवरण रखें' को सक्षम रखें।

स्क्रिप्ट या रैस्टर चित्र गायब क्यों हैं?

यह टूल एक स्थिर वेक्टर आउटपुट बनाता है। स्वच्छता के दौरान स्क्रिप्ट, ईवेंट, बाहरी संसाधन, एनिमेशन और एम्बेडेड रैस्टर चित्रों को जानबूझकर हटा दिया जाता है।

क्या मैं CSS द्वारा संदर्भित आईडी रख सकता हूँ?

जब बाहरी कोड विशिष्ट आईडी पर निर्भर हो तो 'आंतरिक आईडी छोटा करें' को बंद कर दें। मूल फ़ाइल को बदलने से पहले लक्षित पृष्ठ में अनुकूलित फ़ाइल को सत्यापित करें।

क्या SVG फ़ाइलें अनुकूलन के लिए अपलोड की जाती हैं?

नहीं। टूल ब्राउज़र में पार्सिंग और अनुकूलन करता है और परिणाम को स्थानीय रूप से डाउनलोड करता है।

क्या मैं DOCTYPE के साथ SVG अपलोड कर सकता हूँ?

एक मानक SVG दस्तावेज़ घोषणा स्वीकार की जाती है और उसके बाहरी पहचानकर्ता को लाए बिना हटा दी जाती है। कस्टम इकाई घोषणाएं और आंतरिक दस्तावेज़ उपसमुच्चय अस्वीकार कर दिए जाते हैं।

आपकी बारी

वेक्टर को हल्का बनाएं, एक ऐसे परिणाम के साथ जिसे आप देख सकें।

एक नमूना आज़माएं या अपनी खुद की फ़ाइल का उपयोग करें, और साझा करने से पहले परिणाम की समीक्षा करें।

SVG कंप्रेसर खोलें

छवि विवरण

भाषा38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

अपनी भाषा चुनें। वीडियो ट्यूटोरियल में वर्तमान में अंग्रेजी नैरेशन का उपयोग किया जाता है।