[Improvement]: Respect vector-effect for SVGs.

[HunterMitchell]

Lets say I want to load SVG icons into my canvas (these are simple icons and shapes). If I wanted to dynamically change the fill and the stroke width/color for each icon i place and scale, the border would expand with the icon itself.

This would be the result (imported from Illustrator):

If i were to manually edit these SVG's and add the attribute vector-effect="non-scaling-stroke" so my icon could be expanded and the stroke would still be 1px, that would be awesome.

[asturur]

never seen this vector-effect attriute. can you point it to the spec where they describe it? If you want to implement it is not hard, but i,m not gonna put into fabric if not with other big changes in 2.0
you have to rever the scaling factor before stroking

[HunterMitchell]

@asturur Here at 11.5: https://www.w3.org/TR/SVGTiny12/painting.html I do t know to much about SVG but I know having the border scale is pretty annoying .... Could you provide a workaround when loading and SVG from url? If you aren't too busy.

[mariotacke]

Running into the same thing right now trying to draw a grid with constant 1px lines even when zoomed. Did you ever get around to looking into this @asturur? Would love to help out if you can point me to where to look.

[asturur]

definitely going in fabric 2, there is also another attributr interesting that allow to swap fill and stroke order.

what we need at least for respect vector effect is a property on the object, maybe with same name, and depending on the value of the property reset the scale and maybe the skew factor before writing the stroke.

other than that svg method must be updated for every shape and see what to do with text if it works. cause probably it will not.

i ll.leave some.more detail, is not a 5 minute job but if someone want to try i m thankfull

[asturur]

includes #2012

[sinanerdem]

Hello. Did this feature end up in version 2?

[asturur]

no. but i have most of the code for it. i can make a pr. LOT of testing is needed.

[sinanerdem]

I can do a lot of testing. Are there any test cases etc? Or should I just try different scenarios? Also I am using fabricjs from npm.

[asturur]

but can you write some test if i give you a template? that would help lot.

[sinanerdem]

of course.

[asturur]

Look it started here
#5473

SVG import/export will followup

[sinanerdem]

Do you know how to get the latest code committed to github to an npm project? I can test if I can get the latest changes.

[asturur]

well you can include a specific commit of github repo as a dependency of a package.json
Do not rememebr the exact syntax.

That Pr needs a control fix, but the render should work good.