title: Preload all used inline svg images?
body: <p>my web application makes use of inline svg images which are directly embedded inside my css stylesheet. There a multiple images, inside different classes I don't know on runtime.</p>
  
  <p>Currently the svg-images are loaded into browser cache on first use, which causes a short flicker. Is there any way to tell the browser he should load those inline svgs to the browser cache before they are displayed?</p>
  
  <p>For example I've a blur svg image to create a blurry background when a dialog is displayed:</p>
  
  <pre><code>.blur {
    -webkit-filter: blur(2px);
    -ms-filter: blur(2x);
    filter: blur(2px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
    filter: url('data:image/svg+xml;utf8,&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0"&gt;&lt;defs&gt;&lt;filter id="blur"&gt;&lt;feGaussianBlur stdDeviation="2"&gt;&lt;/feGaussianBlur&gt;&lt;/filter&gt;&lt;/defs&gt;&lt;/svg&gt;#blur');
  }
  </code></pre>
  
  <p>There are many more with deeper css selectors, for example:</p>
  
  <pre><code>#myApp &gt; .module1 &gt; .module2 &gt; .dialog &gt; .titlebar &gt; .icon { ... }
  </code></pre>
  
  <p>The target is to keep the count of tcp connections low, that's why they are embedded. Is there any solution for this?</p>
  
  <p>I'm using jQuery on my page, so a jQuery powered solution is a valid option.</p>