title: Why would svgs show up resized (in an undesirable way) on reload, but render properly on force reload?
body: <p>I'm running into a bug with svgs resizing in an unexpected (and undesirable) way. The icons are styled to look like this:
  <a href="https://i.stack.imgur.com/45reH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/45reH.png" alt="enter image description here"></a></p>
  
  <p>and they only show up properly if I reload the page using cmd+shift+R. If I reload with just cmd+R, they end up smaller:
  <a href="https://i.stack.imgur.com/LckCr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LckCr.png" alt="enter image description here"></a></p>
  
  <p>They are supposed to be 15x15px, but the inspector shows that their width is much smaller.
  <a href="https://i.stack.imgur.com/NX3ps.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NX3ps.png" alt="enter image description here"></a></p>
  
  <p>Would really appreciate any suggestions/ideas on what's going on! (And please let me know if there's other information I should provide--this is my first question on here.)</p>
  
  <p>Edit to show code:</p>
  
  <p>svg file:</p>
  
  <pre><code>&lt;svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="6" width="13" height="7"&gt;
  &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12.9001V6.68354H0V0Z" transform="translate(0 6.31641)" fill="white"/&gt;
  &lt;/mask&gt;
  &lt;g mask="url(#mask0)"&gt;
  &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M0.434174 0H12.3966C12.3966 0 13.2083 0.0625625 12.7712 0.967687L11.2404 5.96537C11.2404 5.96537 11.147 6.43337 10.3979 6.65275L2.46461 6.68362C2.46461 6.68362 1.90236 6.65275 1.49611 5.87194L0.0279237 0.8125C0.0279237 0.8125 -0.158951 0.156 0.434174 0Z" transform="translate(-0.000244141 6.31641)" fill="#818F6E"/&gt;
  &lt;/g&gt;
  &lt;mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="11" height="7"&gt;
  &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H9.96288V6.09212H0V0Z" transform="translate(1.43335 0.566406)" fill="white"/&gt;
  &lt;/mask&gt;
  &lt;g mask="url(#mask1)"&gt;
  &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.09229C0 6.08986 0.0836876 -0.120893 5.06025 0.00179403C9.672 0.116357 9.96288 6.05898 9.96288 6.06061L8.46381 5.93629C8.46381 5.93386 8.45487 1.37492 5.02856 1.28229C1.6445 1.19129 1.59331 5.93386 1.5925 5.93629L0 6.09229Z" transform="translate(1.43335 0.566406)" fill="#818F6E"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>icon:</p>
  
  <pre><code>&lt;FollowersWrapper
      follows={follows ? 1 : 0}
      onClick={() =&gt; toggleFollow()}
    &gt;
      &lt;StatIcon src={follows ? following : notFollowing} alt="Followers" /&gt;
      {followersCount}
    &lt;/FollowersWrapper&gt;
  </code></pre>
  
  <p>styles:</p>
  
  <pre><code>export const StatIcon = styled.img`
  height: 15px;
    width: 15px;
    margin-right: 8px;
    padding-top: 3px;
  `
  export const FollowersWrapper = styled(Flex)`
    color: ${props =&gt;
      props.follows
        ? themeGet('colors.highlight')
        : themeGet('colors.secondaryDarkVariant')};
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 1.33px;
    font-family: ${themeGet('fonts.tabs.family')};
  
    &amp;:hover {
      cursor: pointer;
    }
  `
  </code></pre>