जैसा कि Wrzlprmft ने पहले ही बताया है, आपकी SVG फाइल का 50% से अधिक आकार एक एम्बेडेड PNG बिटमैप छवि द्वारा लिया जाता है जिसका उपयोग नियंत्रक पर काफी सूक्ष्म छायांकन प्रभाव बनाने के लिए किया जाता है। बस उस छवि से छुटकारा पा रहा है, और इसे एक साधारण रेडियल ढाल के साथ बदलना, एसवीजी को लगभग 10kb तक सिकोड़ने के लिए पर्याप्त है।
बाईं ओर फैंसी बिटमैप छायांकन के साथ मूल छवि, दाईं ओर सरल रेडियल ढाल के साथ संपादित संस्करण।
जब आप इस पर होते हैं, तो आपको यह देखने के लिए कि क्या वहाँ कुछ भी सरल है, अपने रास्तों की जाँच करनी चाहिए। मुझे बहुत कुछ नहीं मिला, लेकिन आपके नियंत्रक की रूपरेखा में कुछ आसन्न नोड्स हैं (ऊपर और नीचे मध्य के पास) जो बिना किसी दृश्यमान अंतर के विलय किया जा सकता है।
यह एक आसान 50% की बचत है, लेकिन चलो अभी तक रोक नहीं है। यदि आप एसवीजी प्रारूप के बारे में थोड़ा भी जानते हैं , तो आप उससे बहुत बेहतर कर सकते हैं ।
सबसे पहले, बेकार परिभाषाओं से छुटकारा पाने के लिए इंकस्केप में "वैक्यूम डेक्स" चलाएं, और फिर छवि को "सादे एसवीजी" के रूप में सहेजें। अब, यह एक पाठ संपादक में इसे खोलने का समय है, और देखें कि हम क्या छुटकारा पा सकते हैं। आदर्श रूप से, आपको एक एकीकृत एसवीजी पूर्वावलोकन के साथ एक संपादक का उपयोग करना चाहिए, ताकि आप जल्दी से देख सकें कि आपके संपादन में छवि का क्या प्रभाव (उम्मीद है, कोई नहीं)। मैं उस के लिए emacs का उपयोग करता हूं , लेकिन अन्य संपादकों के समान विशेषताएं हैं।
वैसे भी, आपके टेक्स्ट एडिटर में SVG फाइल के खुलने के बाद, इसे सरल करना शुरू करें!
ठीक ऊपर, एक बड़ा बेकार है <!-- comment -->। बस इसे हटा दें।
यदि आप इलस्ट्रेटर से सीधे एक एसवीजी का संपादन कर रहे हैं, तो एक बेकार <!DOCTYPE ... >लाइन भी है । इसे भी हटा दें।
इंकस्केप एक बेकार आरडीएफ मेटाडेटा ब्लॉक को आपकी छवि में चिपकाने पर जोर देता है। बस <metadata ...>टैग को ढूंढें और इसे हटाएं और समापन सहित सब कुछ के साथ </metadata>।
इसके अलावा, भले ही आप फ़ाइल को "सादे SVG" के रूप में सहेजते हों, Inkscape अभी भी कस्टम विशेषताओं के एक समूह के साथ इसे लिट करता है। प्रत्येक विशेषता को खोजें जो उनके साथ शुरू होती है inkscape:या sodipodi:उन्हें हटा देती है।
मेटाडेटा और इंकस्केप-विशिष्ट विशेषताओं के चले जाने के साथ, आप <svg>टैग से सभी अप्रयुक्त XML नामस्थान विशेषताओं को हटा सकते हैं । यह कम से कम दूर करने के लिए सुरक्षित होना चाहिए xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapeऔर xmlns:sodipodi। यदि कोई अनावश्यक xmlns:svgविशेषता है, तो उसे भी हटा दें। इस बिंदु पर आपके पास केवल नाम स्थान की विशेषताएँ होनी चाहिए:
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
<svg>टैग भी इस तरह के रूप में अन्य बेकार गुण आप सुरक्षित रूप से हटा सकते हैं, का एक समूह है enable-backgroundऔर xml:space="preserve"। (उन इलस्ट्रेटर एसवीजी निर्यातक द्वारा डाला जाता है, और इंकस्केप स्मार्ट पर्याप्त महसूस करने के लिए वे बेकार कर रहे हैं नहीं है।) viewBoxविशेषता भी सुरक्षित रूप से, इस छवि से हटाया जा सकता है के बाद से यह सिर्फ के मूल्यों को दोहराता है x, y, widthऔर heightगुण।
आप टैग से सुरक्षित रूप से विशेषताओं encodingऔर standaloneविशेषताओं को भी हटा सकते हैं <?xml ... ?>।
अब आइए इमेज डेटा की हिम्मत हासिल करें। किसी कारण से, Inkscape idहर तत्व को विशेषता प्रदान करने पर जोर देता है , भले ही वे कभी भी संदर्भित न हों। कोई भी idविशेषता जिसका मूल्य फ़ाइल में कहीं और दोहराया नहीं गया है (इसके लिए खोज!) को हटाने के लिए सुरक्षित है। मूल रूप से, केवल आईडी जो आपको रखने की आवश्यकता होती है, वे ग्रेडिएंट्स के लिए हैं, और संभवतः किसी भी अन्य ऑब्जेक्ट्स (जैसे पथ) को <defs>अनुभागों के अंदर पाया जाता है ।
इसके अलावा, Inkscape लंबी आईडी जनरेट करना पसंद करता है linearGradient4277। किसी भी आईडी को संक्षिप्त करने पर विचार करें, जिसे आप lg1इसके बजाय कुछ कम में नहीं हटा सकते ।
<defs>एक के बाद एक कई खंड भी हैं । उन्हें जोड़ना कुछ बाइट्स को बचाता है (और सामान्य रूप से दस्तावेज़ संरचना को सरल करता है)।
<g>फ़ाइल के अंत में कई खाली समूह ( तत्व) भी हैं । बस इनसे छुटकारा पा लें। सटीक transformगुण (या कोई भी नहीं) के साथ कई लगातार समूह भी हो सकते हैं ; उनका विलय करना भी सुरक्षित है।
कुछ अजीब कारण के लिए, Inkscape तत्वों के dलिए एक अनावश्यक बेजियर पथ ( विशेषता) बचाता है <circle>। यह पूरी तरह से बिना किसी कारण के लिए जगह लेता है, इसलिए बस उन्हें हटा दें। ( तत्वों dपर विशेषताओं को छोड़ दें <path>; जो वास्तव में किसी चीज़ के लिए उपयोग किए जाते हैं।)
इंकस्केप उन styleविशेषताओं में सीएसएस का उपयोग करना भी पसंद करता है जहां अधिक विशिष्ट विशेषताएं छोटी होंगी, जैसे fill="#4888fa"अधिक क्रिया के लिए पुनर्लेखन style="fill:#4888fa"। आप उन शैलियों को अलग-अलग विशेषताओं में तोड़कर (और केवल बेकार सेटिंग को दोहराते हुए हटाकर) कुछ बाइट्स बचा सकते हैं, लेकिन ऊपर के अधिकांश परिवर्तनों की तुलना में एसवीजी प्रारूप के साथ थोड़ा अधिक परिचित होना चाहिए।
इसके अलावा, यदि कोई <use ... >तत्व हैं, तो आप कुछ बाइट्स को उनके द्वारा लिंक किए जा रहे वास्तविक तत्व के साथ बदलकर सहेज सकते हैं। (बेशक, यह केवल अंतरिक्ष को बचाता है यदि लिंक किए गए तत्वों को केवल एक बार उपयोग किया जाता है।) यह भी लगता है कि इंकस्केप अप्रत्यक्ष रूप से परिपत्र ढाल को परिभाषित करना पसंद करता है, पहले स्टॉप को परिभाषित करता है <linearGradient>, और फिर उन्हें एक में संदर्भित करता है <radialGradient>; आप रेडियल ग्रेडिएंट के अंदर सीधे स्टॉप को स्थानांतरित करके, और अब अप्रयुक्त रैखिक ढाल से छुटकारा पा सकते हैं। एक बोनस के रूप में, यदि, ऐसा करने से, आप सभी xlink:hrefविशेषताओं से छुटकारा पाने में कामयाब रहे , तो आप टैग xmlns:xlinkसे विशेषता को हटा सकते हैं <svg>।
यदि आप वास्तव में हर अंतिम अतिरिक्त बाइट को निचोड़ना चाहते हैं, तो बहुत अधिक दशमलव के साथ संख्यात्मक मूल्यों की तलाश करें, और उन्हें कुछ और समझदार बनाने के लिए गोल करें। यह वह जगह है जहां लाइव पूर्वावलोकन वास्तव में मदद करता है, क्योंकि यह आपको यह देखने देता है कि आप दिखाई देने से पहले मूल्य को कितना गोल कर सकते हैं। यहां तक कि अगर आप ध्यान से हर नंबर का परीक्षण नहीं करना चाहते हैं, तो यह देखने के लिए कि यह कितना गोल हो सकता है, हालांकि, आप कम से कम लटकने वाले फलों को चुन सकते हैं, जैसे, 1.0000859पिक्सेल के मूल्य को केवल गोल करना 1।
अंत में, फ़ाइल में इंडेंटेशन और व्हाट्सएप को साफ करें। बाइट की संख्या को पूरी तरह से कम करने के लिए, आपको सब कुछ एक लाइन पर रखना होगा (या कम से कम, केवल विशेषताओं के सामने लाइन ब्रेक लगाना होगा, जहां व्हाट्सएप की आवश्यकता है), लेकिन यह वास्तव में पढ़ना मुश्किल है। फिर भी, कुछ सरल, रूढ़िवादी इंडेंटेशन के साथ पठनीयता और कॉम्पैक्टनेस के बीच एक सभ्य संतुलन बनाना संभव है।
वैसे भी, यहाँ है कि मैं क्या आपके एसवीजी छवि को हाथ से संपादित करने में कामयाब रहा:
<?xml version="1.0"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
<linearGradient id="lg1"
x1="70.1063" y1="13.4122"
x2="66.1994" y2="-26.4368"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
<stop offset="0" stop-color="#154BBF" />
<stop offset="1" stop-color="#6E8BFF" />
</linearGradient>
<path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
<linearGradient id="lg2"
x1="70.4391" y1="13.5887"
x2="70.4391" y2="-25.3265"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
<stop offset="0" stop-color="#4166FA" />
<stop offset="1" stop-color="#87A4FF" />
</linearGradient>
<path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
<path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
<path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
<path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
<path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
<path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
<circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
<circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
<circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
<radialGradient id="rg3"
cx="90.874" cy="39.29"
fx="90.874" fy="39.29"
r="19.89"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
<stop stop-color="#1166a8" stop-opacity="0" offset="0" />
<stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
<stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
</radialGradient>
<path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>
यह एसवीजी छवि ऊपर की दूसरी उदाहरण छवि से सभी लेकिन अप्रभेद्य दिखती है, और केवल 5189 बाइट्स लेती है, जो आपकी जेपीईजी छवि से काफी कम है। मुझे यकीन है कि इसे अभी और भी अनुकूलित किया जा सकता है, लेकिन यह वास्तव में सिर्फ एक उदाहरण है कि आप अभ्यास के साथ कुछ मिनटों में क्या कर सकते हैं। (मुझे इस उत्तर को टाइप करने में अधिक समय लगा, वास्तव में एसवीजी कोड को संपादित करने के लिए।)
अंत में, इस SVG कोड को gzip के साथ संपीड़ित करने से यह केवल 1846 बाइट्स (!) तक सिकुड़ जाता है, बस आपके JPEG संस्करण के आकार के एक चौथाई से भी अधिक होता है।
