SVG Tint Stream

Set the fill and stroke colours of SVGs with streams.

Table Of Contents

• Requirements
• Usage
• Configuration
• How it works
• Contributing
• Migration guide
• Contact
• License

Requirements

You'll need Node.js 12+ installed to run SVG Tint Stream.

Usage

Install SVG Tint Stream with npm or add to your package.json:

npm install svg-tint-stream

Require SVG Tint Stream:

const SvgTintStream = require('svg-tint-stream');

SvgTintStream extends Node.js Transform stream, and so can be used anywhere that they can. The constructor accepts a single argument which contains options for the tinting (e.g. the tint colour). The available options are documented below.

Tint an SVG on the file system and save it out

// Create the various streams
const readStream = fs.createReadStream('input.svg', 'utf-8');
const writeStream = fs.createWriteStream('output.svg');
const svgStream = new SvgTintStream({
    color: '#f00'
});

// Pipe the original SVG through the transform
// and then into a new file
readStream.pipe(svgStream).pipe(writeStream);

Tint a remote SVG and output the result

This example uses Request.

// Create the various streams
const requestStream = request('http://example.com/input.svg');
const svgStream = new SvgTintStream({
    color: '#f00'
});

// Pipe the remote SVG through the transform
// and then into stdout
requestStream.pipe(svgStream).pipe(process.stdout);

Tint an SVG on the file system and serve it with Express

This example uses Express, and tints the SVG based on a URL parameter.

const app = express();

// Handle request to /svg/:color, tinting the SVG
// and piping it into the response
app.get('/svg/:color', (request, response) => {

    // Create the various streams
    const readStream = fs.createReadStream('input.svg', 'utf-8');
    const svgStream = new SvgTintStream({
        color: request.params.color
    });

    // Pipe the original SVG through the transform
    // and then into the response
    response.set('Content-Type', 'image/svg+xml');
    readStream.pipe(svgStream).pipe(response);

});

app.listen(8080);

Configuration

color

String. The hex colour code to use when tinting the SVG.

const stream = new SvgTintStream({
	color: '#ff0000'
});

If the options argument is a string, then it will be used as a colour value. So the following is equivalent:

const stream = new SvgTintStream('#ff0000');

fill

Boolean. Whether to tint fills in the SVG. Defaults to true.

const stream = new SvgTintStream({
	fill: false
});

stroke

Boolean. Whether to tint strokes in the SVG. Defaults to true.

const stream = new SvgTintStream({
	stroke: false
});

How it works

SVG Tint Stream adds a new <style> element to the top of your SVG and sets some important style rules. This overrides the fill and stroke colours of all elements.

So if you create an SvgTintStream with a color of #ff0000, the following styles will be added to the SVG:

<style>
    * {
        fill: #ff0000 !important;
        stroke: #ff0000 !important;
    }
</style>

Contributing

To contribute to SVG Tint Stream, clone this repo locally and commit your code on a separate branch.

Please write unit tests for your code, and check that everything works by running the following before opening a pull-request:

npm test                  # run the full test suite
npm run lint              # run the linter
npm run test-unit         # run the unit tests
npm run test-coverage     # run the unit tests with coverage reporting
npm run test-integration  # run the integration tests

Migration guide

State | Major Version | Last Minor Release | Migration guide | :---: | :---: | :---: | :---: ✨ active | 1 | N/A | migrate to v1 | ╳ deprecated | 0 | 0.4 | N/A |

Contact

If you have any questions or comments about svg-tint-stream, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.

Licence

This software is published by the Financial Times under the MIT licence.