简单的SVG如何比PNG占用更多的字节？

Question

我们在Adobe Illustrator中创建的图标需要通过网络连接发送并以72x72px呈现，并且我们可以控制它们的呈现方式。我们需要一个小文件大小。它们是相当简单的图标，但是在SVG格式中，它们的范围从32KB到6KB，当我将它们渲染为72x72px的PNG时，它们最终会变小，大约3KB！

怎么可能这样呢？我认为SVG应该更小，因为它们只是矢量表示。我可以做些什么来使SVG更小？

编辑：这是一个例子。这是一个维基媒体SVG，不是我们的图标之一，因为我无法在线发布我们的实际图标。但它与我们的一些图标类似，并且存在同样的问题：

PNG版本，2KB：

SVG version 是30KB。拉出5KB。

Answer 1

为了证明SVG可以很小，这里是一个手工版本的文件，只有922字节未压缩。它可以做得更小：）

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
  <g transform="translate(250,250)">
    <g id="q">
      <g id="h">
        <rect x="198" y="-5" width="44" height="10"/>
        <circle cx="220" cy="0" r="5" transform="rotate(6)"/>
        <circle cx="220" cy="0" r="5" transform="rotate(12)"/>
        <circle cx="220" cy="0" r="5" transform="rotate(18)"/>
        <circle cx="220" cy="0" r="5" transform="rotate(24)"/>
      </g>
      <use xlink:href="#h" transform="rotate(30)"/>
      <use xlink:href="#h" transform="rotate(60)"/>
    </g>
    <use xlink:href="#q" transform="rotate(90)"/>
    <use xlink:href="#q" transform="rotate(180)"/>
    <use xlink:href="#q" transform="rotate(270)"/>
    <circle r="22"/>
    <rect y="-5" width="150" height="14" transform="rotate(-15)"/>
    <rect x="-4" width="8" height="220"/>
  </g>
</svg>

＆＃13;

＆＃13;

＆＃13;