Should we use SVG or PNG icons for websites?

Asked

Viewed 2,249 times

4

Is it better to use icons in SVG or PNG formatting for websites? Why?

image web-application webdesign

  • as the bigown spoke, depends on the use, what he said specifies very be,.

2 answers

8


Reasons for SVG to be a good choice:

  • It supports browsers with windows of any size smoothly, especially with CSS background-size
  • you can climb them up/down, as for an effect Hover
  • you can embed Svgs and modify them in real time with Javascript and DOM
  • you can style Svgs or parts of them with CSS (changing colors, outlines, etc.)
  • you can generate Svgs dynamically on the client or server. Due to its text-based nature, you don’t need low-level libraries or powerful servers to create them.

Reasons for PNG to be a good choice:

  • Better support in all browsers
  • existing tools to create spritesheets PNG
  • most people have a PNG compatible editor on their computer
  • whether the image is a photo or other images that are difficult to vector

Source.

  • Although I largely agree with his answer (but I’m also not saying it’s wrong), as he questions about the use of SVG with icons, I think only item #2 would fit the items on PNG. If it’s not a spritesheet, I see no reason to use .png. And also remembering that in order to use SVG dynamic, as described in the response, the same shall be inline and not as a reference in a img tag.

  • It may be its only reason, most people have other reasons, I admit that the third one is really more a question of who is doing and has a more or less easy solution, but not so simple when it does not need vectorization. Vector photos do not usually look good and may require manual hit, which greatly increases the work. If you think you don’t need to support browsers that don’t work with SVG, okay, but it’s good to know that using it will be adapting to fewer browsers, in fact a minor problem, but not non-existent. Worth the reservation.

  • But to consider the support of SVG browsers, I think it would be an insignificant portion that would be left out, as well to say all browsers and versions support SVG. Reference.

1

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

Browser other questions tagged image web-application webdesign

You are not signed in. Login or sign up in order to post.