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
SVGs offer better image quality as they're vector images, and can scale to any size. PNGs, however, are supported by more browsers. A simple rule of thumb is to use PNGs if you have to support Internet Explorer 8 or older, and to use SVGs if you do not have to support these browsers.
Accessibility One major advantage of SVG icons over Icon fonts is their superior accessibility. SVGs are armed with built in semantic elements – like < title > and < desc > that makes it accessible to screen reader and text browsers. Unlike icon fonts, SVGs are treated as an image and not as a text.
SVG allows us to create icons in a file format that is resolution independent, which is awesome, but due to the limitations of the HTTP protocol we don't want to make another file request for every icon in our website. This will soon be changing with the HTTP/2 protocol.
PNGs and SVGs support transparency — so they're both excellent choices for online logos and graphics. It's worth noting that PNGs are one of the best choices for a raster-based transparent file. If you're working with pixels and transparency, PNGs are a better option than SVGs.
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With