- All shapes are in the SVG.
- Uses classes to selectively apply stroke colors.
- Sets the SVG as an image with
aria-labelledby to provide an accessible name.
<title> acts as a tool-tip in many browsers, whether or not I want it to.
aria-describedby to provide an accessible description.
- Works in Windows High Contrast Mode.
focusable="false" to prevent IE tab stops.
- 1 request, 7.8kb, 804 bytes from script.
- You can save the SVG for your own use and adjust the classes to make any number in the range that you want.
- I wrote a post with some background: Cistercian SVG