30

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

pstenstrm
  • 6,339
  • 5
  • 41
  • 62
Nir Benita
  • 511
  • 1
  • 7
  • 12

1 Answers1

14

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.

Spektre
  • 49,595
  • 11
  • 110
  • 380
  • 3
    To add to that... just did some testing (no full research): I tested 23 icons in both svg and png. The svg's are quite simple and optimised. Total filesize of svg's was about 160% larger than png's (64x64px). Rendering of png's was way faster (especially on mobile devices). – Sjeiti Aug 01 '14 at 10:44
  • 1
    I don't have any quantifiable numbers, but this question of performance is very likely a premature optimization. SVGs used for icons will be small and simple and should have negligible performance characteristics. Ditto for decoding PNGs. The final advice above about rendering SVGs on app start and using raster images is really unnecessary. – mlissner Dec 28 '15 at 23:16
  • 2
    I'm not sure I agree with that mlissner. SVGs are causing serious lag on my web app, and I need to find a faster way to display icons. – Wylliam Judd Nov 07 '17 at 22:45