Firefox scales SVG in a fit-content container too large - css

Question

I have a container with two elements inside. A Link tag and an inline svg.
My plan is to set the width of the container to the maximum width of its children, which I assume should be the content of the link tag with its padding.
Since the svg has no width defined and only uses a viewBox, I would assume the browser to scale the svg to the width of its parent container.
All browser except firefox are behaving like that. I don't understand why Firefox is stretching the container to 100% of the usable space, even larger than the viewbox of the svg.
div {
width: fit-content;
background: #344566;
}
a {
padding: 0 4rem;
color: white;
font-size: 2rem;
}
svg {
fill: white;
}
<div>
This is a link
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>
</div>

Answer 1

I moved the SVG to be a background image of the link. This will make the link text control the size of the box. To make space for the background I added a block (a:after) after the link that has a padding of 100%. This is sometimes used for making a square, but is also useful in this situation.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
background-repeat: no-repeat;
background-position: center 1rem;
background-size: contain;
}
a:after {
content: "";
display: block;
padding-top: 100%;
}
<div>
This is a link
</div>
Update
OP asks if the color of the background can be changed on hover. It cannot: Specify an SVG as a background image and ALSO style the SVG in CSS? - Stack Overflow. But in this case the SVG can be used as a mask on the element -- or like in this case -- on the after pseudo element. The SVG is masking the background-color -- and this can be changed on hover. Here I's using the currentColor value.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
}
a:after {
content: "";
display: block;
padding-top: 100%;
background-color: currentColor;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
}
a:hover {
color: orange;
}
<div>
This is a link
</div>