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 are IE8 and that SVG uses more CPU power (but I don't believe this is any issue for simple 1K icons). I can see (and we currently use) many advantages in using SVGs, either when it's used as sprites, as images, or as inline SVG.

(Question Looking for a research: PNG Sprite vs SVG sprite vs Icon fonts focuses on performance and doesn't have relevant answer, Icon Font vs. SVG caching and network concern focuses on network traffic, but it's easily solvable by e.g. templating.)

If new web site supports only modern browsers, is there any reason for not using SVGs (or - is there any reason for using PNGs for icons)? If we don't care about IE8 and the use of SVG is backed up by templating and/or caching, is there any catch to rely only on 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)