Reasons for SVG to be a good choice:

• It supports browsers of any size smoothly, especially with CSS background-size
• You can scale them up / down, as for a hover effect
• You can embed SVGs and make modifications to them in real time with JavaScript and DOM
• You can style SVGs or parts of them with CSS (changing colors, outlines, etc.)
• You can dynamically generate SVGs on the client or server. Because of its text-based nature, you do not need low-level libraries or powerful servers to create them.

Reasons for PNG may be a good choice:

• Better support for all browsers
• existing tools to create spritesheets PNG
• Most people have a PNG-compatible editor on their computer
• if the image is a photo or other images difficult to vectorize

Font .

Especially I prefer SVG, because it becomes lighter, because it is a vector, and it is also easier to work, as our friend put it above, you have direct access to the code of the image, and you can style it according to your creativity. It is worth mentioning here that the icons created and available for frameworks, are all based on SVG, libraries like Awesome Font, Material Design, Bootstrap, etc ...