I am experimenting with using an inline SVG as a background-image through a data URL. I have noticed that background-size:cover doesn't seem to work properly in this case, but setting it to 200% makes it fit perfectly.
I am interested in understanding why this issue occurs so that I can ensure consistent rendering across different browsers. My preference would be to continue using background-size:cover if feasible.
.card {
display: inline-flex; /* required in my context */
width: 45vmax;
background-color: lightblue;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 2"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg>');
background-size: cover;
}
._200percent {
background-size: 200%;
}
.video {
padding-top: 56.25%;
}
body {
margin: 0;
}<a class="card">
<div class="video"></div>
</a>
<a class="card _200percent">
<div class="video"></div>
</a>