Nutri-Score icon is not displayed correctly

[VaiTon]

What

A picture is worth a thousand words!

[monsieurtanuki]

That does not look systematic:

type	picture	status	url
A		ok	https://static.openfoodfacts.org/images/attributes/nutriscore-a.svg
B		KO 🤮	https://static.openfoodfacts.org/images/attributes/nutriscore-b.svg
C		ok	https://static.openfoodfacts.org/images/attributes/nutriscore-c.svg
D		KO 🤮	https://static.openfoodfacts.org/images/attributes/nutriscore-d.svg
E		ok	https://static.openfoodfacts.org/images/attributes/nutriscore-e.svg
unknown		ok	https://static.openfoodfacts.org/images/attributes/nutriscore-unknown.svg

[monsieurtanuki]

Hi @VaiTon!
I don't think it's a 5 minute fix. It looks like a svg problem: the unsolicited cropping comes probably from the svg file itself (or the way it is dealt with by flutter_svg).

Suggestions about fix/debug:

• step 0: temporarily remove the access to internet and restart the app - you should see only the "assets" icons, not the server one
• step 1: see if the same bad display happen (my guess: no, it's ok)
• step 2: download the latest version of the nutriscore files and put them in assets/cache
• step 3: see if the same bad display happen (my guess: it's NOT ok)
• step 4: then we need someone who understands svg to delve into this and fix the icons
• step 5: then the icons should be uploaded to the server

[teolemon]

It's caused by the server. @stephanegigandet updated the visual assets based on Quentin's suggestions

[stephanegigandet]

That's strange, the Nutri-Score SVG images have exactly the same size as before, 240x130 px.

e.g.
old image: https://static.openfoodfacts.dev/images/attributes/nutriscore-d.svg (login and password off)
new image: https://static.openfoodfacts.org/images/attributes/nutriscore-d.svg

[monsieurtanuki]

@stephanegigandet It has nothing to do with the whole size; it has something to do with some crop effect not well understood (or over-interpreted) by flutter_svg.

[stephanegigandet]

ok, I can try to remove the transform-matrix then

[monsieurtanuki]

There's something different that was added/removed for B and D.

[stephanegigandet]

I'm regenerating the SVG without transforms etc.

[stephanegigandet]

SVGO does not have an option to flatten SVG paths unfortunately
svg/svgo#624 did point me to lean-svg which seems to work, and that showed issues with the Nutri-Score B and D icons when paths were flattened. Removing the clipPath manually in Inkscape seemed to make lean-svg work better for them.

[stephanegigandet]

Seems to be solved by openfoodfacts/openfoodfacts-server#6872 (I deployed the new SVG icons in production, you should get them by restarting the app)

[monsieurtanuki]

@stephanegigandet I confirm: all 6 nutriscore icons look fine now 👍