My inquiry is this: can an embedded SVG image or object be manipulated to behave like an inline element, stretching or shrinking to fit its container size?
I have searched on this and various Stackoverflow threads but have not found a definitive answer...
Below is the code I have been working with:
/*RESET RULES*/
*, ::before, ::after {
box-sizing: border-box;
}
body {
line-height: 1.5;
}
img {
max-width: 100%;
display: block;
}
/*CUSTOM STYLES*/
div.gcnt{
position: relative;
display: inline-block;
min-height: 50px;
max-height: 200px;
min-width: 100px;
max-width: 300px;
width: 20%; height: 30%;
border: 1px dashed greenyellow;
}
div.gcnt.inline svg, div.gcnt.ii img, div.gcnt.oi object {
position: absolute;
width: 100%; height: 100%;
}<div class="gcnt inline"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveAspectRatio="none"><circle cx="50%" cy="50%" r="40" stroke="black" stroke-width="1.2" fill="darkseagreen"/></svg></div>
inline SVG works fine!
<hr>
<div class="gcnt ii"><img src="a.svg" class="svgi"></div>
embedded SVG using img tag does not work
<hr>
<div class="gcnt oi"><object id="svg1" class="svgo" data="a.svg" type="image/svg+xml"></object></div>
embedded SVG using object tag also does not workThe inline `svg` works well, while using the `img` or `object` tags does not (even though a.svg contains identical code as the inline svg).
Here's a screenshot demonstrating the issue:
https://i.sstatic.net/jC7s2.png
I want to avoid using the `background-image` style rule for this.
Any ideas on how to achieve this goal? Your assistance would be greatly appreciated, thank you in advance
Also, I am not concerned about supporting Internet Explorer
EDIT:
After further investigation, it turns out that I was misled by a heading title in the article I referenced earlier in my question.
(This is the current state when writing this: https://i.sstatic.net/ULaQb.png)
As mentioned by @RobertLongson in the comment below: although using an *inline* SVG element works fine, external SVGs (included in the webpage via `img` or `object` tags) do not work correctly due to attribute name being case-sensitive. The correct case must be used for it to function properly. In my `a.svg` content, I incorrectly wrote `viewbox` instead of `viewBox` (which is the correct case). Simply correcting this made everything work as intended, so... this is definitely the solution in this scenario.