Stroke width is not transformed

[mavit]

I'm trying to build the SVGs from the OpenMoji project into a font, but the source SVG files typically contain a lot of padding around the edges, and hence each character appears rather small when converted.

To try to work around this, I'm hacking a transform=scale(1.3) attribute into the root node of each SVG file. This seems to work as expected if I view the hacked files with any SVG viewer I've tried, but it doesn't quite work correctly with nanoemoji. The shapes are upscaled, but the stroke width is not.

This can be quite hard to see, so for this screenshot I have exaggerated the effect with scale(10). Scaled:

Unscaled:

Relates to hfg-gmuend/openmoji#260.

[mavit]

I should add, here's an example of one of the original SVGs, my hacked SVG, and the SVG found in the picosvg directory after building with nanoemoji --color_format=picosvgz (which looks okay to me). I have used scale(2) for these examples.

samples.tar.gz

[rsheeter]

Apologies for the slow response, we've been busy trying to update a chain of things after a spec (or pre-spec) shift for COLR v1 (https:/googlefonts/colr-gradients-spec).

The scale need sounds similar to #2 where you have a set of svgs but want a transform applied.

[rsheeter]

I wonder if we can should explore adding OpenMoji to https:/googlefonts/color-fonts?

[anthrotype]

hacking a transform=scale(1.3) attribute into the root node of each SVG file

I'm having troubles understanding whether/how we should handle transform attribute on a root <svg> element. IIUC, it appears that for SVG 1.1 that is not supported, and it's a feature of SVG2:
w3c/csswg-drafts#894

Right now, picosvg doesn't treat the svg root transform specially, but simply applies it the same way it would for an all-enclosing hypothetical <g transform="..."> element.

However here they say that the default transform-origin for transforms on <svg> element is 50% 50%, not 0 0 like the rest of its children: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin

I even tried patching picosvg locally to interpret the root transform this way (i.e. equivalent of applying the combined translate(dx, dy) [root-transform] translate(-dx, -dy), where (dx, dy) is the center point in the svg canvas) but I am getting unexpected results that don't match the way Chrome renders the original svg with a root <svg> transform..

I'm tempted to say that picosvg should not support transform attribute on root svg element. Until i figure this out, maybe in the interim, could you try achieving the same result by adding your transform to a <g> element that wraps everything else?

[mavit]

could you try achieving the same result by adding your transform to a <g> element that wraps everything else?

Seems reasonable. I've not been able to test it yet, though, because if I use picosvg master I run into googlefonts/picosvg#138.

[mavit]

Yes, wrapping everything in a <g> element worked well for me. Thanks.