What is Icon-font
Icon fonts are simply a way of displaying icons in your applications and websites. Icon font is just exactly like a normal font. The only difference is, instead of a letter mapped to a character or a Unicode area, here we have a symbol.
What is SVG
SVG stands for “Scalable Vector Graphics”. The primary purpose of SVG icons is to define vector-based graphics in XML format. Instead of a font or an image, SVG is a block of XML code directly served to a browser that renders it in an intended manner. SVG does not just offer an unmatched ability to be scaled to any size without any shred of quality degradation but it is also better anti-aliasing than Icon fonts. Moreover, we can edit, color, or animate each individual bit of an SVG icon, unlike the traditional icon font.
Ways to use SVG
There are two main ways that you can implement SVGs on your website:
- As a .svg file: SVG files can be used just like other image files, displaying them on a page using the the
<img>tag or as a background in CSS. - Using inline SVG code: Where SVGs differ is that the code inside the file can be copied and pasted directly on a page to display the image. This method allows for more control over manipulating the image.
Benefits of using SVG
- Scalability- One the major benefits of SVG is that they are resolution-independent. This means that unlike file types such as JPG or PNG, SVGs retain the same quality no matter what screen resolution or size they are being at. So, on a retina display where a JPG might appear blurry if it’s not large enough, an SVG will still look high-quality.
- File size- When it comes to file size icon fonts have a slight edge over SVGs. Your file size can be considerably larger if you are using Inline SVG over an external SVG icon file. One major reason for this is the fact that, unlike external SVG, Inline SVG is not cached by the browser. Using SVGs can result in smaller file sizes than other file types when optimized properly. One way of reducing the file size is SVG sprites. This is helpful when dealing with higher resolution screens since SVGs don’t need to be created at larger sizes to accommodate the difference as raster images do. If you are using SVG files on your website, smaller file sizes mean your images will load faster.
- Accessibility- One major advantage of SVG icons over Icon fonts is their superior accessibility. SVGs are armed with built-in semantic elements – like
<title>and<desc>that make them accessible to screen readers and text browsers. Unlike icon fonts, SVGs are treated as an image and not as text. Moreover, SVG is compatible with WAI-ARIA specifications – aria-labeled by attribute. - Animation- Elements inside SVG can be animated to create some truly amazing interactive experiences, or the animation can be used to add nice little touches to an interface, image, or icon. Animation can be created using CSS, the Web Animations API in JavaScript, or using the SVG’s
<animate>tag. - Navigable DOM- SVG inside the browser has its own DOM. SVG is treated as a separate document by the browser and then positioned inside the normal DOM of the page. This is important for the
viewBoxproperty, as we can draw our image on a canvas of any size, but then display it in the browser at another, all without updating the properties inside the SVG. This separate, navigable DOM is also how we interact with elements inside SVG using CSS and JavaScript. - Style control- Another benefit of using the inline SVG method is that it allows you to control the styles within your image. You can control properties such as fill color, stroke color, sizing, and more through CSS. This is especially useful for adding hover effects to an image, eliminating the need for image sprites.
- Performance- Inline SVG does not make any additional server requests, however, it cannot be cached by the browser as it is considered a block of HTML code. This can be solved by using an External SVG file. Icon-fonts may encounter occasional failures. Loading errors leave black spaces which can have an adverse effect on page design.
- Accessibility and SEO- Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.
Tools for SVG
Conclusion
Since SVG’s can be responsive, animated, have better scalability, style control, and performance, there’s no reason you shouldn’t use them. So, in my opinion, SVG is pretty much better than icon fonts.
Thank you for reading, if you have reached it so far, please like the article, it will encourage me to write more such articles. Do share your valuable suggestions in the comments, I appreciate your honest feedback! I would love to connect with you at Twitter and LinkedIn