Is it possible to have an embedded SVG image/object behaving like an inline one (stretching/shrinking to its container size)?

Question

My question here is, as by the title: is it possible to make an embedded SVG image or object behaving like an inline one and therefore fully stretching out and/or shrinking within to its container size?

I already saw here and several Q&A here on Stackoverflow but can't seem to find a "real" answer to this...

Here's the sample code I worked out:

/*SOME RESET RULES FIRST*/
*, ::before, ::after {
  box-sizing: border-box;
}
body {
  line-height: 1.5;
}
img {
  max-width: 100%;
  display: block;
}
  /*CUSTOM RULES NOW*/
  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: actually works great!
<hr>
<div class="gcnt ii"><img src="a.svg" class="svgi"></div>
img embedded SVG: doesn't do
<hr>
<div class="gcnt oi"><object id="svg1" class="svgo" data="a.svg" type="image/svg+xml"></object></div>
object embedded SVG: neither does

The inline svg works good, while using the img or object tags to include it don't do instead (despite a.svg contains exactly the same code used for inline svg).

Here's a screenshot to show out what happens:

To be clear, I don't want to use background-image style rule for this.

Any idea to achieve my purpose here? I'd really appreciate your help, thank you in advance

Oh, btw, I don't care supporting MsIE

EDIT:

Coming to a conclusion, however embarrassing, it ended up I was duped by a paragraph heading title in the article I linked on top of this question.

(This is how it looks atm I'm writing: )

As @RobertLongson pointed out in his comment here below: despite it working well using an inline SVG element, it won't when using external SVGs (included in the web page through <img> or <object> tags) and the reason of the problem is because that the attribute name is case sensitive and the right case must be respected to make it work correctly. In my a.svg contents I had it wrongly written as ~~viewbox~~ instead of viewBox (as it should be). Simply changing that to the correct case makes it all working good as expected, so... this is the definitely the answer in this case.

Is this because you're writing viewBox as viewbox? That will work in HTML, not so much in standalone SVG which is case sensitive. If not then please add the contents of a.svg to the question. — Robert Longson, Nov 03 '21 at 22:07
@RobertLongson : Oh my, man, indeed that was it! I copied the case looking at the link I posted in my question ([here's it again](https://css-tricks.com/scale-svg/)). The `viewBox` attribute there is written all lowercase in the title paragraph (and I didn't noticed the other times it was written with the capital "B")... darn... Thank you Rob — danicotra, Nov 03 '21 at 22:36
@RobertLongson : will you post your reply as an answer? (Otherwise I think I should close/delete my question now) — danicotra, Nov 03 '21 at 22:45
``fetch`` your external SVG and inject it as inline SVG in your document; see: https://stackoverflow.com/questions/69801088/load-an-svg-image-where-the-elements-become-part-of-the-dom — Danny '365CSI' Engelman, Nov 04 '21 at 09:46
Thank you @Danny'365CSI'Engelman , your link offers an interesting insight. But, in the end, the issue origin here was much more trivially a bad case matter... (See my edit to the question) — danicotra, Nov 04 '21 at 19:19

Foregotten · Answer 1 · 2021-11-04T00:31:12.390

0

#div {
width: 106px;
  height: 137px;
  resize: both;
  overflow: auto;
}

<div id="div">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 -90 800 600"
    preserveAspectRatio="none">
        <ellipse cx="350" cy="100" rx="350" ry="100" />
    </svg>
</div>

edited Nov 04 '21 at 00:31

answered Nov 03 '21 at 23:10

Foregotten

1
1

Hello Foregotten. Nope, the answer was really the one @RobertLongson gave in his comment to my question – danicotra Nov 03 '21 at 23:18
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 04 '21 at 00:39

Is it possible to have an embedded SVG image/object behaving like an inline one (stretching/shrinking to its container size)?

EDIT:

1 Answers1