Research Search: PNG Sprite vs SVG sprite vs Icon fonts

Question

We are currently using PNG to create icons, but as a designer, I am trying to use SVG for the benefit of:
but. Retina rendering.
b. Visually impaired people who zoom in.
from. A simpler workflow when creating icons.

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

If not, what and how could you compare them? (For example, I heard that SVG requires more processor power, and I don’t know how to test it or what the consequences are).

Thank you so much! You are an amazing community.

By the way, here is what I can find:
svgs are cool, but icon fonts are only 10% of their file size
SVG + Font Icons:
Iconserving - SVG or Webfont?
Ten reasons why we switched from icon font to SVG

Answer 1

Not an answer, but it will not be read in the comments

PNG - bitmap images

So, for rendering, you just need to unpack them, which needs processor power, but now it's not so bad.

SVG - Vector XML Files

This means that you need to:

• read the xml text
• decode it to a vector graphics engine / class
• Vector Image

Complex SVG (> 300 MB vector utf-8) has load / decode / render time even in minutes on fast machines (when decoding everything). If you decode only the basics, you can do the same in seconds, but lost the extra features.

Many will disagree with this: “The problem is that there is not a single 100% compatibility simple to implement the SVG library ... at least that I know,” but keep in mind that I do not use frameworks or environments for WEB JAVA or PHP ... Also, each SVG library has its own quirks. If you compare the displayed SVG between different web browsers or image viewers, then this is not the same thing, and many features are not supported everywhere.

You can create your own SVG decoder, but it's a bit complicated. If you need only basic functions, such as path and shapes without animations or gradients, then this is relatively easy to do, but if you want to implement everything that you would spend a lot of time on it .

For a while, I had a big problem finding a good free SVG editor. The only “useful” I found was Inkspace , but it is slow and a bit unfriendly to my liking. On the other hand, it can open almost all types of SVG that I use correctly ...

[Note]

If you want to use SVG for icons, I highly recommend that you rasterize them at the beginning of the application, and then only use bitmaps, such as memory bitmaps, to avoid performance issues.