CODEWITHSUNDEEP
htmlsvg
dave mankoff
dave mankoff

Reputation: 17779

Getting an SVG to Keep It's Aspect Ratio in an HTML Page

I have HTML like that below. I create a SVG with a viewbox of 100x100. When rendered (in Chrome) The svg is rendering itself as 200px wide (good) but ~500px high and the text is pushed off the bottom of the page. Making my window bigger or smaller has no affect - the SVG simply grows or shrinks in height accordingly.

Why is the svg not constrained in height in any way? Is there a way to make it automatically keep it's 1:1 aspect ratio? The content inside of the SVG is fine - it scales appropriately. This is causing some major headaches

<html>
  <head>
    <title>SVG Ahoy</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div style="width: 200px;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
          preserveAspectRatio="xMinYMin meet" version="1.1"></svg>
      <div>content below</div>
    </div>
  </body>
</html>

Upvotes: 8

Views: 6153

Answers (2)

Sfou
Sfou

Reputation: 52

Put the svg in an <img> tag: <img src="path_to_svg" />

Style the image: {width: 100%; height: auto;}

Setting the height to auto is the secret. Like this, even the preserveAspectRatio attribute is optional. (Putting it into a table layout will break Internet Explorer compatability).

Upvotes: 0

dudewad
dudewad

Reputation: 476

You have prserveApsectRatio set here, but I do not see a height on your div. Is that causing an issue?Also, if you look at the svg documentation, svg items default to 100% width and height. Try setting it's height and widths explicitly as pixel values and see if that helps.

Upvotes: 2

Related Questions