title: Reset or Override user agent stylesheet
body: <p>I am using SVGs, and for some reason, the height is set to 289 px by the user agent stylesheet.</p>
  
  <p>I dont want to define the height, as I will be using many SVGs (like at least 256), and dont want to set different css rules manually for each of them by using <code>!important</code>.</p>
  
  <p>So how do I adjust the user stylesheet (using Chrome) or reset the height field for SVGs!, so that it is not defined?</p>
  
  <p>example SVG HTML:  (SVG height is 25 px, yet the svg Bounding box renders to 289)</p>
  
  <pre><code>&lt;div id="measure&lt;%= measure.cid %&gt;" class="measure"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
      &lt;rect x="10" y="10" width="250" height="25" style="stroke:black; stroke-width:2; fill:lightgray;" /&gt;
      &lt;div id="&lt;%= beatHolder %&gt;"&gt;
      &lt;/div&gt;
    &lt;/svg&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/0fPAl.png" alt="css">
  <img src="https://i.stack.imgur.com/HuDnx.png" alt="css2"></p>
  
  <p>When trying <code>Alex W</code>'s answer, I get this:
  <img src="https://i.stack.imgur.com/OYLQs.png" alt="enter image description here"></p>