Tag Archives: icons

How to implement SVG icons | Creative Bloq

Web developer Shehzad Azram shows how SVG icons could help solve accessibility issues, and reveals how to implement one.

Things have come a long way from the days when we used plain vector art images as icons. Yet there are still a number of accessibility issues when it comes to icons. Thankfully, SVGs could go a long way towards addressing this problem.In this article, I’ll take you through the different icon options we have used in the past, then explore the benefits (and drawbacks) of SVG icons. Finally, I’ll explain how to implement SVG icons, using automation tools to reduce the workload.

While SVG has been around since the last century, it took over a decade for Internet Explorer to catch up with v9. With the rapid decline of legacy IE usage, SVG is now a viable solution across the vast majority of browsers and devices.

There are still some older browsers that do not support SVG icons, but there are tricks to get around this. So why should we use them over font icons? SVGs, like font icons, are vector-based.

SVG icons
How font icons appear when a font fails to render

Unlike font icons, you don’t have to use workarounds to make them accessible: they already contain semantic title and description attributes. They scale to any size without losing detail, so look great on HDPI displays.

Curated by (Lifekludger)
Read full article at Source: How to implement SVG icons | Creative Bloq

Are your icons usable and accessible? 6 tips for better icon use in apps and online

iconsGraphic icons are a powerful way to enhance usability and accessibility in apps and online, but only if they are chosen and implemented with care. Here are some tips from Emanuela Gorla, a usability and accessibility consultant at System Concepts.

Real world examples and expert tips on the use of icons in apps and online, from usability and accessibility specialist Sophie Buda.


curated by (Lifekludger)
Read full article at source.