Wrong color width when embedding several raw <svg> images in a single file #10321

Xaelias · 2024-07-03T21:30:50Z

Xaelias
Jul 3, 2024

Hi 👋

I'm sure I'm doing something wrong as I have very limited experience with react / ts / ... But I'm facing a weird issue I'd love some explanation about.

I'm trying to use the npm library of shields and creating react components to embed the result of makeBadge directly in html.

My issue is that the total width of the first badge seem to affect every other badge on the page. And I'm not sure how to approach the issue.

It looks like this:

This is achieved by just running makeBadge({label: "See details", message: "1 failed", color: "critical"}) and then makeBadge({label: "label", message: much longer message", color: "blue"}).

I don't think it's a problem with the library itself, given that you can reproduce using the "live" site. (I've also tried to rollback to the 3.3.1 version of the library just in case).

For instance, just open: https://img.shields.io/badge/label-message-blue, copy the resulting <svg>.... Then open https://img.shields.io/badge/label-longermessage-blue, copy that. Paste both in an html file, and you'll see a similar behavior.

What would be the way to have this work properly?

Thank you!

Answered by chris48s

Jul 5, 2024

Yes. I am surprised this has not come up before tbh.

I've raised an issue for it at #10336

However, in the immediate term: I do have a suggested workaround for you. This might work well given you're rendering with react.
If you put each badge inside its own Shadow DOM it doesn't matter if the IDs aren't unique because it encapsulates each one in its own DOM/scope. Here's a proof of concept:

<!DOCTYPE html>
<html>
<body>

<h1>Some badges</h1>

<span id="badge1"></span>
<span id="badge2"></span>

<script>
  const badges = [
    {
      id: 'badge1',
      content: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label…

View full answer

chris48s · 2024-07-04T15:55:21Z

chris48s
Jul 4, 2024
Maintainer

Well this is an interesting one. Here's the issue broken down to a minimal repro:

<!DOCTYPE html>
<html>
<body>

<h1>Some badges</h1>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label="label: message"><title>label: message</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="96" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="59" height="20" fill="#007ec6"/><rect width="96" 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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="490">message</text></g></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="20" role="img" aria-label="label: longermessage"><title>label: longermessage</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="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="93" height="20" fill="#007ec6"/><rect width="130" 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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">longermessage</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="830">longermessage</text></g></svg>

</body>
</html>

View that in a browser, you'll see the described behaviour.

The reason why this is happening is because the IDs on the linearGradient and clipPath elements are the same for every badge. So the IDs are unique within any given SVG document, but if you embed multiple SVGs inline in a single HTML document then the IDs aren't unique within the HTML page. Essentially the scope of the IDs has changed.

So if I were to edit this to

<!DOCTYPE html>
<html>
<body>

<h1>Some badges</h1>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label="label: message"><title>label: message</title><linearGradient id="s1" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r1"><rect width="96" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r1)"><rect width="37" height="20" fill="#555"/><rect x="37" width="59" height="20" fill="#007ec6"/><rect width="96" height="20" fill="url(#s1)"/></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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="490">message</text></g></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="20" role="img" aria-label="label: longermessage"><title>label: longermessage</title><linearGradient id="s2" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r2"><rect width="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r2)"><rect width="37" height="20" fill="#555"/><rect x="37" width="93" height="20" fill="#007ec6"/><rect width="130" height="20" fill="url(#s2)"/></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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">longermessage</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="830">longermessage</text></g></svg>

</body>
</html>

View that second one in a browser, it will render as expected. The thing I have changed is the identifiers on the linearGradient and clipPath elements.

I think there is probably some value in fixing this, but also it is not a super-common use-case (shields has been around for 10 years and this is the first time it has come up). Maybe the library could have a (non-default) setting where you can tell it to make the ids a UUID or something to cover this case? I wouldn't want this to be the default though. For shields.io there is value in the IDs being a single character for bandwidth reasons. We serve ~50 million badges per day and we spend as much on bandwidth as we do on compute so keeping the SVGs small does matter for us.

2 replies

Xaelias Jul 4, 2024
Author

Awesome thanks for the quick answer. I did expect this to be some sort of ID being re-used, I just didn't really know where to look.

While I understand that most people wouldn't see this (since they would usually just embed y'all's url in an <img> tag I assume), I am quite surprised this is the first time someone is trying to do this 🤔

That being said, yes, being able (on the npm library side of things, I perfectly understand the point you raise about the public facing API) to make it a random UUID, or even potentially to name them (because why not I guess?), would be an awesome addition I think. I'd greatly appreciate it if this could be implemented in the near future.

Thanks!

PS: If you need me to do anything, like create an issue on the repo or smth, let me know :-)

chris48s Jul 5, 2024
Maintainer

Yes. I am surprised this has not come up before tbh.

I've raised an issue for it at #10336

However, in the immediate term: I do have a suggested workaround for you. This might work well given you're rendering with react.
If you put each badge inside its own Shadow DOM it doesn't matter if the IDs aren't unique because it encapsulates each one in its own DOM/scope. Here's a proof of concept:

<!DOCTYPE html>
<html>
<body>

<h1>Some badges</h1>

<span id="badge1"></span>
<span id="badge2"></span>

<script>
  const badges = [
    {
      id: 'badge1',
      content: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label="label: message"><title>label: message</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="96" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="59" height="20" fill="#007ec6"/><rect width="96" 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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="490">message</text></g></svg>'
    },
    {
      id: 'badge2',
      content: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="20" role="img" aria-label="label: longermessage"><title>label: longermessage</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="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="93" height="20" fill="#007ec6"/><rect width="130" 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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">longermessage</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="830">longermessage</text></g></svg>'
    }
  ]

  badges.forEach(function(badge) {
    const target = document.querySelector("#" + badge.id);
    const shadow = target.attachShadow({ mode: "open" });
    const span = document.createElement("span");
    span.innerHTML = badge.content;
    shadow.appendChild(span);
  })
</script>

</body>
</html>

This uses the SVG output as generated by the library as it stands and will render as expected. I expect if you only want to render a few badges this will be fine. I guess if you wanted to render hundreds of images on a page or something the overhead of each one being its own Shadow DOM might have a performance impact.

Answer selected by Xaelias

chris48s · 2024-10-13T16:58:32Z

chris48s
Oct 13, 2024
Maintainer

We've just released badge-maker 4.1.0 which adds an optional idSuffix param. This allows you to generate unique IDs for the XML elements inside the SVG
There's a bit more info in #10576

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrong color width when embedding several raw <svg> images in a single file #10321

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Wrong color width when embedding several raw <svg> images in a single file #10321

Xaelias Jul 3, 2024

Replies: 2 comments · 2 replies

chris48s Jul 4, 2024 Maintainer

Xaelias Jul 4, 2024 Author

chris48s Jul 5, 2024 Maintainer

chris48s Oct 13, 2024 Maintainer

Xaelias
Jul 3, 2024

Replies: 2 comments 2 replies

chris48s
Jul 4, 2024
Maintainer

Xaelias Jul 4, 2024
Author

chris48s Jul 5, 2024
Maintainer

chris48s
Oct 13, 2024
Maintainer