正如 Wrzlprmft 已经指出的那样,超过 50% 的 SVG 文件大小被嵌入的 PNG 位图图像占用,用于在控制器上创建相当微妙的阴影效果。只需去掉该图像,并用简单的径向渐变替换它,就足以将 SVG 缩小到大约 10kb。
左侧带有精美位图阴影的原始图像,右侧带有简单径向渐变的编辑版本。
当你在做的时候,你还应该检查你的路径,看看那里是否有什么可以简化的。我没有找到太多,但是您的控制器的轮廓确实有一些相邻的节点(靠近顶部和底部中间),可以合并而不会产生任何明显的差异。
这很容易节省 50%,但我们不要停止。如果您对SVG 格式稍有了解,您可以做得比这更好。
首先,在 Inkscape 中运行“Vacuum Defs”以摆脱无用的定义,然后将图像保存为“plain SVG”。现在,是时候在文本编辑器中打开它了,看看我们能摆脱什么。理想情况下,您应该使用带有集成 SVG 预览的编辑器,这样您就可以快速查看您的编辑对图像外观的影响(希望没有)。我为此使用emacs,但也有其他具有类似功能的编辑器。
无论如何,在您的文本编辑器中打开 SVG 文件后,让我们开始简化它吧!
就在最上面,有一个很大的没用的<!-- comment -->
. 只需删除它。
如果您直接从 Illustrator 编辑 SVG,还有一条无用的<!DOCTYPE ... >
线。也删除它。
Inkscape 坚持将无用的 RDF 元数据块粘贴到您的图像中。只需找到<metadata ...>
标签并删除它,以及包括关闭的所有内容</metadata>
。
此外,即使您将文件保存为“普通 SVG”,Inkscape 仍然会在其上添加一堆自定义属性。查找以inkscape:
or开头的每个属性sodipodi:
并删除它们。
随着元数据和 Inkscape 特定属性的消失,您可以从<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"
。(这些是由 Illustrator SVG 导出器插入的,Inkscape 还不够聪明,无法意识到它们是无用的。)该viewBox
属性也可以安全地从该图像中删除,因为它只是重复、 和x
属性y
的值。width
height
您还可以安全地从标签中删除encoding
和standalone
属性。<?xml ... ?>
现在让我们深入了解图像数据的内容。出于某种原因,Inkscape 坚持id
为每个元素分配属性,即使它们从未被引用。任何id
其值在文件的其他地方从不重复的属性(搜索它!)都可以安全删除。基本上,您需要保留的唯一 ID 是用于渐变的 ID,并且可能用于在<defs>
部分内找到的任何其他对象(例如路径)。
此外,Inkscape 喜欢生成长 ID,例如linearGradient4277
. 考虑将您不能删除的任何 ID 缩写为类似的缩写lg1
。
也有多个<defs>
部分一个接一个。合并它们可以节省几个字节(并且总体上简化了文档结构)。
<g>
文件末尾还有几个空组(元素)。只是摆脱他们。也可能有多个具有完全相同transform
属性的连续组(或根本没有);合并它们也是安全的。
出于某种奇怪的原因,Inkscape为元素保存了一个冗余的 Bezier 路径(d
属性) 。<circle>
这绝对没有理由占用空间,所以只需删除它们。(保留元素上的d
属性<path>
;那些实际上是用于某事的。)
Inkscape 还喜欢在style
属性中使用 CSS,其中更具体的属性会更短,例如重写fill="#4888fa"
为更详细的style="fill:#4888fa"
. 您可以通过将这些样式分解为单独的属性(并删除那些只是无用地重复默认设置的属性)来节省一些字节,但这比上述大多数更改需要更熟悉 SVG 格式。
此外,如果有任何<use ... >
元素,您可以通过将它们替换为它们链接到的实际元素来节省一些字节。(当然,如果链接的元素只使用一次,这只会节省空间。)Inkscape 似乎也喜欢间接定义圆形渐变,首先在 a 中定义停止点<linearGradient>
,然后在 a 中引用它们<radialGradient>
;您可以通过直接在径向渐变内移动停止并摆脱现在未使用的线性渐变来简化它。作为奖励,如果通过这样做,您设法摆脱了所有属性,则可以从标签xlink:href
中删除该属性。xmlns:xlink
<svg>
如果您真的想挤出每一个额外的字节,请查找具有太多小数的数值,并将它们四舍五入到更合理的值。这是实时预览真正有帮助的地方,因为它可以让您在值开始可见之前查看可以舍入多少。但是,即使您不想仔细测试每个数字以查看它可以舍入多少,您至少可以选择容易实现的目标,例如将1.0000859
像素值舍入到1
.
最后,清理文件中的缩进和空格。为了绝对最小化字节数,您需要将所有内容放在一行上(或者至少,只在属性前面放置换行符,无论如何都需要空格),但这真的很难阅读。尽管如此,还是有可能通过一些简单、保守的缩进在可读性和紧凑性之间取得不错的平衡。
无论如何,这就是我设法将您的 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 代码花费的时间要长得多。)
最后,使用 gzip 压缩此 SVG 代码会将其缩小到仅 1846 字节(!),仅略超过 JPEG 版本大小的四分之一。