Uncaught TypeError: fs.readFileSync is not a function

[ericgrosse]

I used the code from the documentation and get the following error:

Uncaught TypeError: fs.readFileSync is not a function

This was from a browserify setup. Using webpack, I get a similar error:

Module not found: Error: Cannot resolve module 'fs'

[shrhdk]

Hi @ericgrosse,

This library does not support web browsers. And I am working on this issue. #6

Please consider to use opentype.js if you need immediately. https://github.com/shrhdk/text-to-svg/issues/3#issuecomment-141885559

[ericgrosse]

If it's not meant to be used in a browser, then how is it meant to be used?

[shrhdk]

I am using this library for a web application on Node.js.

[ericgrosse]

Right, but if I wanted to use this library myself in the most minimal setup, how would I do it? Do npm install -g text-to-svg and use text-to-svg on a JavaScript file in the terminal?

[shrhdk]

Yes, that's right 👍

[ericgrosse]

Just tried, works well except I had to add some weird viewBox dimensions just to see the generated SVG properly.

I have a question. Every approach I've tried for converting text to SVG (your library, opentype.js, even Adobe Illustrator) produce paths that are outlines around each letter. How can I instead get the path through each letter? I'm trying to animate SVG text but it requires that the path fill property is set to none, and then animates the stroke, hence the issue.

Edit: Basically I want the stroke to be the entire letter

[shrhdk]

Do you want to get the separated path data of each characters?

My understanding is in following table. Is this correct?

Letters	Number of path
o	1
%	1 (NOT 3)
ooo	3

[gdad-s-river]

@ericgrosse, did you find the answer to your question? I'm about to embark on the same journey.

[ericgrosse]

It's been a while, but from what I recall, I couldn't find a good automated or programmatic way of getting the path through each letter. The best I could find was complex manipulations in Photoshop/Illustrator and that didn't really interest me.

[gdad-s-river]

@shrhdk, do you have a follow up on this please?

[shrhdk]

@ericgrosse Could you give me an example which you made by using Photoshop/Illustrator?

[gdad-s-river]

@ericgrosse, If I'm correct, instead of something like this, you wanted something like this, right?

@shrhdk , do you still need an example that differentiates what eric and I are trying to figure out, or is it clear now? If it's not, I've to try experimenting with getting svgs from inkscape, perhaps then I can show the differentiation that you asked for in the last comment.

@ericgrosse, is it possible for you to show how you were able to do it with photoshop (if you continued to do so, and didn't leave before, because you wanted a programatic way instead of doing it in photoshop)?