How could simple SVGs take more bytes than PNGs? - svg

Question

We have icons created in Adobe Illustrator that need to be sent over a network connection and rendered at 72x72px, and we have control on both ends over how they're rendered. We need a small file size. They're fairly simple icons, but in SVG form, they're anywhere from 32KB to 6KB, and when I render them as 72x72px PNGs, they end up being smaller, around 3KB!
How could this be possible? I thought SVGs were supposed to be much smaller since they're just vector representations. Is there some optimization I can do to make the SVGs smaller?
Edit: Here's an example. This is a Wikimedia SVG, not one of our icons, since I can't post our actual icons online. But it's similar to some of the icons we have and has the same problem:
PNG version, 2KB:
SVG version
is 30KB. Comes out to 5KB zipped.

Answer 1

To prove that SVGs can be small, here is a handcrafted version of your file that is only 922 bytes uncompressed. It could be made smaller :)
<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>