Stokes width does not adhere to SVGs 'vector-effect' property

[Thomas Dodds]

First of all, thank you everyone for your work on this library! It's amazing.

I'm trying to resize an SVG path, but would like to maintain the same stroke width when its rendered.

Please see this JS Fiddle with some example code: https://jsfiddle.net/vg6rwz4b/1/
I've scaled the group down to 10% and the path coordinates adhere correctly.

Notice the vector-effect="non-scaling-stroke" on line 4 and what happens when you remove it.
When the SVG is pasted used in SVGtoPDFKit, its as if the property is not there and it renders as

Rather than the intended:

Any thoughts on how we might add support for this property? I'm more than happy to contribute, but need a bit of pointing in the right direction

Thanks!

[alafr]

Thanks for wanting to contribute!

1st step will be to add the property in the const Properties array: https://github.com/alafr/SVG-to-PDFKit/blob/master/source.js#L41, then you can access it with this.get('vector-effect').

2nd step will be to get something that works for simple shapes (rect, circle, path...)

Currently the code applies a transformation to the document here: https://github.com/alafr/SVG-to-PDFKit/blob/master/source.js#L1791, and draws the (untransformed) shape here: https://github.com/alafr/SVG-to-PDFKit/blob/master/source.js#L1843

I'm not sure how to implement this new behaviour, but I guess you will have to apply a second transformation to the pdf document (with doc.transform()), apply a transformation to the shape (with shape.transform()) and draw the transformed shape (with shape.insertInDocument()).

You may also need some of these functions: multiplyMatrix(), getGlobalMatrix(), inverseMatrix() at https://github.com/alafr/SVG-to-PDFKit/blob/master/source.js#L345-L373

A doc.transform() call must be between a doc.save() and a doc.restore(), so that other operations later remain unchanged.

Last step, when you have something working well for simple shapes, will be to make it work with the more complex elements (such as text), check the behaviour for zero-length paths (https://github.com/alafr/SVG-to-PDFKit/blob/master/source.js#L1817-L1819), ... This last step is not 100% needed, something that works with only some of the svg elements (if it does not break some existing functionality in the other elements) would already be a huge improvement.