emgarten/Sleet

SVG badges are unreadable

devhawk opened this issue · 10 comments

devhawk commented

Example:

emgarten commented

What type of feed is this from? S3, azure, something else?

devhawk commented

azure

emgarten commented

I wasn't able to repro this, but my guess is that the rendering error is due to compression and happens on the client side. I've disabled compression for svg files. Let me know if you are still seeing this after the fix.

devhawk commented

Weird, I'm getting this on multiple machines with different browsers. Still getting it even re-creating my sleet feed with v4.0. However, since that version has #133 merged as well, I'm using that anyway. Thanks for investigating!

emgarten commented

@devhawk does the content of the SVG file look correct to you? Any ideas what could be causing it?

If you have a public feed I can take a look and see if it renders for me.

devhawk commented

This badge: https://neomonorepopackages.blob.core.windows.net/packages/badges/vpre/neo.svg
Renders like this on my machine:
image

  • ❤️1
devhawk commented

SVG source looks right, but I'm no SVG expert

<?xml version="1.0" encoding="utf-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" width="94" height="20" role="img" aria-label="nuget: 3.0.0-mono-master-00328">
  <title>nuget: 3.0.0-mono-master-00328</title>
  <linearGradient id="s" x2="0" y2="100%">
    <stop offset="0" stop-color="#bbb" stop-opacity=".1" />
    <stop offset="1" stop-opacity=".1" />
  </linearGradient>
  <clipPath id="r">
    <rect width="94" height="20" rx="3" fill="#fff" />
  </clipPath>
  <g clip-path="url(#r)">
    <rect width="41" height="20" fill="#555" />
    <rect x="41" width="53" height="20" fill="#dfb317" />
    <rect width="94" height="20" fill="url(#s)" />
  </g>
  <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
    <text aria-hidden="true" x="215" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="310">nuget</text>
    <text x="215" y="140" transform="scale(.1)" fill="#fff" textLength="310">nuget</text>
    <text aria-hidden="true" x="665" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">3.0.0-mono-master-00328</text>
    <text x="665" y="140" transform="scale(.1)" fill="#fff" textLength="430">3.0.0-mono-master-00328</text>
  </g>
</svg>
emgarten commented

I was able to repro it with your link. It's caused by textLength being too small for the version. I wonder how shields.io calculates it, or if I should use an actual SVG library to generate it.

devhawk commented

Sorry, no idea how to calculate the value correctly.

emgarten commented

I'll figure it out, thanks for the help tracking it down 😄

  • 👍1