CODEWITHSUNDEEP
google-chromesvg
Sam Fen
Sam Fen

Reputation: 5254

Why does Chrome make a new request for this SVG image each time, but not for the PNG?

I have an app that displays the same image in multiple locations and may change the src of an image.

When I point to a PNG image that I've already used before, the browser does not bother making a new request, it simply uses the PNG image that's already in the cache. However, when I point to an SVG image image that I've used before, the browser (Chrome 22) makes a new request. The server returns 304 (Not Modified), so no new image needs to be downloaded, but this still takes some extra processing.

This can be easily tested in this jsFiddle: http://jsfiddle.net/jtmuw/1/

$('button').click( function() {
  $('#a').attr('src', "myImage.svg");

  $('#b').attr('src', "myImage.png");
});

​

If you open the fiddle with Chrome (or at least Chrome v.22.0.1229.94) and you open up your network tab you will see the two images have been requested. If you then hit "reload images" several times, your network tab will show multiple requests for the SVG image but no further requests for the PNG image.

As far as I can tell, the same headers are being returned by the server, so I can't see any reason for the difference.

I am not seeing this on FF or Safari, so this may be a Chrome issue. However, I still feel like maybe there is some underlying differences in the headers that I'm missing, and it's not just that Chrome is treating SVG images weirdly.

Upvotes: 7

Views: 3406

Answers (2)

rbt
rbt

Reputation: 115

Include the SVG image at the top of the document.

<html>
<head>
    ...
</head>
<body>
    <img style="display:none" src="cached.svg">
    ....
</body>
<html>

Upvotes: 1

Graham Robertson
Graham Robertson

Reputation: 818

You can perhaps force Chrome to cache the file. w3schools has a pretty good overview of this as follows: http://www.w3schools.com/html/html5_app_cache.asp

Essentially you'll want to create a manifest file (call it... "myCache.appcache" or whatever else)

CACHE MANIFEST
/path/to/svg/file.svg

and then point to this in your html file as so:

<html manifest="myCache.appcache">

This will tell Chrome that, even when you don't have internet access, this file should be cached and accessible anyway.

Upvotes: 1

Related Questions