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)

Answer 2

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!

Answer 3

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.

Answer 4

Let's note that performancewise SVG can become horrible. Even on modern browsers, like Chrome (writing this in 2019 !), a CMS-like page with a few 100s (practically 3-800) of svg icons literally hangs the browser for 5+ seconds to finish rendering. Maxing out CPU meanwhile.

As noted elsewhere, the count of SVGs embedded in the page expontentially increases the load on the browser, so if you happen to face such situation

Option #1: convert svgs into webfont (See performance chart here:http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Option #2: fall back to plain old PNGs

In such situations where you ~never wanna do anything fancy like on-the-fly color modification, and you have MANY instances of SVGs, the old PNG does the job and saves the day!

Answer 5

It's true, png is used almost everywhere. I think it's because the SVG, in the most of cases, is pretty useless, the image should be bigger (i think) and the computer have to regenerate the image whenever you zoom it (because you always zoom the images, don't you?) I think this is the most important reason.

Answer 6

SVG icons are significantly more popular than PNG icons. Why is this the case? The main reason is that they are easier to create and can be processed by most web browsers. The disadvantage is that SVG icons do not have the same level of quality as their PNG counterparts. They also do not support CSS 3D transforms and can cause problems in some apps, such as when used in conjunction with a button. Modern browsers now support Free SVG icons, which can be easily saved on the server and loaded into client-side code.