title: Can an inline SVG animation be preload/cached?
body: <p>Working on a gallery in Bootstrap:</p>
  
  <pre><code>&lt;div class="instaRow"&gt;
      &lt;div class="col-xs-3"&gt;
          &lt;a title="5"&gt;
              &lt;div class="fooImg"&gt;
                  &lt;img class=" img-responsive" src="img/instagram.png" alt="" /&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-3"&gt;
          &lt;a title="5"&gt;
              &lt;div class="fooImg"&gt;
                  &lt;img class="img-responsive" src="img/instagram.png" alt="" /&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-3"&gt;
          &lt;a title="6"&gt;
              &lt;div class="fooImg"&gt;
                  &lt;img class="img-responsive" src="img/instagram.png" alt="" /&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-3"&gt;
          &lt;a title="8"&gt;
              &lt;div class="fooImg"&gt;
                  &lt;img class="img-responsive" src="img/instagram.png" alt="" /&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;h3 class="modal-title"&gt;Instagram Image&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>that will render images from an Instagram JSON pull and I wanted to implement an inline animated SVG while the PHP is creating the JSON file.</p>
  
  <p><strong>SVG:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pre_loader" title="pre-loader"&gt;
   &lt;svg version="1.1" id="theLoader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="-10 -10 68 68"&gt;
    &lt;path class="loaderFill" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"&gt;
     &lt;animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.2s" repeatCount="indefinite" /&gt;
    &lt;/path&gt;
   &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, when I research to see if it's possible, it would appear, from searches, that people use a non-animated SVG file instead of inline SVG:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/17000943/best-way-to-preload-svg-image-tags">Best way to preload SVG image tags?</a></li>
  <li><a href="https://stackoverflow.com/questions/30536552/preloading-svg-images">Preloading SVG images</a></li>
  <li><a href="https://css-tricks.com/gotchas-on-getting-svg-into-production/" rel="nofollow noreferrer">5 Gotchas You’re Gonna Face Getting Inline SVG Into Production</a></li>
  </ul>
  
  <p>and I did see an SVG <code>.htaccess</code> approach on an SVG file:</p>
  
  <pre><code>&lt;IfModule mod_expires.c&gt;
    ExpiresActive On
    ExpiresByType image/svg+xml "access plus 1 year"
  &lt;/IfModule&gt;
  </code></pre>
  
  <p>but that is still for a file. </p>
  
  <p>In regards to rendering the JSON, I've seen jQuery's <a href="http://api.jquery.com/jquery.getjson/" rel="nofollow noreferrer">demo</a> and several examples use the approach:</p>
  
  <pre><code>(function() {
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    $.getJSON( flickerAPI, {
      tags: "mount rainier",
      tagmode: "any",
      format: "json"
    })
      .done(function( data ) {
        $.each( data.items, function( i, item ) {
          $( "&lt;img&gt;" ).attr( "src", item.media.m ).appendTo( "#images" );
          if ( i === 3 ) {
            return false;
          }
        });
      });
  })();
  </code></pre>
  
  <p>so I was thinking of using something like:</p>
  
  <pre><code>$(".pre_loader").show();
  $.getJSON('instagram.json', function(theJson) {
     $.each(theJson, function() {
        // some code
     });
     $(".pre_loader").hide();  
  });
  </code></pre>
  
  <p>Is there a way to get an inline animated SVG as a pre-loader for my Bootstrap gallery?</p>