Okay, I have two sibling elements,
<code><div>
<div class='test'>Hello, World!</div>
<img src="data:image/svg+xml;base64,p...">
</div>
</code>
<code><div>
<div class='test'>Hello, World!</div>
<img src="data:image/svg+xml;base64,p...">
</div>
</code>
<div>
<div class='test'>Hello, World!</div>
<img src="data:image/svg+xml;base64,p...">
</div>
binary of that image look like something like,
<code><svg>
<style>
.test {
fill: tomato;
background-color: tomato;
}
</style>
...
</svg>
</code>
<code><svg>
<style>
.test {
fill: tomato;
background-color: tomato;
}
</style>
...
</svg>
</code>
<svg>
<style>
.test {
fill: tomato;
background-color: tomato;
}
</style>
...
</svg>
background color of the first div element is not changing. but if I directly use svg tag instead of img it works. is this how browser/HTML works? or can I achieve this?