Convert text to SVG path -- solved but to integrate

[edouard-lopez]

• JS text-to-svg: Convert text to SVG path without native dependence using ;
• using Inkscape v0.49+ --export-text-to-path option ;

[edouard-lopez]

text-to-svg seems a straight-forward solution to position and add rotation:

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();

const attributes = {fill: 'red', stroke: 'black'};
const options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};

const svg = textToSVG.getSVG('hello', options);

console.log(svg);

[hugolpz]

See

• https://www.npmjs.com/package/text-to-svg
  • dependence : https://www.npmjs.com/package/opentype.js

It works quite quickly, basic js and svg :

• Pastebin for code : https://jsfiddle.net/dhuh6h6o/2/
• Run it online : https://runkit.com/npm/text-to-svg

I used absolute positioning and text-anchor but translation() could be nice as well. We could do vertical text as well.

Key methods of the module are the following :

const textToSVG = TextToSVG.loadSync();                                  // load default font
const textToSVG = TextToSVG.loadSync('/fonts/Noto-Sans.otf'); // local custom font

.getD(text, options = {}) : Get the path data for d attribute of path.
.getPath(text, options = {}) : Get the path element of SVG.
.getSVG(text, options = {}) : Get the SVG.

[edouard-lopez]

I pushed some tests I had written.

[hugolpz]

Please add a ./fonts/ directory and your base open font to the repository. I would like to give it a try this weekend, at least to output nice svg with balanced, etlegant sinograms and phonetic.

[hugolpz]

Solved. Check out branch hugo : https://github.com/edouard-lopez/Hanzi-Pinyin-Font/tree/hugo

[edouard-lopez]

Thanks I improved the method annotation() to use like you