Skip to content

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

Closed Answered by chris48s
Xaelias asked this question in Q&A
Discussion options

You must be logged in to vote

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…

Replies: 2 comments 2 replies

Comment options

You must be logged in to vote
2 replies
@Xaelias
Comment options

@chris48s
Comment options

Answer selected by Xaelias
Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants