There is no One True Way©…
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>
This post is the first in a series about the power of CSS.
- Colorizing SVG Backgrounds (this post)
- Dropdown Menus
- Logical Styling Based On the Number of Given Elements
CSS is getting increasingly powerful, and with features like …
Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of
<svg></svg> might have a
<title></title>, and you might be appying IDs to both of those elements for various reasons.…
There is an interesting gotcha about the
fill-rule attribute of SVG, detailed here by Anthony Collurafici.
Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default SVG value
Another day, another design system deciding an SVG icon system is the way to go.
Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, …