Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix "Nova: unknown" logo with drawing instead of text #9243

Open
monsieurtanuki opened this issue Nov 5, 2023 · 4 comments · Fixed by #9252
Open

Fix "Nova: unknown" logo with drawing instead of text #9243

monsieurtanuki opened this issue Nov 5, 2023 · 4 comments · Fixed by #9252
Labels
logos Nova - Ultra-processed foods NOVA is an indicator for food ultra-processing https://world.openfoodfacts.org/nova

Comments

@monsieurtanuki
Copy link
Contributor

monsieurtanuki commented Nov 5, 2023

What

  • In Smoothie
    • the "Nova: unknown" logo looks incomplete (no "?")
    • for the record we use a good SVG parser that unfortunately does not support all SVG features.
    • in particular it looks like texts are not fully supported
  • Generally speaking, I'm no sure that text in SVG is a good idea (for instance, are we safe with the selected font?)
  • More specifically, the "?" does not seem correctly centered, at least on my computer.

Expected behavior

  • We should have a bullet proof logo that looks the same on all computers and on apps.

Screenshot/Mockup/Before-After

on my computer in Smoothie
image image

Part of

@monsieurtanuki monsieurtanuki added 🐛 bug This is a bug, not a feature request. logos labels Nov 5, 2023
@monsieurtanuki
Copy link
Contributor Author

For the record, the following Nova-unknown SVG file works on Smoothie/flutter:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 113.99">
  <path d="m0,23.99h68v90H0V23.99Z" fill="#b3b3b3" />
  <path d="m4.86,7.54v9.94H.85V.1h3.14l8.11,10.21V.1h4.02v17.39h-3.23L4.86,7.54Zm22.21,10.09c-1.29,0-2.47-.25-3.53-.76-1.06-.51-1.97-1.17-2.72-1.98-.75-.83-1.34-1.78-1.76-2.84-.41-1.06-.61-2.16-.61-3.28s.21-2.24.64-3.31c.44-1.06,1.04-1.99,1.81-2.79.78-.82,1.71-1.46,2.77-1.93,1.06-.49,2.22-.73,3.48-.73s2.47.25,3.53.76c1.06.51,1.97,1.17,2.72,2.01.75.83,1.33,1.78,1.74,2.84.41,1.06.61,2.14.61,3.23s-.22,2.24-.66,3.31c-.42,1.06-1.02,2-1.79,2.82-.77.8-1.68,1.44-2.74,1.93-1.06.49-2.22.74-3.48.73Zm-4.53-8.82c0,.67.1,1.32.29,1.96.2.62.48,1.17.86,1.66.39.49.87.88,1.44,1.18.57.29,1.22.44,1.96.44s1.44-.15,2.01-.47c.57-.31,1.04-.71,1.42-1.2.38-.51.65-1.07.83-1.69.2-.64.29-1.28.29-1.93s-.1-1.31-.29-1.93c-.2-.64-.49-1.19-.88-1.67-.39-.49-.87-.87-1.44-1.15-.56-.29-1.2-.44-1.93-.44s-1.44.16-2.01.47c-.55.29-1.03.68-1.42,1.17-.38.49-.66,1.05-.86,1.69-.18.62-.27,1.26-.27,1.91h0ZM39.96.1l4.09,12.34L48.09.1h4.24l-6.59,17.39h-3.38L35.7.1h4.26ZM57.18.1h3.62l6.34,17.39h-4.11l-1.35-3.89h-5.41l-1.32,3.89h-4.11L57.18.1Zm3.85,10.73l-2.03-6.15-2.08,6.15h4.11Z" fill="#b3b3b3" />
  <g isolation="isolate">
    <text transform="translate(18.12 96.05)" fill="#fff" font-family="Raleway-Bold, Raleway" font-size="75.28" font-weight="700" isolation="isolate">
      <tspan x="0" y="0">?</tspan>
    </text>
  </g>
</svg>

Compared to the current version on the server, that does not work on Smoothie/flutter:

