Home/ Questions/Q 8601419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T01:50:15+00:00

I have HTML like that below. I create a SVG with a viewbox of

  • 0

I have HTML like that below. I create a SVG with a viewbox of 100×100. 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0