We’ll say a few words about each of these so you can see if an SVG icon set is the right solution for you. The overall performance of SVG icons can be evaluated from several different aspects: scalability, customization, browser support, accessibility, inline and external style, as well as positioning. SVG icons are vector graphic files, meaning that you can freely change their size while keeping the image quality perfect. On top of this, they aren’t particularly good for complex images because the code gets bulky which causes rendering issues. For example, IE8 and Android 2.3 (and lower) won’t display them. One of the biggest flaws is their incompatibility with old web browsers.
So, do SVG icons have any downsides? Yes. This is very useful because it prevents the need for sending multiple HTTP requests (makes the page a lot faster). This means that you can easily change the color, size, or any other property directly in the CSS.įrom the performance standpoint, a huge upside is the possibility to keep many icons in a single file. We should also point out that SVG vector icons are displayed using CSS backgrounds. This, in turn, prevents anti-aliasing rules and the subsequent edge blur. True, but with a significant difference – an icon font is perceived by the browser as a font, while SVGs are viewed as graphics. Now, you might say: icon fonts are also vectors and can be scaled easily.
0 kommentar(er)
