Skip to content

Latest commit

 

History

History
58 lines (39 loc) · 2.92 KB

meta-data.md

File metadata and controls

58 lines (39 loc) · 2.92 KB
Raw

svg-sprite NPM version Build Status Coverage Status Dependency Status Development Dependency 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.