{"id":13430408,"url":"https://github.com/shrhdk/text-to-svg","last_synced_at":"2025-05-15T04:08:35.679Z","repository":{"id":29272215,"uuid":"32804921","full_name":"shrhdk/text-to-svg","owner":"shrhdk","description":"Convert text to SVG path without native dependence.","archived":false,"fork":false,"pushed_at":"2023-09-26T06:27:01.000Z","size":4337,"stargazers_count":991,"open_issues_count":36,"forks_count":134,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-29T03:07:50.414Z","etag":null,"topics":["javascript","svg"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shrhdk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2015-03-24T14:47:48.000Z","updated_at":"2025-04-26T10:29:24.000Z","dependencies_parsed_at":"2024-04-13T17:04:14.140Z","dependency_job_id":"cc21f5ad-2eb6-434e-aae1-6e2393262f97","html_url":"https://github.com/shrhdk/text-to-svg","commit_stats":{"total_commits":101,"total_committers":7,"mean_commits":"14.428571428571429","dds":0.08910891089108908,"last_synced_commit":"2ea4c5f2cda193c3e86f34e89f2b03e04acd88fe"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrhdk%2Ftext-to-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrhdk%2Ftext-to-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrhdk%2Ftext-to-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shrhdk%2Ftext-to-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shrhdk","download_url":"https://codeload.github.com/shrhdk/text-to-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251751455,"owners_count":21637928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","svg"],"created_at":"2024-07-31T02:00:53.181Z","updated_at":"2025-05-15T04:08:30.664Z","avatar_url":"https://github.com/shrhdk.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# text-to-svg\n\n[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url]\n\nConvert text to SVG path without native dependence.\n\n```js\nconst TextToSVG = require('text-to-svg');\nconst textToSVG = TextToSVG.loadSync();\n\nconst attributes = {fill: 'red', stroke: 'black'};\nconst options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};\n\nconst svg = textToSVG.getSVG('hello', options);\n\nconsole.log(svg);\n```\n\n```xml\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 180 72\"\u003e\n  \u003cpath fill=\"red\" stroke=\"black\" d=\"M5.27 9.28L10.62 9.28L10.62 29.36Q15.86 24.12 21.02 24.12Q26.89 24.12 29.60 29.29Q31.11 32.20 31.11 36.35L31.11 59.70L25.77 59.70L25.77 37.93Q25.77 29.21 20.18 29.21Q16.42 29.21 13.57 31.96Q10.62 34.91 10.62 38.71L10.62 59.70L5.27 59.70L5.27 9.28ZM67.68 49.08Q64.55 61.10 54.07 61.10Q47.57 61.10 43.77 55.69Q40.32 50.73 40.32 42.61Q40.32 34.84 43.56 29.88Q47.36 24.12 54 24.12Q66.97 24.12 67.82 43.70L45.74 43.70Q46.16 56.29 54.14 56.29Q60.47 56.29 62.05 49.08L67.68 49.08M62.05 39.09Q60.89 28.93 54 28.93Q47.36 28.93 45.95 39.09L62.05 39.09ZM92.81 51.82Q92.81 54.91 95.77 54.91Q98.19 54.91 101.07 54.35L101.07 59.73Q96.82 60.33 94.82 60.33Q87.19 60.33 87.19 52.84L87.19 9.28L92.81 9.28L92.81 51.82ZM128.81 51.82Q128.81 54.91 131.77 54.91Q134.19 54.91 137.07 54.35L137.07 59.73Q132.82 60.33 130.82 60.33Q123.19 60.33 123.19 52.84L123.19 9.28L128.81 9.28L128.81 51.82ZM162.07 24.12Q168.68 24.12 172.44 29.95Q175.68 34.80 175.68 42.61Q175.68 48.48 173.74 52.91Q170.16 61.14 161.93 61.14Q155.57 61.14 151.77 55.72Q148.32 50.77 148.32 42.61Q148.32 33.82 152.30 28.79Q156.09 24.12 162.07 24.12M161.93 29.14Q158.06 29.14 155.88 33.19Q153.95 36.74 153.95 42.61Q153.95 48.02 155.53 51.43Q157.71 56.11 162 56.11Q165.94 56.11 168.12 52.07Q170.05 48.52 170.05 42.68Q170.05 36.60 168.05 33.12Q165.90 29.14 161.93 29.14Z\"/\u003e\n\u003c/svg\u003e\n```\n\n## Installation\n\n```\n$ npm install --save text-to-svg\n```\n\n## Constructor\n\nAn example for loading default font synchronously. The default font is [IPA font](http://ipafont.ipa.go.jp/). **This method only works on Node.js.**\n\n```js\nconst textToSVG = TextToSVG.loadSync();\nconst svg = textToSVG.getSVG('hello');\nconsole.log(svg);\n```\n\nAn example for loading font synchronously. **This method only works on Node.js.**\n\n```js\n// Argument is file path (NOT URL)\nconst textToSVG = TextToSVG.loadSync('/fonts/Noto-Sans.otf');\nconst svg = textToSVG.getSVG('hello');\nconsole.log(svg);\n```\n\nAn example for loading font asynchronously.\n\n```js\n// First argument is URL on web browsers, but it is file path on Node.js.\nTextToSVG.load('/fonts/Noto-Sans.otf', function(err, textToSVG) {\n    const svg = textToSVG.getSVG('hello');\n    console.log(svg);\n});\n```\n\n## API\n\n### `TextToSVG.getD(text, options = {})`\n\nGet the path data for `d` attribute of `path`.\n\n - `text`: Text to convert to SVG path.\n\nOptions is an optional object containing:\n\n - `x`: Horizontal position of the beginning of the text. (default: `0`)\n - `y`: Vertical position of the baseline of the text. (default: `0`)\n - `fontSize`: Size of the text (default: `72`).\n - `kerning`: if `true` takes kerning information into account (default: `true`)\n - `letterSpacing`: letter-spacing value in `em`.\n - `tracking`: tracking value. (em / 1000)\n - `anchor`: Anchor of object in coordinate. (default: `'left baseline'`)\n   - (`left`, `center`, `right`) + (`baseline`, `top`, `middle`, `bottom`)\n\nReturn value example\n\n```\nM5.27-54.07L10.62-54.07L10.62-34.00Q15.86-39.23 21.02-39.23Q26.89-39.23 29.60-34.07Q31.11-31.15 31.11-27L31.11-3.66L25.77-3.66L25.77-25.42Q25.77-34.14 20.18-34.14Q16.42-34.14 13.57-31.39Q10.62-28.44 10.62-24.64L10.62-3.66L5.27-3.66L5.27-54.07ZM67.68-14.27Q64.55-2.25 54.07-2.25Q47.57-2.25 43.77-7.66Q40.32-12.62 40.32-20.74Q40.32-28.51 43.56-33.47Q47.36-39.23 54-39.23Q66.97-39.23 67.82-19.65L45.74-19.65Q46.16-7.07 54.14-7.07Q60.47-7.07 62.05-14.27L67.68-14.27M62.05-24.26Q60.89-34.42 54-34.42Q47.36-34.42 45.95-24.26L62.05-24.26ZM92.81-11.53Q92.81-8.44 95.77-8.44Q98.19-8.44 101.07-9L101.07-3.62Q96.82-3.02 94.82-3.02Q87.19-3.02 87.19-10.51L87.19-54.07L92.81-54.07L92.81-11.53ZM128.81-11.53Q128.81-8.44 131.77-8.44Q134.19-8.44 137.07-9L137.07-3.62Q132.82-3.02 130.82-3.02Q123.19-3.02 123.19-10.51L123.19-54.07L128.81-54.07L128.81-11.53ZM162.07-39.23Q168.68-39.23 172.44-33.40Q175.68-28.55 175.68-20.74Q175.68-14.87 173.74-10.44Q170.16-2.21 161.93-2.21Q155.57-2.21 151.77-7.63Q148.32-12.59 148.32-20.74Q148.32-29.53 152.30-34.56Q156.09-39.23 162.07-39.23M161.93-34.21Q158.06-34.21 155.88-30.16Q153.95-26.61 153.95-20.74Q153.95-15.33 155.53-11.92Q157.71-7.24 162-7.24Q165.94-7.24 168.12-11.29Q170.05-14.84 170.05-20.67Q170.05-26.75 168.05-30.23Q165.90-34.21 161.93-34.21Z\n```\n\n### `TextToSVG.getPath(text, options = {})`\n\nGet the `path` element of SVG.\n\n - `text`: Text to convert to SVG path.\n\nOptions is an optional object containing:\n\n - `x`: Horizontal position of the beginning of the text. (default: `0`)\n - `y`: Vertical position of the baseline of the text. (default: `0`)\n - `fontSize`: Size of the text (default: `72`).\n - `kerning`: if `true` takes kerning information into account (default: `true`)\n - `letterSpacing`: letter-spacing value in `em`.\n - `tracking`: tracking value. (em / 1000)\n - `anchor`: Anchor of object in coordinate. (default: `'left baseline'`)\n   - (`left`, `center`, `right`) + (`baseline`, `top`, `middle`, `bottom`)\n - `attributes`: Key-Value pairs of attributes of `path` element.\n\nReturn value example\n\n```xml\n\u003cpath fill=\"red\" stroke=\"black\" d=\"M5.27-54.07L10.62-54.07L10.62-34.00Q15.86-39.23 21.02-39.23Q26.89-39.23 29.60-34.07Q31.11-31.15 31.11-27L31.11-3.66L25.77-3.66L25.77-25.42Q25.77-34.14 20.18-34.14Q16.42-34.14 13.57-31.39Q10.62-28.44 10.62-24.64L10.62-3.66L5.27-3.66L5.27-54.07ZM67.68-14.27Q64.55-2.25 54.07-2.25Q47.57-2.25 43.77-7.66Q40.32-12.62 40.32-20.74Q40.32-28.51 43.56-33.47Q47.36-39.23 54-39.23Q66.97-39.23 67.82-19.65L45.74-19.65Q46.16-7.07 54.14-7.07Q60.47-7.07 62.05-14.27L67.68-14.27M62.05-24.26Q60.89-34.42 54-34.42Q47.36-34.42 45.95-24.26L62.05-24.26ZM92.81-11.53Q92.81-8.44 95.77-8.44Q98.19-8.44 101.07-9L101.07-3.62Q96.82-3.02 94.82-3.02Q87.19-3.02 87.19-10.51L87.19-54.07L92.81-54.07L92.81-11.53ZM128.81-11.53Q128.81-8.44 131.77-8.44Q134.19-8.44 137.07-9L137.07-3.62Q132.82-3.02 130.82-3.02Q123.19-3.02 123.19-10.51L123.19-54.07L128.81-54.07L128.81-11.53ZM162.07-39.23Q168.68-39.23 172.44-33.40Q175.68-28.55 175.68-20.74Q175.68-14.87 173.74-10.44Q170.16-2.21 161.93-2.21Q155.57-2.21 151.77-7.63Q148.32-12.59 148.32-20.74Q148.32-29.53 152.30-34.56Q156.09-39.23 162.07-39.23M161.93-34.21Q158.06-34.21 155.88-30.16Q153.95-26.61 153.95-20.74Q153.95-15.33 155.53-11.92Q157.71-7.24 162-7.24Q165.94-7.24 168.12-11.29Q170.05-14.84 170.05-20.67Q170.05-26.75 168.05-30.23Q165.90-34.21 161.93-34.21Z\"/\u003e\n```\n\n### `TextToSVG.getSVG(text, options = {})`\n\nGet the SVG.\n\n - `text`: Text to convert to SVG path.\n\nOptions is an optional object containing:\n\n - `x`: Horizontal position of the beginning of the text. (default: `0`)\n - `y`: Vertical position of the baseline of the text. (default: `0`)\n - `fontSize`: Size of the text (default: `72`).\n - `kerning`: if `true` takes kerning information into account (default: `true`)\n - `letterSpacing`: letter-spacing value in `em`.\n - `tracking`: tracking value. (em / 1000)\n - `anchor`: Anchor of object in coordinate. (default: `'left baseline'`)\n   - (`left`, `center`, `right`) + (`baseline`, `top`, `middle`, `bottom`)\n - `attributes`: Key-Value pairs of attributes of `path` element.\n\nReturn value example\n\n```xml\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\u003e\u003cpath fill=\"red\" stroke=\"black\" d=\"M5.27-54.07L10.62-54.07L10.62-34.00Q15.86-39.23 21.02-39.23Q26.89-39.23 29.60-34.07Q31.11-31.15 31.11-27L31.11-3.66L25.77-3.66L25.77-25.42Q25.77-34.14 20.18-34.14Q16.42-34.14 13.57-31.39Q10.62-28.44 10.62-24.64L10.62-3.66L5.27-3.66L5.27-54.07ZM67.68-14.27Q64.55-2.25 54.07-2.25Q47.57-2.25 43.77-7.66Q40.32-12.62 40.32-20.74Q40.32-28.51 43.56-33.47Q47.36-39.23 54-39.23Q66.97-39.23 67.82-19.65L45.74-19.65Q46.16-7.07 54.14-7.07Q60.47-7.07 62.05-14.27L67.68-14.27M62.05-24.26Q60.89-34.42 54-34.42Q47.36-34.42 45.95-24.26L62.05-24.26ZM92.81-11.53Q92.81-8.44 95.77-8.44Q98.19-8.44 101.07-9L101.07-3.62Q96.82-3.02 94.82-3.02Q87.19-3.02 87.19-10.51L87.19-54.07L92.81-54.07L92.81-11.53ZM128.81-11.53Q128.81-8.44 131.77-8.44Q134.19-8.44 137.07-9L137.07-3.62Q132.82-3.02 130.82-3.02Q123.19-3.02 123.19-10.51L123.19-54.07L128.81-54.07L128.81-11.53ZM162.07-39.23Q168.68-39.23 172.44-33.40Q175.68-28.55 175.68-20.74Q175.68-14.87 173.74-10.44Q170.16-2.21 161.93-2.21Q155.57-2.21 151.77-7.63Q148.32-12.59 148.32-20.74Q148.32-29.53 152.30-34.56Q156.09-39.23 162.07-39.23M161.93-34.21Q158.06-34.21 155.88-30.16Q153.95-26.61 153.95-20.74Q153.95-15.33 155.53-11.92Q157.71-7.24 162-7.24Q165.94-7.24 168.12-11.29Q170.05-14.84 170.05-20.67Q170.05-26.75 168.05-30.23Q165.90-34.21 161.93-34.21Z\"/\u003e\u003c/svg\u003e\n```\n\n### `TextToSVG.getMetrics(text, option = {})`\n\nMeasure text size.\n\n - `text`: Text to measure size.\n\nOptions is an optional object containing:\n\n - `x`: Horizontal position of the beginning of the text. (default: `0`)\n - `y`: Vertical position of the baseline of the text. (default: `0`)\n - `fontSize`: Size of the text (default: `72`).\n - `kerning`: if `true` takes kerning information into account (default: `true`)\n - `letterSpacing`: letter-spacing value in `em`.\n - `tracking`: tracking value. (em / 1000)\n - `anchor`: Anchor of object in coordinate. (default: `'left baseline'`)\n\nAn example of return value.\n\n```json\n{\n  \"x\": 0,\n  \"y\": -63.3515625,\n  \"baseline\": 0,\n  \"width\": 180,\n  \"height\": 72,\n  \"ascender\": 63.3515625,\n  \"descender\": -8.6484375\n}\n```\n\n## License\n\nMIT\n\n## Credits\n\ntext-to-svg depends on the following softwares. I thank great authors a lot.\n\n- [opentype.js](https://github.com/nodebox/opentype.js): Copyright (c) 2015 Frederik De Bleser\n- [commander](https://github.com/tj/commander.js): Copyright (c) 2011 TJ Holowaychuk \u003ctj@vision-media.ca\u003e\n\nThese are released under the [MIT license](https://opensource.org/licenses/MIT)\n\n[npm-url]: https://npmjs.org/package/text-to-svg\n[npm-image]: https://badge.fury.io/js/text-to-svg.svg\n[travis-url]: https://travis-ci.org/shrhdk/text-to-svg\n[travis-image]: https://travis-ci.org/shrhdk/text-to-svg.svg?branch=master\n[gitter-url]: https://gitter.im/shrhdk/text-to-svg\n[gitter-image]: https://badges.gitter.im/Join%20Chat.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshrhdk%2Ftext-to-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshrhdk%2Ftext-to-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshrhdk%2Ftext-to-svg/lists"}