SVG icons vs. PNG icons in modern web sites

Question

I\'m wondering why so few modern web sites still use only PNGs for icons (but this assumption is just based my observation). So far I know, main reasons for using PNGs over SVGs

Answer 1

Reasons SVG may be a good choice:

• it seamlessly supports browsers of any size, especially with css's background-size
• you can scale them up/down will, such as to to a hover effect
• you can embed SVGs and do real-time modifications to them with JavaScript and the DOM
• you can style SVGs and parts of SVGs with CSS (changing colors, outlines, etc.)
• you can generate SVGs dynamically, either on the client or server. Due to their text based nature, you don't need low-level libraries or powerful servers to create them.

Reasons PNG may be a good choice:

• browser support
• existing tooling for creating PNG spritesheets
• most people have a PNG compatible editor on their computer
• your graphics are photos or other difficult to vectorize images

Other concerns:

• some SVG editors may store metadata in your SVGs, increasing file size and possibly unintentionally exposing data
  • e.g. when you export a PNG in Inkscape it did/does save the absolute path to this directory in the SVG when you save
  • SVG compressors may remove this, but I haven't tested it (feel free to edit if you have)