title: Chrome, SVGs and max-height
body: <p>I am having problems with chrome and svgs.</p>
  
  <p>I would like 2 svgs to be 100% of the screen width up to 400px. So when on mobile screens they align vertically and then on desktop they align horizontally.</p>
  
  <p>This is happening in all the browsers I've checked except for chrome. I'll explain more below.</p>
  
  <p>relevant SVG</p>
  
  <pre><code>   viewport 0 0 400 150
  </code></pre>
  
  <p>relevant CSS</p>
  
  <pre><code>.svg{
  margin-right:auto;
  margin-left:auto;
  width: 100%;
  max-width: 400px;
  background-color: aliceblue;
  max-height: 150px;
  }
  </code></pre>
  
  <p>relevant javascript</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script  type="text/javascript"&gt;
  var imageWidth = 1*$(window).width();
  var imageHeight = .425*$(window).width();
  $("document").ready(function(){
          $(".svg").css("width", imageWidth);
          $(".svg").css("height",imageHeight);
  });   
  &lt;/script&gt;
  </code></pre>
  
  <p>relevant HTML</p>
  
  <pre><code>    &lt;object class="svg" type="image/svg+xml"  data="/svg/betterLearning1.svg" &gt;
      &lt;/object&gt;    
      &lt;object class="svg" type="image/svg+xml"  data="/svg/betterLearning2.svg" &gt;
      &lt;/object&gt;
  </code></pre>
  
  <p>When I look at inspect element in Chrome I can see that the css max-width has over-written the javascript generated width but it has not chamged the height and that remains as per the script.</p>
  
  <p>EDIT
  A potential workaround is to limit the javascript variables before they generate the css..</p>
  
  <pre><code>if (imageWidth &gt; 400){
      imageWidth = 400;
   }
  if (imageHeight &gt; 150){
  imageHeight = 150;
  }
  </code></pre>