Direct link to the article Accessible SVG Icons With Inline Sprites

Accessible SVG Icons With Inline Sprites

Direct Link

This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here’s the ideal example:

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>
Avatar of Chris Coyier
Shared by Chris Coyier on
Direct link to the article Building a Donut Chart with Vue and SVG

Building a Donut Chart with Vue and SVG

I recently needed to make a donut chart for a reporting dashboard at work. I wanted it to dynamically calculate its segments based on an arbitrary set of values, have labels, scale well across all screen sizes and devices be accessible, and cross-browser compatible, among other things. This article details the steps I took to do that, using Vue.js.
Avatar of Salomone Baquis
Salomone Baquis on