Looking for a research: PNG Sprite vs SVG sprite vs Icon fonts

Nir Benita picture Nir Benita · Jan 23, 2014 · Viewed 18.9k times · Source

We are currently using PNGs in production for icons, but as a designer I'm trying to push for using SVG's for the benefit of:
a. Rendering on Retina.
b. Visually impaired users that zoom in.
c. An easier workflow when creating icons.

Are there any researches that compares the 3 methods? (PNG Sprite vs SVG sprite vs Icon fonts) in terms of performance?

If not, what and how would you compare them? (For example, I heard SVG requires more CPU power, and I have no idea how to test it or what are the consequences).

Thanks a lot! You are an amazing community.

BTW, this is what I could find:
svgs are cool, but icon fonts are just 10% of their file size
SVG + Icon Fonts:
Iconserving - SVG or Webfont?
Ten reasons we switched from an icon font to SVG

Answer

Spektre picture Spektre · Apr 8, 2014

Not an answer but it will be not readable in comments

PNG's are raster images

So for render they just need to be decompressed which need CPU power but nowdays is this not so bad.

SVG's are vector XML files

Which means that you need to:

  1. read XML text
  2. decode it to some vector graphic capable engine/class
  3. render vector graphics based image

Complicated SVG's (>300MB vector utf-8) have load/decode/render times even in minutes on fast machines (if decoded everything). If you decode just the basics you can do the same in seconds, but lost advanced features.

Many will not agree with this: 'problem is there is not a single 100% compatible easy to implement SVG library ... at least that I know of' but take in mind I do not use frameworks or environments for WEB like JAVA or PHP ... Also each SVG lib has it own quirks. If you compare rendered SVG between different web or image viewers then it is not the same and many features aren't supported everywhere.

You can code your own SVG decoder but it is bit complicated. If you want just basic functionality like path and shapes without animations or gradients then it is relatively easy to do, but if you want to implement everything you would spend a lot of time with that.

For a time I had a big problem finding good free SVG editor. The only one 'usable' I found was Inkspace but it is slow and a bit user unfriendly for my taste. On the other hand it can open almost every type of SVG I use in the right way...

[Notes]

If you want to use SVG's for icons I strongly recommend to render them to raster on App start and then use just raster images like bitmaps from memory to avoid performance problems.