title: SVG images loading slow or last in site
body: <p>I have a couple of SVG backgrounds on a site. Their size are less than 50kb, however, they load slow, or also, they seem to load as last element on the website. Since they are on the header of the page, I don't want a blank space while the image loads. I have been trying to find an answer or a reason to why this happens and optimize the svgs but can't seem to find a solution. My backgrounds are for about 2-3 secs white and then the SVGs appears.</p>
  
  <p>I'm loading the SVG inline in CSS</p>
  
  <p>This is what I have on my html</p>
  
  <pre><code>&lt;div class='header-main'&gt;
    &lt;div class="header"&gt;
      &lt;hr&gt;&lt;/hr&gt;
      &lt;h1 class="tagline"&gt;Some Text&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS loading the SVG is:</p>
  
  <pre><code>.header-main {
    background: url('{{ asset "/img/background-main.svg"}}');
  }
  </code></pre>