CODEWITHSUNDEEP
svg
sudo
sudo

Reputation: 5804

How could simple SVGs take more bytes than PNGs?

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:

Clock_02-30.svg rendered to 72x72 PNG

SVG version is 30KB. Comes out to 5KB zipped.

Upvotes: 0

Views: 373

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101938

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>

Upvotes: 3

Related Questions