https://github.com/bubkoo/text2svg
🍄 Convert text to svg path.
https://github.com/bubkoo/text2svg
Last synced: about 1 year ago
JSON representation
🍄 Convert text to svg path.
- Host: GitHub
- URL: https://github.com/bubkoo/text2svg
- Owner: bubkoo
- License: mit
- Created: 2016-03-30T18:03:59.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-09-24T02:28:14.000Z (almost 3 years ago)
- Last Synced: 2025-04-24T07:42:08.172Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 35
- Watchers: 6
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# text2svg
> Convert text to svg path
[](https://github.com/bubkoo/text2svg/blob/master/LICENSE)
[](https://www.npmjs.com/packages/text2svg)
## Install
```
$ npm install --save text2svg
```
## Usage
```js
var Text2svg = require('text2svg');
var text2svg = new Text2svg('localFontPath');
var 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:
```js
function (text2svg) {
// ...
}
```
### toPathData(text, options)
Convert the `text` to path data, which is the attribute value of `d` in the `` element. Return:
```js
{
width : width, // Int, total width
height : height, // Int, total Height
pathData: pathData // Array/String
}
```
If `options.divided` is `true` the pathData will be an Array.
### toPath(text, options)
Convert the `text` to `` element(s). Return:
```js
{
width : width, // Int, total width
height : height, // Int, total Height
pathData: pathData // Array/String
path : path // Array/String
}
```
### toSVG(text, options)
Convert the `text` to `` element. Return:
```js
{
width : width, // Int, total width
height : height, // Int, total Height
pathData: pathData // Array/String
path : path // Array/String
svg : svg // String
}
```
## 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 `` with `` element. (default: `false`)
This option only works for `toSVG()`.
### title
If specified will generate a `` at the root of ``. (default: `text`)
This option only works for `toSVG()`.
### desc
If specified will generate a `` at the root of ``. (default: `null`)
This option only works for `toSVG()`.
### Styling the elements
Specify the padding of the `` relative to the ``:
- options.padding
- options.paddingTop/options['padding-top']
- options.paddingRight/options['padding-right']
- options.paddingBottom/options['padding-bottom']
- options.paddingLeft/options['padding-left']
The ``, `` and `` elements can be styled by any valid attributes.
The generated `` has the following default attributes:
```js
{
'version' : '1.1',
'xmlns' : 'http://www.w3.org/2000/svg',
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
'role' : 'img',
'width' : width,
'height' : height,
'viewbox': [x, y, width, height].join(' ')
}
```
We can **add**/**update**/**remove** by `options.svg`:
```js
options.svg = {
'version': '', // remove this attribute
'role' : 'logo', // update this attribute
'fill' : 'red' // add some custiom styles
}
```
**Note** that the `width`, `height` and `viewbox` can't be specified.
Styling the `` by `options.path`. If `divided` is `true` we can style the individual `` element by `options.path?`, which `?` is the index of each char in the `text`:
```js
// style for every path(s)
options.path = {
'fill': yellow
};
// style the first char
options.path0 = {
'fill': '#FF0000',
'stroke': '#000000'
};
```
As the same `options.g` specified the style of `` element.
## Related
- [logo.svg](https://github.com/bubkoo/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](https://github.com/bubkoo/text2svg/issues/new).