danmarshall / google-font-to-svg-path Goto Github PK

Amazing stuff, is it possible to add custom fonts like Kiona Regular?

https://www.dafont.com/kiona-2.font

Hey Dan, is there a way to build this as an API?

I sent you an email and am following up here. I'd love to be able to convert SVG text to paths and want to make this into an API, but don't have experience with TypeScript. Are you aware of python bindings for maker.js, or any way that I can tweak this repo to make it into an API?

First of all thanks a lot for creating and maintaining such an awesome tool. But I feel like it's missing the ability to change the letter spacing. If you could add that it would be great. I'm not a JavaScript guy otherwise perhaps I would implement it myself.

Thanks again. Cheers.

I may be wrong about this and it may be my browser's rendering but it seems as though imported and exported fonts are being clipped. Particularly at high font sizes.

Here is an example with periods on IBM PLEX SANS size 200, 700 weight, curve depth of 0.00001:

If I expand the culling the curves sometimes show back up. (eg viewBox="0 0 470 141.32" --> viewBox="-1 -1 471 142")

I have a lots of ideas and plans, one of which is bringing better support for google fonts and other customs to jscad. In the meantime, I wanted to make sth with few letters quickly, and found this (google ofc).

Thank you !

It would be lovely to separate characters as separate groups.

https://codepen.io/Lewiscowles1986/pen/Naxeda?editors=1000 is what I achieved using your tool in an experiment to not use illustrator (the SVG output seems a lot cleaner).

To achieve this I had to use your tool twice, and use the transform tool to get the text to fit. It works, but I'm wondering if it could be more seamless.

Hi.

I am not sure if this is because you are using your Maker.js library but is there a way to make the fonts solid (not outlined). My goal is to load a Google TTF font, and text like your example and get a single SVG path.

Also
What happens with fonts which are cursive and paths overlap?
For example when you use the font Pacifico some of the characters overlap.
Ideally areas of overlap should be removed from the final path.

Currently we get the stroke path for the font, is there is any way to get the fill path data?

Would it be possible to add support for special characters like this star ★ ?
https://unicode-table.com/en/2605/

Or even emojis like this 💀 ?

I guess it depends if the font supports it?

Perhaps a strange one, but is there a way to support bold and italic / emphasis for characters where there is no bold / emphasis? I'm adding a transform skewX for <em> (I know that's not ideal, but it seems to work)

Bezier.js CDN is now invalid, which Bezier.js shows a 404 error.

Dan, hi is it possible to add an option to NOT optimise for elilptical Arcs. could not seem to see the relevant code, or point me towards how you do that! Probably simplest for me to try the original opentype.js ! :) Cheers, and thanks for getting back to me on the other repo so quick.

So the SVG can properly scale it should not have width / height attributes.
Instead it should have a preserveAspectRatio with the default value of xMidYMid meet.

https://jsfiddle.net/37Lsg3dk/6/

When the SVG has set dimensions it cannot scale within a container automatically.
Only workaround is to set width to 100% and height to auto using css:

https://jsfiddle.net/37Lsg3dk/7/

Is there is any option or way to generate svg path for multiple text lines?
Please suggest.

The result SVG not as expected arabic text

Since we are creating a path the font size attribute is no longer necessary.

Selecting "Source Code Pro" and Variant 500, and setting Text to "4", there's a hole in the glyph where the strokes overlap:

At first blush, this seems to be because the <g> element has fill-rule="evenodd" set. Changing it to the default fill-rule="nonzero" fixes the issue:

P.S. Love this tool, thanks for creating it!

I need to automatically convert the input text to SVG using a local font file. How could I use this program through the command line instead of using the GUI?

Add option to take add to group with either custom string or the entered value.
Not sure if this helps with Screen Readers.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc

When using Gujarati chars like કિ, ખિ , ગિ ... prints incorrect, I have attached screenshots:

Thanks for making this fantastic tool! It should help me avoid png->svg conversions of that turn into a headache. Unfortunately, there are gaps in the letters that have overlapping shapes, so I cannot use this as expected, yet...

I tried playing with the numbers, but nothing seemed to work...

so I can download, but I can't open index.html to get a openable .svg file

Hi There, I've tested just now your App for my name in Persian and I got disappointed.
Is there any chance to get this characters as SVG?
Best Regards

Thank you so much for this tool, saved me time dealing with Photoshop annoyances!
such a handy tool, straight to my bookmarks!