ดังที่ Wrzlprmft ได้ชี้ให้เห็นแล้วขนาดของไฟล์ SVG ของคุณมากกว่า 50% ถูกใช้โดยอิมเมจ PNG บิตแมปในตัวที่ใช้ในการสร้างเอฟเฟ็กต์การแรเงาที่ละเอียดอ่อนบนคอนโทรลเลอร์ เพียงแค่กำจัดภาพนั้นและแทนที่ด้วยการไล่ระดับสีแบบง่ายก็เพียงพอที่จะทำให้ SVG ลดขนาดลงเหลือประมาณ 10kb
ภาพต้นฉบับพร้อมแรเงาบิตแมปแฟนซีด้านซ้ายเวอร์ชันที่แก้ไขพร้อมการไล่ระดับสีเรเดียนที่ง่ายด้านขวา
ขณะที่คุณอยู่ที่นี่คุณควรตรวจสอบเส้นทางของคุณเพื่อดูว่ามีอะไรที่ทำให้มันง่ายขึ้นหรือไม่ ฉันไม่ค่อยพบอะไรมากนัก แต่โครงร่างของคอนโทรลเลอร์ของคุณมีโหนดที่อยู่ติดกันไม่กี่โหนด (ใกล้กับด้านบนและด้านล่างตรงกลาง) ที่สามารถผสานได้โดยไม่ทำให้เกิดความแตกต่างใด ๆ
นั่นคือการประหยัดที่ง่าย 50% ที่นั่น แต่เรายังไม่หยุด ถ้าคุณรู้ว่าแม้แต่นิด ๆ หน่อยเกี่ยวกับรูปแบบ SVG , คุณสามารถทำมากดีกว่าว่า
ก่อนอื่นให้รัน "Vacuum Defs" ใน Inkscape เพื่อกำจัดคำจำกัดความที่ไร้ประโยชน์แล้วบันทึกภาพเป็น "SVG ธรรมดา" ตอนนี้ได้เวลาเปิดขึ้นในโปรแกรมแก้ไขข้อความแล้วดูว่าเราสามารถกำจัดอะไรได้บ้าง ตามหลักการแล้วคุณควรใช้โปรแกรมแก้ไขร่วมกับการแสดงตัวอย่าง SVG แบบบูรณาการเพื่อให้คุณสามารถเห็นผลอย่างรวดเร็ว (หวังว่าจะไม่มี) การแก้ไขของคุณที่มีต่อภาพลักษณ์ ฉันใช้emacsสำหรับสิ่งนั้น แต่มีบรรณาธิการอื่น ๆ ที่มีคุณสมบัติคล้ายกันอยู่ที่นั่น
อย่างไรก็ตามเมื่อเปิดไฟล์ SVG ในเท็กซ์เอดิเตอร์ของคุณแล้วให้เริ่มทำมันให้ง่ายขึ้น!
ที่ด้านบนสุดมีประโยชน์<!-- comment -->มากมาย เพียงแค่ลบมัน
หากคุณกำลังแก้ไข SVG โดยตรงจาก Illustrator แสดงว่าไม่มีประโยชน์<!DOCTYPE ... >เช่นกัน ลบด้วย
Inkscape ยืนยันในการติดบล็อกข้อมูลเมตา RDF ที่ไร้ประโยชน์ลงในภาพของคุณ เพียงแค่ค้นหาแท็กและลบมันพร้อมกับทุกอย่างและรวมถึงการปิด<metadata ...></metadata>
นอกจากนี้แม้ว่าคุณจะบันทึกไฟล์เป็น "SVG ธรรมดา" Inkscape ก็ยังคงสว่างด้วยคุณสมบัติที่กำหนดเองมากมาย ค้นหาทุกแอตทริบิวต์ที่ขึ้นต้นด้วยinkscape:หรือsodipodi:และลบออก
เมื่อเมทาดาทาและแอตทริบิวต์เฉพาะของ Inkscape หายไปคุณสามารถลบแอตทริบิวต์เนมสเปซ XML ที่ไม่ได้ใช้ทั้งหมดออกจาก<svg>แท็ก มันควรจะปลอดภัยในการลบอย่างน้อยxmlns:rdf, xmlns:dc, xmlns:cc, และxmlns:inkscape xmlns:sodipodiหากมีxmlns:svgคุณสมบัติซ้ำซ้อนให้ลบออกด้วยเช่นกัน แอตทริบิวต์ namespace เดียวที่คุณควรจะทิ้งไว้ ณ จุดนี้คือ:
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
<svg>แท็กนอกจากนี้ยังมีพวงของคุณลักษณะที่ไร้ประโยชน์อื่น ๆ ที่คุณได้อย่างปลอดภัยสามารถลบเช่นและenable-background xml:space="preserve"(ผู้ถูกแทรกโดยผู้ส่งออก Illustrator SVG และ Inkscape ไม่เพียงพอที่สมาร์ทที่จะตระหนักถึงพวกเขาจะไร้ประโยชน์.) The viewBoxแอตทริบิวต์ยังสามารถถอดออกได้อย่างปลอดภัยจากภาพนี้เนื่องจากมันก็ซ้ำค่าของx, y, widthและheightคุณลักษณะ
นอกจากนี้คุณยังสามารถลบencodingและstandaloneแอตทริบิวต์ออกจาก<?xml ... ?>แท็กได้อย่างปลอดภัย
ทีนี้มาถึงความกล้าของข้อมูลภาพ ด้วยเหตุผลบางอย่าง Inkscape ยืนยันในการกำหนดidคุณสมบัติให้กับทุกองค์ประกอบแม้ว่าพวกเขาจะไม่เคยอ้างอิง idคุณลักษณะใด ๆที่มีค่าจะไม่ซ้ำกันที่อื่นในไฟล์ (ค้นหามัน!) ปลอดภัยที่จะลบ โดยทั่วไปรหัสเดียวที่คุณต้องเก็บไว้คือรหัสสำหรับการไล่ระดับสีและอาจเป็นวัตถุอื่น ๆ (เช่นเส้นทาง) ที่พบภายใน<defs>ส่วน
นอกจากนี้ Inkscape linearGradient4277ชอบที่จะสร้างรหัสยาวเช่น ลองย่อรหัสใด ๆ ที่คุณไม่สามารถลบออกในรูปแบบย่อlg1แทนได้
นอกจากนี้ยังมีหลาย<defs>ส่วนทันทีหลังจากที่อื่น การรวมพวกมันช่วยประหยัดสองสามไบต์ (และทำให้โครงสร้างเอกสารง่ายขึ้นโดยทั่วไป)
นอกจากนี้ยังมีกลุ่มที่ว่างเปล่าหลาย<g>องค์ประกอบ( องค์ประกอบ) ในตอนท้ายของไฟล์ เพียงกำจัดพวกเขา อาจมีกลุ่มติดต่อกันหลายกลุ่มที่มีtransformแอตทริบิวต์เดียวกันแน่นอน(หรือไม่มีเลย) นอกจากนี้ยังปลอดภัยที่จะรวมสิ่งเหล่านั้น
ด้วยเหตุผลแปลก ๆ บางอย่าง Inkscape จะบันทึกเส้นทาง Bezier ที่ซ้ำซ้อน ( dคุณลักษณะ) สำหรับ<circle>องค์ประกอบ ที่ใช้พื้นที่โดยไม่มีเหตุผลดังนั้นเพียงแค่ลบเหล่านั้น (ปล่อยให้dแอตทริบิวต์กับ<path>องค์ประกอบเป็น: สิ่งเหล่านั้นใช้จริงสำหรับบางสิ่ง)
Inkscape ยังชอบที่จะใช้ CSS ในstyleคุณลักษณะที่คุณลักษณะเฉพาะมากขึ้นจะสั้นกว่าเช่นการเขียนไปอย่างละเอียดมากขึ้นfill="#4888fa" style="fill:#4888fa"คุณสามารถบันทึกสองสามไบต์ได้โดยแบ่งสไตล์เหล่านั้นออกเป็นคุณลักษณะแต่ละตัว (และลบรูปแบบที่เพิ่งตั้งค่าเริ่มต้นซ้ำไปโดยเปล่าประโยชน์) แต่นั่นทำให้คุ้นเคยกับรูปแบบ SVG มากกว่าการเปลี่ยนแปลงส่วนใหญ่ข้างต้นเล็กน้อย
นอกจากนี้หากมี<use ... >องค์ประกอบใด ๆคุณอาจบันทึกไม่กี่ไบต์ด้วยการแทนที่องค์ประกอบเหล่านั้นด้วยองค์ประกอบจริงที่ลิงก์ไป (ของหลักสูตรนี้เพียงช่วยประหยัดพื้นที่ถ้าองค์ประกอบเชื่อมโยงที่มีการใช้เพียงครั้งเดียว.) นอกจากนี้ยังดูเหมือนว่า Inkscape ชอบที่จะกำหนดการไล่ระดับสีวงกลมโดยอ้อมแรกกำหนดหยุดใน<linearGradient>และจากนั้นอ้างอิงไว้ใน<radialGradient>; คุณสามารถทำให้มันง่ายขึ้นโดยการย้ายจุดหยุดโดยตรงภายในการไล่สีในแนวรัศมีและกำจัดการไล่ระดับสีเชิงเส้นที่ไม่ได้ใช้ในขณะนี้ ในฐานะโบนัสหากxlink:hrefคุณสามารถลบแอ็ตทริบิวต์ทั้งหมดได้โดยการทำเช่นนี้คุณสามารถลบแอxmlns:xlinkททริบิวออกจาก<svg>แท็กได้
หากคุณต้องการบีบให้ทุกไบต์ที่ผ่านมาต้องมองหาค่าตัวเลขที่มีทศนิยมมากเกินไป นี่คือที่ที่การแสดงตัวอย่างแบบสดช่วยได้จริงเพราะช่วยให้คุณเห็นว่าคุณสามารถปัดเศษค่าก่อนที่จะสามารถมองเห็นได้ แม้ว่าคุณจะไม่ต้องการที่จะระมัดระวังทดสอบจำนวนทุกคนที่จะดูว่ามันสามารถที่จะโค้งมน แต่อย่างน้อยคุณสามารถเลือกแขวนต่ำผลไม้เช่นการพูด, การปัดเศษค่าของพิกเซลที่จะเพียงแค่1.00008591
สุดท้ายทำความสะอาดการเยื้องและช่องว่างในไฟล์ ในการลดจำนวนไบต์ให้เหลือน้อยที่สุดคุณจะต้องใส่ทุกอย่างลงในบรรทัดเดียว (หรืออย่างน้อยเพียงใส่ตัวแบ่งบรรทัดไว้ด้านหน้าแอตทริบิวต์ที่ต้องการช่องว่าง) แต่เป็นการยากที่จะอ่าน ยังคงเป็นไปได้ที่จะสร้างสมดุลที่เหมาะสมระหว่างความสามารถในการอ่านและความกะทัดรัดด้วยการเยื้องที่เรียบง่ายและอนุรักษ์นิยม
อย่างไรก็ตามนี่คือสิ่งที่ฉันจัดการเพื่อแก้ไขภาพ SVG ของคุณด้วยมือลงใน:
<?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>
ภาพ SVG นี้ดูทั้งหมด แต่แยกไม่ออกจากภาพตัวอย่างที่สองด้านบนและใช้เวลาเพียง 5189 ไบต์น้อยกว่าภาพ JPEG ของคุณมาก ฉันแน่ใจว่ามันสามารถเพิ่มประสิทธิภาพได้อีก แต่นี่เป็นเพียงตัวอย่างของสิ่งที่คุณสามารถทำได้ในไม่กี่นาทีด้วยการฝึกฝน (ผมใช้เวลามากอีกต่อไปที่จะพิมพ์ขึ้นคำตอบนี้กว่าที่จะแก้ไขโค้ดจริง SVG ได้.)
ในที่สุดการบีบอัดรหัส SVG นี้ด้วย gzip จะย่อขนาดลงเหลือเพียง 1846 ไบต์ (!) ซึ่งแทบจะไม่เกินหนึ่งในสี่ของขนาด JPEG ของคุณ
