Chrome doesn't cache images inside SVG <p>I just discovered that Chrome doesn't cache images which are placed inside SVGs if their <code>cache-control</code> header is set to <code>no-cache</code>. Firefox &amp; IE10 seem to ignore this setting.</p> <p>I've created a little test page with a static SVG:</p> <p>HTML:</p> <pre><code>&lt;div style="width: 500px; text-align: center;"&gt; &lt;input id="move-left-btn" type="button" value="&amp;lt;&amp;lt;"&gt; &lt;input id="move-right-btn" type="button" value="&amp;gt;&amp;gt;"&gt; &lt;/div&gt; &lt;div class="svgwrapper" style="width: 500px; height: 250px; background-color: lightgrey;"&gt; &lt;svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="250"&gt; &lt;g id="svggroup" class="transition-on" transform="matrix(0.2,0,0,0.2,80,35)"&gt; &lt;image width="1672" height="887" opacity="1" xlink:href="https://dl.dropboxusercontent.com/sh/q7htlj5h8qqfhjf/SVDuynM7R3/car.png"&gt;&lt;/image&gt; &lt;/g&gt; &lt;/svg&gt; &lt;/div&gt; </code></pre> <p>Javascript:</p> <pre><code>$(document).ready(function() { var curXPos = 80; // Local test function which represent some server calls in my "real life" scenario // Just updates the x-position in the transform matrix in this test case function updateSvgText(svgText, posXDelta) { curXPos += posXDelta; if (curXPos &lt; 0) { curXPos = 160; } else if (curXPos &gt; 160) { curXPos = 0; } return svgText.replace(/matrix\(.*\)/, 'matrix(0.2,0,0,0.2,' + curXPos + ',35)'); } // Fetch the new SVG (in real life from server) and rerender it function moveSvg(posXDelta) { var svg = $('#svg'), svgText = updateSvgText($('.svgwrapper').html(), posXDelta); svg.empty(); svg.append($(svgText).children()); } $('#move-left-btn').click($.proxy(moveSvg, this, -20)); $('#move-right-btn').click($.proxy(moveSvg, this, 20)); }); </code></pre> <ul> <li><p>Working example with <code>cache-control</code> header of source image set to <code>no-cache</code> (flickers in chrome after every press on the "move" buttons):<br> <a href="http://jsfiddle.net/zF6NF/4/" rel="nofollow">http://jsfiddle.net/zF6NF/4/</a></p></li> <li><p>Same example with different source image with <code>cache-control</code> header set to <code>max-age=315360000,public</code> (no flickering):<br> <a href="http://jsfiddle.net/zF6NF/5/" rel="nofollow">http://jsfiddle.net/zF6NF/5/</a></p></li> </ul> <p>In Chrome you can see the reloading of the images on each button click in the first example ("flickering" of the image &amp; visible in the network tab of the dev tools) whereas Firefox rerenders the SVG in both examples smoothly without any reloading.</p> <p><strong>Some additional information:</strong></p> <ol> <li><p>This is just an example. In my "real-life-scenario" I receive a new SVG from the server (instead of the <code>updateSvgText</code> method call) which means that I can't just perform partial updates of the SVG by changing the value of the transform matrix attribute but have to rerender the whole SVG every time (at least by now...).</p></li> <li><p>I can't control where the images come from which means 2 things:</p> <ul> <li>I can't change the <code>cache-control</code> header</li> <li>I can't create Base64 encoded data-uris, save them locally and just replace the images inside the SVG with those data-uris before rendering (can't create Base64 encoded data-uri because of "Same resource origin" policies...)</li> </ul></li> </ol> <p><strong>Is there any way to either...</strong></p> <ul> <li>Overwrite/overrule the <code>cache-control</code> header locally even if the image is from an uncontrolled remote location?</li> <li>Create the Base64 encoded data-uri from an Image that is loaded from a different domain I don't have any control over client sided?</li> <li>Somehow tell Chrome to always cache images inside my SVGs?</li> </ul> <p>Needless to say that other solutions are also very welcome!</p> <p>Thanks</p>