Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 639
Nir Benita Avatar asked Jan 23 '14 09:01

Nir Benita


People also ask

Should I use SVG or PNG for icons?

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.

Which is better SVG or font icons?

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.

What is a SVG sprite?

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.

Is it better to use SVG or PNG on website?

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.


1 Answers

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.

like image 107
Spektre Avatar answered Oct 29 '22 08:10

Spektre