CODEWITHSUNDEEP
htmlcsssvg
Steve G.
Steve G.

Reputation: 409

SVG graphics for responsive design

On this page, https://www.inagalaxyfarfarawry.com/sandboxmode/characters.php?mode=characterfocus&id=2, I'm having trouble setting an SVG window to the appropriate size. Now, I know I can explicitly set the height and width of the SVG in the CSS or the HTML, but I have around 25 images that all have different dimensions. So I set the width at 600px and I'm trying to find a way to make the SVG container autosize the height. But notice, in the link, the SVG has the same height and width, cutting off the feet in the image it contains. Does anyone know how to get the image to autosize the height?

I also need this to work for responsive design where, when the window gets smaller than, say, 650px wide, the image snaps down to about 75% its dimensions, so to 450px wide and ###px high. I'm pretty sure, if anyone has an answer, I can make it work in responsive design, but just in case a tweak is needed, I figured I'd add this little detail.

My HTML code is this:

<svg id="hotspot_canvas" name="hotspot_canvas" class="hotspot" style="background-image: url('images/characters/fullbody/2.jpg');" viewbox="0 0 100 100">
</svg>

And my CSS is this:

body.characters svg { width: 600px; background-size: cover; }

Am I missing something or misusing some attribute? Should I add a preserveAspectRatio attribute?

Thanks, everyone.

P.S. If you go to the page, never mind the circles inside the element. That's another story for another time, but I think I have that figured out.

Upvotes: 0

Views: 54

Answers (1)

ElusiveCoder
ElusiveCoder

Reputation: 1609

You can do it by below css,

body.characters svg {
        width: 600px;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
}

Change background-size from cover to 'auto 100%', and you're done...

Upvotes: 1

Related Questions