Positioning an SVG vs icon font is simpler with SVG. Furthermore, you can animate individual strokes in SVG icons. Unlike single-color icon fonts, SVG icons allow for gradients. First, you can add more colors with SVGs. You can be sure that the visual quality of SVGs will be perfect in all resolutions. Icon fonts, on the contrary, are vulnerable to these techniques and can look blurry. Moreover, as browsers treat SVGs as images, there are no anti-aliasing rules for SVGs. Unlike PNG or JPEG images, SVG icons are scalable, so your webpage will not suffer from a loss in quality when visitors use various devices to browse it. Let’s explore the main advantages of using SVGs on web pages. This particular type of adding SVGs does not increase server requests and thus doesn’t affect the website’s performance negatively. To display an SVG icon, you should use the HTML element, similar to loading PNG, JPG, or GIF files: Inline SVG Icons You can implement SVG icons either externally, as an image with the tag, or inlined in HTML. There are different ways of adding SVGs to websites. In other words, SVG images are text-based and can function with CSS, JavaScript, DOM, etc. SVG files use XML-based markup language for describing vector graphics. What Are SVG Icons?Īn SVG (scalable vector format) file, as the name implies, is an image format for vector graphics that features scalability. What’s more, icon font files usually contain numerous elements, many of which you’ll probably not use. Such flashes can be irritating and impact user experience negatively. Thus, there is a chance that random glyphs or characters will be shown instead of icons before the font is fully loaded. Until the browser is able to reach the font asset, it can display the textual HTML content before fully receiving it, which results in FOUC. Depending on the font file size, network conditions, and user’s hardware, it can take time to retrieve the font. While processing the HTML and the files linked to it, the browser builds the Document Object Model (DOM) in real time. To use icon fonts, you have to apply the rule, which instructs browsers to make an HTTP request for the font file. Changing the grid can result in losing the quality of the icon.Īlthough you can adjust icon fonts for different viewport sizes, you should also remember to put them in aria classes to make them accessible for browsers.Īnother problem that may arise with font icons is a flash of unstyled content (FOUC). Being monochromous and having style limitations is one of the cons that font icons may present for designers/developers.Īs for the size, icon fonts design suggests a specific grid, such as 16×16, 32×32, 48×48, etc. Yet, remember that you can apply only one color to such icons. Indeed, it’s possible to change the font color and add a shadow to it, if necessary. Reasons to Avoid Using Icon Fontsįirst, we mentioned the icon fonts scalability. While icon fonts have several considerable advantages, we should not disregard their disadvantages. Third, icon fonts are small in size, and thus they can load quite fast. Browsers request the indicated file and show the icon. Second, the possibility to point to the font file lets designers use any font they wish without worrying if it is web-safe. You only have to create relevant classes in your CSS. Mainly, you can adjust icons with the help of CSS, modifying their size, color, and shape. Why Have Icon Fonts Been Popular?įirst, each character in icon fonts is scalable. Icon fonts were the de facto method of adding vector-based icons to websites until early 2020 when the real SVG support in different browsers became stable. As a rule, a set of icon fonts is stored in a font file. Icon fonts, as the name suggests, represent fonts that contain icons instead of letters and numbers. Now, we’ll explore what icon fonts and SVG icons are, how you can use them, and which method you should prefer in particular situations. As an integral part of UI design, icons can also represent a challenge for developers.Īn intense debate about icon fonts vs SVG fonts has been taking place for a while. You are sure to find them in navigation menus, contact details, product descriptions, etc. It’s hard to imagine modern web pages without these tiny but helpful elements – icons.
0 Comments
Leave a Reply. |