<svg xmlns="http://www.w3.org/2000/svg" width="68" height="130">
  <path style="opacity:1;fill:#b3b3b3;fill-opacity:1;fill-rule:nonzero;stroke-width:13.345" d="M0 208.847h744.094v984.83H0z" transform="matrix(.09139 0 0 .09139 0 16.914)"/>
  <g aria-label="NOVA" style="font-style:normal;font-variant:normal;font-weight:800;font-stretch:normal;font-size:267.972px;line-height:0%;font-family:Raleway;-inkscape-font-specification:'Raleway Ultra-Bold';letter-spacing:0;word-spacing:0;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:22.331px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
    <path d="M53.238 28.895V137.69H9.291v-190.26h34.3L132.29 59.176V-52.57h43.947v190.26h-35.372zM296.226 139.3q-21.17 0-38.588-8.308-17.418-8.307-29.745-21.706-12.327-13.666-19.294-31.084-6.7-17.419-6.7-35.909 0-18.758 6.968-36.176 7.235-17.418 19.83-30.549 12.863-13.398 30.28-21.17 17.419-8.039 38.053-8.039 21.17 0 38.588 8.308 17.418 8.307 29.745 21.973 12.326 13.667 19.026 31.085 6.699 17.418 6.699 35.372 0 18.758-7.235 36.177-6.968 17.418-19.562 30.816-12.595 13.13-30.013 21.17-17.418 8.04-38.052 8.04zM246.65 42.83q0 10.986 3.216 21.437 3.215 10.183 9.379 18.222 6.431 8.04 15.81 12.863 9.38 4.823 21.438 4.823 12.594 0 21.973-5.091 9.38-5.092 15.543-13.13 6.163-8.308 9.11-18.49 3.217-10.452 3.217-21.17 0-10.987-3.216-21.17-3.216-10.451-9.647-18.222-6.431-8.04-15.81-12.595-9.111-4.824-21.17-4.824-12.595 0-21.974 5.092-9.111 4.823-15.542 12.862-6.164 8.04-9.38 18.49-2.947 10.183-2.947 20.902zM437.28-52.569 482.03 82.49l44.216-135.058h46.36l-72.085 190.26h-36.98l-72.889-190.26zM625.74-52.569h39.66l69.404 190.26h-45.02l-14.738-42.607h-59.222l-14.47 42.607h-45.02zm42.07 117.372-22.24-67.26-22.778 67.26z" style="font-style:normal;font-variant:normal;font-weight:800;font-stretch:normal;font-family:Raleway;-inkscape-font-specification:'Raleway Ultra-Bold';fill:#b3b3b3;fill-opacity:1;stroke-width:22.331px" transform="matrix(.09139 0 0 .09139 0 16.914)"/>
  </g>
  <text xml:space="preserve" style="font-size:823.675px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';fill:#fff;stroke-width:20.5919" x="198.216" y="997.373" transform="matrix(.09139 0 0 .09139 0 16.914)">
    <tspan x="198.216" y="997.373" style="font-style:normal;font-variant:normal;font-weight:700;font-stretch:normal;font-family:Raleway;-inkscape-font-specification:Raleway;fill:#fff;stroke-width:20.5919">?</tspan>
  </text>
</svg>

@stephanegigandet
Copy link
Contributor

Thanks @monsieurtanuki , I made a PR to fix it and verified that it was the only icon with a text element that had not been converted to a path.

alexgarel pushed a commit that referenced this issue Nov 7, 2023
…ont (#9252)

* fix: use path instead of txt in NOVA unknown icon #9243

* put back original size and font
@monsieurtanuki
Copy link
Contributor Author

Looks like there's still a bit confusion between

Which one are we supposed to use?

@alexgarel
Copy link
Member

@teolemon teolemon added the Nova - Ultra-processed foods NOVA is an indicator for food ultra-processing https://world.openfoodfacts.org/nova label Mar 23, 2024
@teolemon teolemon removed the 🐛 bug This is a bug, not a feature request. label Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
logos Nova - Ultra-processed foods NOVA is an indicator for food ultra-processing https://world.openfoodfacts.org/nova
Projects
Status: To Discuss & Validate
Status: To discuss and validate
4 participants