text2svg

Convert text to svg path

Install

$ npm install --save text2svg 

Usage

1var Text2svg = require('text2svg');
2var text2svg = new Text2svg('localFontPath');
3var svg = text2svg.toSVG('something', options);

API

Constructor

There are three ways to get an instance of Text2svg:

• new Text2svg('localFontPath')
• Text2svg.loadSync('localFontPath')
• Text2svg.load('fontUrl', callback)

The callback function looks like:

1function (text2svg) {
2    // ...
3}

toPathData(text, options)

Convert the text to path data, which is the attribute value of d in the <path> element. Return:

1{
2    width   : width,   // Int, total width
3    height  : height,  // Int, total Height
4    pathData: pathData // Array/String
5}

If options.divided is true the pathData will be an Array.

toPath(text, options)

Convert the text to <path> element(s). Return:

1{
2    width   : width,   // Int, total width
3    height  : height,  // Int, total Height
4    pathData: pathData // Array/String
5    path    : path     // Array/String
6}

toSVG(text, options)

Convert the text to <svg> element. Return:

1{
2    width   : width,   // Int, total width
3    height  : height,  // Int, total Height
4    pathData: pathData // Array/String
5    path    : path     // Array/String
6    svg     : svg      // String
7}

Options

x

Horizontal position of the beginning of the text. (default: 0)

y

Vertical position of the baseline of the text. (default: 0)

fontSize

Size of the text. (default: 72)

spacing

The letter spacing. (default: 0)

kerning

If true takes kerning information into account. (default: true)

divided

If true generates individual path for every char. (default: false)

grouped

If true groups the individual <path> with <g></g> element. (default: false)

This option only works for toSVG().

title

If specified will generate a <title> at the root of <svg>. (default: text)

This option only works for toSVG().

desc

If specified will generate a <desc> at the root of <svg>. (default: null)

This option only works for toSVG().

Styling the elements

Specify the padding of the <path> relative to the <svg>:

• options.padding
• options.paddingTop/options['padding-top']
• options.paddingRight/options['padding-right']
• options.paddingBottom/options['padding-bottom']
• options.paddingLeft/options['padding-left']

The <svg>, <path> and <g> elements can be styled by any valid attributes.

The generated <svg> has the following default attributes:

1{
2	'version'    : '1.1',
3    'xmlns'      : 'http://www.w3.org/2000/svg',
4    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
5    'role'   : 'img',
6    'width'  : width,
7    'height' : height,
8    'viewbox': [x, y, width, height].join(' ')
9}

We can add/update/remove by options.svg:

1options.svg = {
2	'version': '',     // remove this attribute
3    'role'   : 'logo', // update this attribute
4    'fill'   : 'red'   // add some custiom styles
5}

Note that the width, height and viewbox can't be specified.

Styling the <path> by options.path. If divided is true we can style the individual <path> element by options.path?, which ? is the index of each char in the text:

1// style for every path(s)
2options.path  = {
3    'fill': yellow
4};
5
6// style the first char
7options.path0 = {
8    'fill': '#FF0000',
9    'stroke': '#000000'
10};

As the same options.g specified the style of <g> element.

Related

• logo.svg Generate a svg logo, then you can embed it in you README.md.

Contributing

Pull requests and stars are highly welcome.

For bugs and feature requests, please create an issue.