Why are succesive SVG's sized after the first one? - html

Question

I'm trying to build a dashboard with overview of a series of build jobs from Azure.
The badges provided by Azure are rendered differently depending on the sequence of the badges.
It can be boiled down to a very simple piece of HTML, which is available in this jsfiddle
If you change the order of the three div's it is obvious that the first div is limiting the width of the successive div's.
I have tried with Chrome, Edge, Edge Beta, FireFox and IE, all with the same (mis)behaviour.
<div>
<svg width="135.0" height="20.0" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0.0" stop-opacity="0.0" stop-color="#000" />
<stop offset="1.0" stop-opacity="0.2" stop-color="#000" />
</linearGradient>
<clipPath id="c">
<rect width="135.0" height="20.0" rx="3.0" />
</clipPath>
<g clip-path="url(#c)">
<rect width="135.0" height="20.0" fill="#555555" />
<rect width="70.8" height="20.0" fill="#4da2db" x="64.2" />
<rect width="135.0" height="20.0" fill="url(#a)" />
</g>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z"
fill="#fff" />
</g>
</svg>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="41.1" y="15.0" fill="#000" fill-opacity="0.3">Short</text>
<text x="41.1" y="14.0" fill="#fff">Short</text>
<text x="98.6" y="15.0" fill="#000" fill-opacity="0.3">never built</text>
<text x="98.6" y="14.0" fill="#fff">never built</text>
</g>
</svg>
</div>
<div>
<svg width="155.9" height="20.0" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0.0" stop-opacity="0.0" stop-color="#000" />
<stop offset="1.0" stop-opacity="0.2" stop-color="#000" />
</linearGradient>
<clipPath id="c">
<rect width="155.9" height="20.0" rx="3.0" />
</clipPath>
<g clip-path="url(#c)">
<rect width="155.9" height="20.0" fill="#555555" />
<rect width="70.8" height="20.0" fill="#4da2db" x="85.1" />
<rect width="155.9" height="20.0" fill="url(#a)" />
</g>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z"
fill="#fff" />
</g>
</svg>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="51.6" y="15.0" fill="#000" fill-opacity="0.3">Longer title</text>
<text x="51.6" y="14.0" fill="#fff">Longer title</text>
<text x="119.5" y="15.0" fill="#000" fill-opacity="0.3">never built</text>
<text x="119.5" y="14.0" fill="#fff">never built</text>
</g>
</svg>
</div>
<div>
<svg width="255.9" height="20.0" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0.0" stop-opacity="0.0" stop-color="#000" />
<stop offset="1.0" stop-opacity="0.2" stop-color="#000" />
</linearGradient>
<clipPath id="c">
<rect width="255.9" height="20.0" rx="3.0" />
</clipPath>
<g clip-path="url(#c)">
<rect width="255.9" height="20.0" fill="#555555" />
<rect width="68.9" height="20.0" fill="#4EC820" x="187.0" />
<rect width="255.9" height="20.0" fill="url(#a)" />
</g>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z"
fill="#fff" />
</g>
</svg>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="102.5" y="15.0" fill="#000" fill-opacity="0.3">Very very very very long title</text>
<text x="102.5" y="14.0" fill="#fff">Very very very very long title</text>
<text x="220.5" y="15.0" fill="#000" fill-opacity="0.3">succeeded</text>
<text x="220.5" y="14.0" fill="#fff">succeeded</text>
</g>
</svg>
</div>

Answer 1

Badges from Azure are not intended to be displayed alongside other badges in the same context, as they make use of Id's that are not unique.
I am building a C# Razor page app, so I load the SVG's before inserting them in the Razor page.
To solve this issue, I run the SVG through this ReplaceIds method, before passing them to the Razor page:
private static string ReplaceIds(string text)
{
string pattern = " id=\"(\\w)\"";
while (true)
{
var res = Regex.Match(text, pattern, RegexOptions.IgnoreCase);
if (res.Success && res.Groups.Count > 0)
{
var id = res.Groups[1];
Guid g = Guid.NewGuid();
text = Regex.Replace(text, $" id=\"{id}\"", $" id=\"{g}\"");
text = Regex.Replace(text, #$"url\(#{id}\)", $"url(#{g})");
}
else
return text;
}
}