যেমন Wrzlprmft ইতিমধ্যে ইঙ্গিত করেছে, আপনার এসভিজি ফাইলের আকারের 50% এর উপরে একটি এম্বেড করা পিএনজি বিটম্যাপ চিত্র নিয়ে যায় যা নিয়ামকের উপর মোটামুটি সূক্ষ্ম শেডিং প্রভাব তৈরি করতে ব্যবহৃত হয়। কেবলমাত্র সেই চিত্রটি থেকে মুক্তি পাওয়া এবং এটিকে একটি সাধারণ রেডিয়াল গ্রেডিয়েন্টের সাথে প্রতিস্থাপন করা এসভিজিটিকে প্রায় 10 কেবিতে সঙ্কুচিত করার জন্য যথেষ্ট।
বামদিকে অভিনব বিটম্যাপ শেডিং সহ মূল চিত্র, ডানদিকে সরল রেডিয়াল গ্রেডিয়েন্ট সহ সম্পাদিত সংস্করণ।
আপনি যখন সেখানে পৌঁছেছেন, সেখানে সরল করার মতো কিছু আছে কিনা তা দেখতে আপনার পাথও পরীক্ষা করা উচিত। আমি খুব বেশি কিছু পাইনি, তবে আপনার নিয়ামকের বাহ্যরেখার সাথে কয়েকটি সংলগ্ন নোড রয়েছে (উপরে এবং নীচের মাঝের কাছে) যা কোনও দৃশ্যমান পার্থক্য না করে মার্জ করা যায়।
এটি ঠিক সেখানে 50% সাশ্রয়, তবে আসুন এখনও থামব না। আপনি যদি এসভিজি ফর্ম্যাটটি সম্পর্কে কিছুটা জানেন তবে আপনি এর থেকে আরও অনেক ভাল করতে পারেন ।
অকেজো সংজ্ঞা থেকে মুক্তি পেতে প্রথমে ইনকস্কেপে "ভ্যাকুয়াম ডিফস" চালান এবং তারপরে চিত্রটিকে "প্লেইন এসভিজি" হিসাবে সংরক্ষণ করুন। এখন, এটি পাঠ্য সম্পাদকে এটি খোলার সময় হয়েছে এবং আমরা কী থেকে মুক্তি পেতে পারি তা দেখুন। আদর্শভাবে, আপনার একটি সমন্বিত এসভিজি পূর্বরূপ সহ একটি সম্পাদক ব্যবহার করা উচিত, যাতে আপনি চিত্রের উপস্থিতিতে আপনার সম্পাদনাগুলির কী প্রভাব (আশা করি, কিছুই নয়) তা দ্রুত দেখতে পারবেন। আমি এটির জন্য ইম্যাক্স ব্যবহার করি, তবে অন্যান্য সম্পাদকরাও সেখানে অনুরূপ বৈশিষ্ট্যযুক্ত ।
যাইহোক, আপনার পাঠ্য সম্পাদকটিতে এসভিজি ফাইলটি খোলার সাথে সাথে এর সহজকরণ শুরু করা যাক!
ডানদিকের শীর্ষে, এখানে একটি বড় অকেজো <!-- comment -->। শুধু এটি মুছুন।
আপনি যদি সরাসরি চিত্রকের কাছ থেকে কোনও এসভিজি সম্পাদনা করেন তবে অকেজো <!DOCTYPE ... >লাইনও রয়েছে। এটিও মুছুন।
Inkscape আপনার চিত্রের মধ্যে একটি অকেজো আরডিএফ মেটাডেটা ব্লকটি স্টিক করার জন্য জোর দেয়। কেবল <metadata ...>ট্যাগটি সন্ধান করুন এবং ক্লোজিং পর্যন্ত সমস্ত কিছুর পাশাপাশি এটি মুছুন </metadata>।
এছাড়াও, আপনি "প্লেইন এসভিজি" হিসাবে ফাইলটি সংরক্ষণ করলেও, ইনস্কেপ এখনও কাস্টম বৈশিষ্ট্যের একটি গুচ্ছ দিয়ে এটি লিটার করে। প্রত্যেক গুণ যা দিয়ে শুরু হয় এই inkscape:বা sodipodi:তাদের মুছে দিন।
মেটাডেটা এবং ইনস্কেপ-নির্দিষ্ট বৈশিষ্ট্যগুলি চলে যাওয়ার সাথে সাথে আপনি <svg>ট্যাগ থেকে সমস্ত অব্যবহৃত এক্সএমএল নেমস্পেস বৈশিষ্ট্যগুলি মুছতে পারেন । এটা তোলে অন্তত সরানো নিরাপদ হওয়া উচিত 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"। (যাদের ইলাস্ট্রেটর করা SVG রপ্তানিকারক দ্বারা ঢোকানো হয়েছে এবং ইঙ্কস্পেস স্মার্ট যথেষ্ট উপলব্ধি করা তারা বেহুদা করছি নয়।) viewBoxঅ্যাট্রিবিউট এছাড়াও নিরাপদে, এই চিত্র থেকে সরানো হতে পারে যেহেতু এটি শুধু মান পুনরাবৃত্তি x, y, widthএবং heightবৈশিষ্ট্যাবলী।
আপনি ট্যাগ থেকে সুরক্ষা encodingএবং standaloneবৈশিষ্ট্যগুলি নিরাপদে মুছে ফেলতে পারেন <?xml ... ?>।
এবার আসুন চিত্রের ডেটাগুলির সাহসগুলি। কোনও কারণে, ইনসকেপ idপ্রতিটি উপাদানকে অ্যাট্রিবিউট বরাদ্দ করার জন্য জোর দেয় , এমনকি যদি সেগুলি কখনই রেফারেন্স করা না হয়। এমন কোনও idবৈশিষ্ট্য যার মানটি কখনও ফাইলের অন্য কোথাও পুনরাবৃত্তি হয় না (এটি অনুসন্ধান করুন!) মুছে ফেলা নিরাপদ। মূলত, কেবলমাত্র আইডিগুলি আপনার রাখা দরকার তা হ'ল গ্রেডিয়েন্টগুলির জন্য এবং সম্ভবত <defs>বিভাগগুলির অভ্যন্তরে পাওয়া অন্য কোনও বস্তুর (যেমন পাথ) জন্য for
এছাড়াও, ইনস্কেপ পছন্দ মতো দীর্ঘ আইডি তৈরি করতে পছন্দ করে linearGradient4277। সংক্ষিপ্ত কোনও আইডি সংক্ষেপে বিবেচনা করুন যা আপনি কেবল lg1তার পরিবর্তে খুব ছোট কিছুতে মুছতে পারবেন না ।
<defs>একের পর একাধিক বিভাগ রয়েছে। এগুলিকে একত্রিত করার ফলে কয়েকটি বাইট সাশ্রয় হয় (এবং সাধারণভাবে নথির কাঠামোর সরলকরণ হয়)।
<g>ফাইলের শেষে বেশ কয়েকটি খালি গোষ্ঠী ( উপাদান) রয়েছে। কেবল এগুলি থেকে মুক্তি পান। ঠিক একই transformবৈশিষ্ট্য সহ একাধিক একটানা গ্রুপও থাকতে পারে (বা কিছুই নয়); এটি একীভূত করাও নিরাপদ।
কিছু অদ্ভুত কারণে, ইনসকেপ উপাদানগুলির dজন্য একটি রিলান্ড্যান্ট বেজিয়ার পাথ ( বৈশিষ্ট্য) সংরক্ষণ <circle>করে। এটি একেবারে কোনও কারণ ছাড়াই স্থান গ্রহণ করে, সুতরাং কেবল তাদের মুছুন। ( উপাদানগুলিতে dবৈশিষ্ট্যগুলি ছেড়ে দিন <path>; সেগুলি আসলে কোনও কিছুর জন্য ব্যবহৃত হয়))
ইনকস্কেপ এমন styleবৈশিষ্ট্যগুলিতে সিএসএস ব্যবহার করতেও পছন্দ করে যেখানে আরও নির্দিষ্ট বৈশিষ্ট্যগুলি সংক্ষিপ্ত হবে, উদাহরণস্বরূপ fill="#4888fa"আরও ভার্বোজে পুনরায় লেখা style="fill:#4888fa"। আপনি সেই স্টাইলগুলি পৃথক বৈশিষ্ট্যগুলিতে বিভক্ত করে (এবং কেবল অকার্যকরভাবে ডিফল্ট সেটিংসটির পুনরাবৃত্তি করে এমনগুলি সরিয়ে) কয়েকটি বাইট সংরক্ষণ করতে পারেন, তবে উপরের বেশিরভাগ পরিবর্তনের চেয়ে এসভিজি ফর্ম্যাটের সাথে কিছুটা বেশি পরিচিতি পাবেন।
এছাড়াও, যদি কোনও <use ... >উপাদান থাকে তবে আপনি সংযুক্ত হচ্ছেন এমন প্রকৃত উপাদান দিয়ে প্রতিস্থাপন করে আপনি কয়েকটি বাইট সংরক্ষণ করতে পারবেন। (অবশ্যই, লিঙ্কযুক্ত উপাদানগুলি কেবল একবার ব্যবহার করা হলে এটি কেবল স্থান সাশ্রয় করে It) এগুলিও মনে হয় যে ইনকস্কেপ পরোক্ষভাবে বৃত্তাকার গ্রেডিয়েন্টগুলি সংজ্ঞায়িত করতে পছন্দ করে, প্রথমে একটিতে স্টপগুলি সংজ্ঞায়িত করে <linearGradient>এবং তারপর এটিকে রেফারেন্স করে <radialGradient>; আপনি সরাসরি রেডিয়াল গ্রেডিয়েন্টের অভ্যন্তরে স্টপগুলি সরিয়ে এবং এখন অব্যবহৃত লিনিয়ার গ্রেডিয়েন্ট থেকে মুক্তি পেয়ে এটিকে সহজ করতে পারেন ify বোনাস হিসাবে, যদি এটি করে আপনি সমস্ত 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 বাইট নেয় । আমি নিশ্চিত এটি আরও অপ্টিমাইজড হতে পারে তবে এটি অনুশীলনের সাথে কয়েক মিনিটের মধ্যে আপনি কী করতে পারেন তার এটি কেবল উদাহরণ। ( এসভিজি কোডটি সম্পাদনা করার চেয়ে এই উত্তরটি টাইপ করতে আমার অনেক বেশি সময় লেগেছে ))
অবশেষে, এই এসভিজি কোডটি জিজিপ দিয়ে সংকুচিত করে এটি আপনার জেপিইজি সংস্করণটির আকারের এক চতুর্থাংশের মধ্যে সীমাবদ্ধ হয়ে মাত্র 1846 বাইট (!) এ নেমেছে।
