Solid Fonts?

[villanus]

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.

[villanus]

Example of overlapping paths: https://jsfiddle.net/37Lsg3dk/1/

Looks like when you use a fill instead of stroke (edited code manually) then the overlapping paths either break without union, or there are extras which show up when using fill option.

Thanks!

[danmarshall]

Hi, I think you just need to add fill-rule="evenodd" on your red example.

[villanus]

Thank you for the quick reply. You were 100% right.

I am going to test it in inkscape / illustrator to make sure the paths do not double line.

Updated fiddle here: https://jsfiddle.net/37Lsg3dk/3/

Few quick questions:

1. How can I update your JS to add the fill-rule and set other svg / group level attributes in the generated result. For example I wont be needing the stroke settings, but will be needing the fill color.

2. Can I override the ID of the resulting SVG? Can I add a custom class name to the svg or the group?

3. Is there a way to compress the SVG result a bit, by not having paths only go 2 decimals deep?

Thanks!!!

[danmarshall]

1. In this line of code: https://github.com/danmarshall/google-font-to-svg-path/blob/master/index.ts#L80 you can pass a 2nd parameter, an object with SVG export settings. Here is the spec for the settings object: http://microsoft.github.io/maker.js/docs/api/interfaces/makerjs.exporter.isvgrenderoptions.html

2. In the object above, see the "svgAttrs" property. This is yet another object you can pass, which is entirely free-form. Anything you set in this object will become an attribute on your root SVG tag. So, {"id":"yourid", "class": "yourclass"}

3. Not currently, but this would be a good feature to add! Can you file an issue for this in the Maker.js repo? https://github.com/Microsoft/maker.js

[villanus]

Thanks! will look at the code tonight when back from work. =)

Created issue for maker.js here: https://github.com/Microsoft/maker.js/issues/247

[villanus]

Ran into another one: https://jsfiddle.net/n9a7p3jL/

It seems like with Cursive fonts, or fonts which are extremely fancy, that it just cannot keep up on the paths. I am guessing there are too many overlaps?

Note sure if this is fixable or if it effects the maker.js project? Can it be opentype?

Around a year ago I started playing a PHP library which did a nice job with with font to path. Not sure what they might be doing differently: https://github.com/kartsims/easysvg

[danmarshall]

In this case, it is just the letter w in the Rochester font. You can see that by itself it has a gap, opening the geometry. Open geometry will not work with boolean combination. It is most likely a bug we are seeing when getting arcs from bezier.js, we should have it fixed soon.

[danmarshall]

As a workaround, I added a new field on the page where you can specify bezier accuracy. When you see a faulty character with open geometry, put a number like 1 or 0.5 or .01 in the field. You should easily be able to find a value to get unbroken beziers.

[villanus]

Hi Dan. I have been investigating a solution to the EvenOdd rule.
The goal is to avoid the EvenOdd option because for some Plotter software it causes issues. It also causes issues when an SVG is opened up in Adobe Illustrator, until you manually change the file settings to view all paths as even odd.

It turns out that a path can be subtracted from another path: http://stackoverflow.com/questions/3349651/how-to-achieve-donut-holes-with-paths-in-raphael

Paper.js and Raphael do this by reversing the inner parts.
Does this look like a feasible solution to get rid of Even Odd?

Or maybe an option to go through each section of the path, and if DonutHole option is set then subtract the path and set the fill rule to nonzero?

[danmarshall]

Hi Frank, Thanks for reporting this, I wasn't sure if this was an issue that anyone would hit. This is doable. I will need to do a Graham Scan to check the direction of the paths. Fortunately, there is an npm package that does this, it's just a matter of integrating the code.

[villanus]

You are the man! Should I be reporting these issues ob Maker.js?

Also, for my project all I really need is the functionality of TTF to SVG like you have here.

Is there any disadcantage to including the full maker.js (other than size) versus going through the typscript file and trying to trim out functions I will never use?

[danmarshall]

Some of your issues are general purpose, they could be reported to Maker.js. I think your SVG optimization issue can contain the list of your specific optimizations. In this repo, mostly what I am doing is adding UI on the page that modifies the export options.

As far as "tree shaking" goes, I'm going to guess it might not be worth your development time vs bytes on the wire saved. Unless your app is in an extremely low-bandwidth scenario.

FWIW, I'm sensitive to bloat and use the DRY principle. Maker.js is almost ready for V1 and I think that it contains just about everything that it should. I am considering in V1 that I may use es6 modules which would enable tree shaking for any app.

And of course, if you modify the Maker.js code, make sure you follow the terms of the Apache 2.0 license. I'm not a lawyer :) but I think the big action item in Apache 2.0 (compared to the MIT license) is "You must cause any modified files to carry prominent notices stating that You changed the files".

[danmarshall]

Hi Frank, the fix for Bezier curves is in. Can you file a new issue in Maker.js regarding the winding rule?

[villanus]

Hi Dan, by winding rule do you mean modifying the paths so evenodd is not required? Please clarify and I will create the issue. 🙂

Best

[danmarshall]

Hi Frank, yes exactly. Cheers