如何在浏览器中缓存 svg（嵌入为 <object>）

Question

我有一个由多个组件组成的 angular2 应用程序，它在其模板中嵌入了（参数）不同的小 svg 文件。这个选择的原因是我需要与 svg 进行交互并操作 svg 文件的内部 DOM。另外我想引用一个 svg 文件，而不是在模板中的多个位置使用内联 svg，它在组件模板中更干净。

我的问题是这些 svg 文件没有被缓存在浏览器中，并且在加载包含多个组件（呈现这些 svg 文件）的页面时，我注意到在页面完成加载之前有一些小延迟。这远非最佳，如果我不能解决这个问题，我会考虑回到内联 svg。

我的目标是能够让组件模板指向一个 svg 文件，并且当这个组件第一次加载时，它不会从服务器发送，而是从浏览器缓存中检索。希望这将解决我遇到的延迟加载问题。我已经尝试在我的应用程序的根目录中定义一个 cache.manifest 文件（它定义了要缓存的不同 svgs），但是当组件加载时，服务器仍然在每次组件时发送 svgs（和 param.js）加载。！

这就是我构造一个组件模板的方式，它由 svg 符号组成，当我单击 svg 符号时，我会打开一个应包含相同符号的弹出窗口：

<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 >