Home / Questions / 36235
Accepted
Diablo
Asked: 2020-11-28 05:30:14 +0800 CST 2020-11-28 05:30:14 +0800 CST

Should I use SVG, Icon Fonts, or Images?

  • 772

Images
Years ago images were used in all aspects of a web page, their drawback is their size, with large HTTP requests. With which the CSS Sprites technique was born to reduce, speed, performance and make it easier to display by referring through CSS to images that are reusable.

.icono-facebook, .icono-twitter {
    background-image: url('./ruta-sprite.png') no-repeat;
    height: 64px;
}
.icono-facebook {
    width: 60px;
    background-position: 0 0;
}
.icono-twitter {
    width: 112px;
    background-position: -72px 0;
}


Icon Fonts
Making use of icon fonts today is very easy, there are great popular libraries such as Font Awesome Icon, IcoMoon, Elegant Icon Font and some that I left.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<i class="fa fa-facebook-official" aria-hidden="true"></i>


SVG
Currently very popular in the design world. SVG stands for Scalable Vector Graphics.

<svg>
  <path id="#mi-icono" d="m50,100..."></path>
</svg>


Now my question:

  1. What advantages and disadvantages do each have?
  2. What would be the best technique to insert icons to a web page?

Taking into account quality, performance and speed.

css

1 Answers

  1. Best Answer

    Taking into account quality, performance and speed and considering that your question refers to inserting ICONS, SVG and Fonts come out on top.

    Both will have higher quality and better performance than images since both are vector based.

    The decision depends on the number of different icons you want to handle and the degree of customization you want in your icons.

    If you want a few very personalized icons your best option is SVG. On the other hand, if you want a wide catalog of common and ready-to-use icons, it is best to choose a font.

    In any case, I recommend these 2 links so that you can expand the information and learn about good practices in the use of SVG

    https://css-tricks.com/using-svg/

    https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/

    • 2