This file is part of the documentation of svg-sprite — a free low-level Node.js module that takes a bunch of SVG files, optimizes them and creates SVG sprites of several types. The package is hosted on GitHub.
Meta data injection
By providing a simple YAML file via the
shape.meta configuration property, you can inject titles and descriptions into your SVG files before they get compiled as a sprite. Doing so may improve the accessibility of your SVGs. Please see the articles by The Paciello Group and Jonathan Neal on how to use your SVG sprites in a most accessible way.
The YAML file needs to look like this:
"path/to/rectangle.svg": title: "Green rectangle" description: "A light green rectangle with rounded corners and a dark green border" path--to--circle: title: "Red circle" description: "A red circle with a black border"
The keys need to match either
- the "local" file path part of the SVG files you register to the spriter or
- the final shape IDs / CSS class names as returned by the
For each of your shapes, svg-sprite will look for
description keys and inject their values like this:
<svg aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg>
Please be aware that existing
<description> elements in the SVG files will be overridden. Also, even without the
meta file being specified, svg-sprite will try to find these two elements in your files and set the
aria-labelledby attribute accordingly.