How to cache svg (embedded as <object>), in browser

Question

I have an angular2 application which consists of multiple components, which embeds ( param) different small svg files in its templates. The reason for this choice is that I need to interact with the svg and manipulate the inner DOM of the svg files. Also I want to refer to an svg file, and not use inline svg multiple places in the template, its cleaner in the component template.

My problem is that these svg files is not being cached in the browser, and when loading a page whith multiple components (which renders these svg files), I notice some small delay before the page is finished loading. This is far from optimal, and Im considering going back to inline svg if I cant solve this issue.

My goal is to be able to have the components template point to an svg file, and when this component is loaded for the first time, it will not be sent from the server, but retrieved from browser cache. Hopefully this will solve the delayed loading issue I have. I have allready tried defining an cache.manifest file in the root of my application (which defines the different svgs to be cached), but when the component loads, the server is still sending the svgs (and param.js) each time a component load.!

This is how I have structured one of the component template, which consists of the svg symbol, and when I click the svg symbol, I open a popup which should contain the same symbol:

<div>
    <!--Header-->
    <div>{{ name }}</div>

    <!--Actual svg symbol Object-param style-->
    <div class="symbolIcon"(mouseup)="onMouseUp()" (mousedown)="onMouseDown()" >
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>
    </div>
</div>

<!--Placeholder for Popup-->
<modal-popup *ngIf="loadPopup" (command)="popupCmd($event);">
    <!--Symbol to be placed on Popup (same as in template above)-->
    <div class="modal-startstop-symbol">
        <!--Place content here...injected into "ng-content" in child-->
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>

    </div>
</modal-popup >

Condescendence

That's all controlled by http, does your http server indicate that the files can be cached? – Weidar

Hi Robert! Im currently using "lite server", a node js server, for development. Im not very familiar with this one. Does that mean that the http server must cache control info in the response ? – Condescendence

No, it means the http server must indicate that the data it is serving is cacheable. – Weidar

As far as I can tell, this is not controlled by http. Serving the same URL in an <img> tag does query the browser cache, while serving it in an <object> tag doesn't. – Stucker

Hi, have you resolve this? I'm having the same issue, svg served in an <img> is cached but not when it's served in an <object> – Mertz