Như Wrzlprmft đã chỉ ra, hơn 50% kích thước tệp SVG của bạn được đưa lên bởi một hình ảnh bitmap PNG được sử dụng để tạo hiệu ứng đổ bóng khá tinh tế trên bộ điều khiển. Chỉ cần loại bỏ hình ảnh đó và thay thế nó bằng một gradient xuyên tâm đơn giản, là đủ để thu nhỏ SVG xuống còn khoảng 10kb.
Hình ảnh gốc với bóng bitmap lạ mắt ở bên trái, phiên bản chỉnh sửa với độ dốc xuyên tâm đơn giản ở bên phải.
Trong khi bạn đang ở đó, bạn cũng nên kiểm tra đường dẫn của mình để xem có gì để đơn giản hóa ở đó không. Tôi không tìm thấy nhiều, nhưng phác thảo của bộ điều khiển của bạn có một vài nút liền kề (gần giữa trên và giữa) có thể được hợp nhất mà không tạo ra bất kỳ sự khác biệt rõ ràng nào.
Đó là một cách tiết kiệm 50% dễ dàng ngay tại đó, nhưng chúng ta chưa dừng lại. Nếu bạn biết ngay cả một chút về định dạng SVG , bạn có thể làm một nhiều hơn thế.
Đầu tiên, chạy "Defs chân không" trong Inkscape để loại bỏ các định nghĩa vô dụng, sau đó lưu hình ảnh thành "SVG đơn giản". Bây giờ, đã đến lúc mở nó trong một trình soạn thảo văn bản và xem những gì chúng ta có thể loại bỏ. Tốt nhất, bạn nên sử dụng trình chỉnh sửa với bản xem trước SVG tích hợp, để bạn có thể nhanh chóng thấy được hiệu ứng nào (hy vọng là không có) các chỉnh sửa của bạn đối với sự xuất hiện của hình ảnh. Tôi sử dụng emacs cho điều đó, nhưng có những biên tập viên khác có tính năng tương tự ngoài kia.
Dù sao, với tệp SVG được mở trong trình soạn thảo văn bản của bạn, hãy bắt đầu đơn giản hóa nó!
Ngay trên đỉnh, có một thứ vô dụng lớn <!-- comment -->. Chỉ cần xóa nó.
Nếu bạn đang chỉnh sửa một SVG trực tiếp từ Illustrator, thì cũng có một <!DOCTYPE ... >dòng vô dụng . Xóa nó đi
Inkscape khăng khăng dán một khối siêu dữ liệu RDF vô dụng vào hình ảnh của bạn. Chỉ cần xác định vị trí <metadata ...>thẻ và xóa nó, cùng với mọi thứ lên đến và bao gồm cả việc đóng </metadata>.
Ngoài ra, ngay cả khi bạn lưu tệp dưới dạng "SVG đơn giản", Inkscape vẫn lưu trữ tệp đó với một loạt các thuộc tính tùy chỉnh. Tìm mọi thuộc tính bắt đầu bằng inkscape:hoặc sodipodi:xóa chúng.
Khi siêu dữ liệu và các thuộc tính dành riêng cho Inkscape biến mất, bạn có thể xóa tất cả các thuộc tính không gian tên XML không sử dụng khỏi <svg>thẻ. Nó phải là an toàn để loại bỏ ít nhất xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapevà xmlns:sodipodi. Nếu có một xmlns:svgthuộc tính dư thừa , hãy loại bỏ nó. Các thuộc tính không gian tên duy nhất bạn nên để lại tại thời điểm này là:
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
Các <svg>thẻ cũng có một loạt các thuộc tính vô ích khác mà bạn có thể loại bỏ một cách an toàn, chẳng hạn như enable-backgroundvà xml:space="preserve". (Những được chèn vào bởi nhà xuất khẩu Illustrator SVG, và Inkscape không đủ thông minh để nhận ra họ đang vô dụng.) Các viewBoxthuộc tính cũng có thể được gỡ bỏ một cách an toàn so với hình ảnh này, vì nó chỉ lặp đi lặp lại các giá trị của x, y, widthvà heightcác thuộc tính.
Bạn cũng có thể xóa encodingvà standalonecác thuộc tính khỏi <?xml ... ?>thẻ một cách an toàn .
Bây giờ chúng ta hãy đi vào can đảm của dữ liệu hình ảnh. Vì một số lý do, Inkscape khăng khăng gán idcác thuộc tính cho mọi thành phần, ngay cả khi chúng không bao giờ được tham chiếu. Bất kỳ idthuộc tính nào có giá trị không bao giờ được lặp lại ở nơi khác trong tệp (tìm kiếm nó!) Đều an toàn để xóa. Về cơ bản, ID duy nhất bạn cần giữ là những ID cho độ dốc và có thể cho bất kỳ đối tượng nào khác (ví dụ: đường dẫn) được tìm thấy bên trong <defs>các phần.
Ngoài ra, Inkscape thích tạo ID dài như thế nào linearGradient4277. lg1Thay vào đó, hãy xem xét viết tắt bất kỳ ID nào mà bạn không thể xóa thành một cái gì đó ngắn như thế.
Ngoài ra còn có nhiều <defs>phần ngay sau nhau. Hợp nhất chúng sẽ tiết kiệm một vài byte (và đơn giản hóa cấu trúc tài liệu nói chung).
Ngoài ra còn có một số nhóm trống ( <g>yếu tố) ở cuối tệp. Chỉ cần thoát khỏi chúng. Cũng có thể có nhiều nhóm liên tiếp có cùng transformthuộc tính (hoặc không có nhóm nào); Nó cũng an toàn để hợp nhất những người.
Vì một số lý do kỳ lạ, Inkscape lưu một đường dẫn ( dthuộc tính) Bezier dự phòng cho <circle>các phần tử. Điều đó chiếm không gian hoàn toàn không có lý do, vì vậy chỉ cần xóa chúng. (Để các dthuộc tính trên <path>các phần tử là; chúng thực sự được sử dụng cho một cái gì đó.)
Inkscape cũng thích sử dụng CSS trong stylecác thuộc tính trong đó các thuộc tính cụ thể hơn sẽ ngắn hơn, ví dụ như viết lại fill="#4888fa"thành dài dòng hơn style="fill:#4888fa". Bạn có thể lưu một vài byte bằng cách chia các kiểu đó thành các thuộc tính riêng lẻ (và loại bỏ các kiểu chỉ vô dụng lặp lại cài đặt mặc định), nhưng điều đó làm quen với định dạng SVG hơn một chút so với hầu hết các thay đổi ở trên.
Ngoài ra, nếu có bất kỳ <use ... >yếu tố nào , bạn có thể lưu một vài byte bằng cách thay thế chúng bằng yếu tố thực tế mà chúng đang liên kết đến. (Tất nhiên, điều này chỉ tiết kiệm không gian nếu các yếu tố được liên kết chỉ được sử dụng một lần.) Dường như Inkscape thích xác định độ dốc hình tròn một cách gián tiếp, trước tiên xác định các điểm dừng trong a <linearGradient>, sau đó tham chiếu chúng trong a <radialGradient>; bạn có thể đơn giản hóa điều đó bằng cách di chuyển các điểm dừng trực tiếp bên trong gradient xuyên tâm và loại bỏ gradient tuyến tính hiện không được sử dụng. Như một phần thưởng, nếu, bằng cách này, bạn đã thoát khỏi tất cả các xlink:hrefthuộc tính, bạn có thể xóa xmlns:xlinkthuộc tính khỏi <svg>thẻ.
Nếu bạn thực sự muốn vắt kiệt từng byte cuối cùng, hãy tìm các giá trị số với quá nhiều số thập phân và làm tròn chúng thành một số hợp lý hơn. Đây là nơi mà bản xem trước trực tiếp thực sự hữu ích, vì nó cho phép bạn xem bạn có thể làm tròn giá trị bao nhiêu trước khi nó bắt đầu hiển thị. Tuy nhiên, ngay cả khi bạn không muốn kiểm tra cẩn thận từng con số để xem nó có thể được làm tròn bao nhiêu, thì ít nhất, bạn có thể chọn trái cây treo thấp như, ví dụ, làm tròn một giá trị 1.0000859pixel 1.
Cuối cùng, dọn sạch vết lõm và khoảng trắng trong tệp. Để giảm thiểu tối đa số byte, bạn cần đặt mọi thứ trên một dòng (hoặc ít nhất, chỉ đặt ngắt dòng trước các thuộc tính, dù sao cũng cần khoảng trắng), nhưng điều đó thực sự khó đọc. Tuy nhiên, vẫn có thể đạt được sự cân bằng hợp lý giữa khả năng đọc và tính gọn nhẹ với một số vết lõm đơn giản, bảo thủ.
Dù sao, đây là những gì tôi quản lý để chỉnh sửa hình ảnh SVG của bạn thành:
<?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>
Hình ảnh SVG này trông hoàn toàn không thể phân biệt được với hình ảnh ví dụ thứ hai ở trên và chỉ chiếm 5189 byte, ít hơn đáng kể so với hình ảnh JPEG của bạn. Tôi chắc chắn rằng nó có thể được tối ưu hóa hơn nữa, nhưng đây thực sự chỉ là một ví dụ về những gì bạn có thể làm trong vài phút với thực hành. (Tôi mất nhiều thời gian hơn để gõ câu trả lời này hơn là thực sự chỉnh sửa mã SVG.)
Cuối cùng, nén mã SVG này bằng gzip thu nhỏ nó xuống chỉ còn 1846 byte (!), Chỉ bằng một phần tư kích thước của phiên bản JPEG của bạn.
