Skip to content

Latest commit

 

History

History
54 lines (35 loc) · 2.72 KB

meta-data.md

File metadata and controls

54 lines (35 loc) · 2.72 KB
Raw

svg-sprite

npm version npm downloads Build Status Coverage Status

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.

File structure

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 id.generator function.

SVG results

For each of your shapes, svg-sprite will look for title and 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 <title> and <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.