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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: