SVG icons vs. PNG icons in modern web sites

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)

SVG is cool (how FakeRainBrigand nicely described) and renders beautifully but can be pretty complex. A browser has more work to do when dealing with vector data instead of pixel based images. An image is one element, a SVG may have lots of children that can even be added to the DOM when used inline.

I did not do any valuable performance tests but from a logical point of view SVG should be used carefully when it comes to performance especially when dealing with middle aged mobile browsers (CPU-stress). Would be very useful to have a chart where you can see the CPU power consumed by 100 SVG images vs 100 PNG images on different Android and IOS devices ...

Another bugging thing with SVG is that the Tag needs a width and height attribute for some Android/Samsung whatever browsers and our good old IE. And most modern SVG Editors like A***e Illustrator just add the "viewBox" attribute.

The coolest thing about SVG is that it renders nice and crisp in any pixel density.

Unless you are showing very simple shapes/designs or specifically need to modify parts of the graphic with the app, there is not a whole lot of incentive to use SVG. You can produce a PNG at twice the original size (for retina displays) and still have the filesize be an order of magnitude smaller - not to mention better coverage for legacy browsers (no need for javascript or polyfills).

I say this as someone who builds UIs with vector graphics. It's an awesome design tool, but for delivery/bandwidth/reach it's hard to top PNG. Just last night I tested out a well known logo. CocaCola.svg was almost 20K. Since it was a solid/flat color I exported as PNG-8 with 12-color palette compression and got it down to 1.6K (!!!) For just a few logos it's not a big deal, but when you have to show 40 of them.. well, you get the picture.

The best part is that you can turn a PNG into a base64 data uri and embed them right in your stylesheet. This is not recommended with SVG - a format which is already famous for performance and compatibility issues, especially on mobile browsers.

In closing I have to say there are strengths and use cases for both, but PNG has blazed a lot more trails and you face less resistance when you go with the current. For those odd cases where SVG does make a better fit, I highly recommend this article and this learning resource

Happy Designing!