Why SVG is Superior to the 'I' Tag for Displaying Icons

Icons are popular for their potential to convey information to readers at a glance without the need for accompanying text to explain what a piece of content is. Various icons have been codified through years of use so that the average reader can safely assume their meaning and relevance, allowing functions like pop-up menus to take place to no one's surprise.

That said, websites may use countless obscure and custom-made icons that the reader cannot be expected to understand without being initiated into the website's own personal design lexicon in some way. In general, the website can ascribe its own meaning to creative and unusual icons in clearly communicated terms, and they can be used for site-specific functions such as marking or categorizing certain sections or pages.

When using either a common icon or a customized design, the universally accepted format for it is SVG because it amounts to the web browser rendering the icon directly rather than waiting to load it as a flat image file. This allows potentially important icons to assuredly display even if server or connection issues would cause a website to fail to display images even after being "fully loaded," forcing the user to manually reload either the images or the whole page.

Regardless of whether icons are expressed through either the "img" or "svg" tags, it is ultimately preferable to using the "i" tag as markup for expressing an icon. This tag's capacity to define a visual element for use as an icon often comes as a surprise to web designers because it is universally known as markup that italicizes any text-based content enclosed within it. Web browsers can reliably parse the "i" tag when it is used to convey an image because a "class" parameter will be included inside the tag itself instead of the space between it and the "/i" tag. However, this may cause problems for screen-reading software that visually impaired users might be relying on to engage with a web page's contents; it might not always successfully recognize the "class" parameter as an element to be said out loud. For more information click here https://i.redd.it/i72qgm6krz371.jpg.