12

Why is this SVG image displayed at 150px height inside this 500px container? Why this specific value?

I found this weird behavior in both js bin and Codepen, so I think it is something to do with my code and not with the online editors.

enter image description here

Note: a 700px div container results in the same thing. So the height of the parent doesn't matter.

<div style="padding: 30px; background-color: yellow; height: 500px; width: 500px; ">
<svg>

  <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse" >
      <rect x= "0" y="0" width="4" height="4"
            stroke = "red"
            stroke-width = "1"
            fill = "black"/>
  </pattern>
  <!-- <rect x="0" y="0" width="300" height="151" // why this deletes the bottom line? -->
  <!-- <rect x="0" y="0" width="300" height="150" // why this deletes 1 px from the bottom line?  -->

  <!-- but this height="149" is the bottom limmit for this picture.. 
       what prevent's it bor beeing extended further -  we have unthil 500 px as you can see on the div.-->

  <rect x="0" y="0" width="300" height="149"
  stroke= "red" 
  stroke-width="2"
  fill="url(#basicPattern)" />
</svg>

This is Jsbin and this is CodePen.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
AIon
  • 12,521
  • 10
  • 47
  • 73

1 Answers1

15

You didn't set the SVG width and height, so it goes to the default size of 300px width x 150px height (for some user-agents).

Here is your JSBin with the SVG width and height both set to 500px. Now the rectangle can go beyond 150px of height: https://jsbin.com/yafenemawe/1/edit?html,output

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
  • While digging into today's [*D3 not setting its own height and cutting off last data item*](/questions/57196185) I found some posts of yours claiming 300×150px to be the default size. There is also [*Why does 100% equal 150 pixels?*](/questions/36673974) where the accepted answer is referring to the post by Amelia Bellamy-Royds I linked to in my comment. However, I wasn't able to find a reference actually backing this, say, assumption. The HTML spec defines these dimensions for the ` – altocumulus Jul 25 '19 at 09:16
  • 3
    @altocumulus After more than one year, here is the reference: https://svgwg.org/specs/integration/#svg-css-sizing. It says: *"If any of the sizing attributes are missing, resolve the missing ‘svg’ element width to '300px' and missing height to '150px'"*. – Gerardo Furtado Feb 01 '21 at 09:28
  • 1
    Thanks for following up! Satisfied though that the document came to life no more than 3 days ago ;-) I always find myself disliking these dimensions, they just feel so arbitrary... What an aspect ration is 2:1, anyway? I briefly sifted through some minutes of the working group's meetings looking for an explanation but wasn't able to find any. 45k challenge: find the reasoning behind these rather odd numbers! – altocumulus Feb 01 '21 at 10:54
  • In my case, I had a SVG file, whose height and width were set to 100%. However, the SVG was 150px high. To fix this, I added in my CSS: html, body {margin: 0; height: 100%}. – mando Aug 25 '21 at 15:40