I have an SVG filter file in /filters/filter.svg that contains a SVG filter with ID filter-id.

I apply this filter in an HTML5 canvas by using context.filter = "url(/filters/filter.svg#filter-id)"; and it works.

However, the filter gets loaded every time it is used, which happens a lot since I have to constantly animate many individually filtered images in the canvas.

What is the best way, using Javascript only, to cache the filter file once, then retrieve the filter from cache every time it is used, instead of having it loaded again?

It would be preferable that the filter not be embedded or even declared in the HTML file that loads the canvas, since there are actually many filters stored in the filters folder and used simultaneously, to keep the whole process cleaner and more dynamic.

Some basic sample code showing how to cache and retrieve would be highly appreciated.

I have an SVG filter file in /filters/filter.svg that contains a SVG filter with ID filter-id.

I apply this filter in an HTML5 canvas by using context.filter = "url(/filters/filter.svg#filter-id)"; and it works.

However, the filter gets loaded every time it is used, which happens a lot since I have to constantly animate many individually filtered images in the canvas.

What is the best way, using Javascript only, to cache the filter file once, then retrieve the filter from cache every time it is used, instead of having it loaded again?

It would be preferable that the filter not be embedded or even declared in the HTML file that loads the canvas, since there are actually many filters stored in the filters folder and used simultaneously, to keep the whole process cleaner and more dynamic.

Some basic sample code showing how to cache and retrieve would be highly appreciated.

• javascript
• svg
• canvas
• browser-cache
• svg-filters

• 2 "the filter gets loaded every time it is used" - that shouldn't happen. What HTTP cache headers are you sending with the /filters/filter.svg resource? – Bergi Commented Mar 30 at 20:39
• 1 Which browser are you using? Even with the "Disable cache" option, no new request is even done for me in either Chrome nor Firefox (Safari's testable WiP doesn't seem to support external refs just yet). – Kaiido Commented Mar 31 at 1:03
• @Kaiido I am using Chrome 134.0.6998.166, but indeed, I no longer get constant requests today. Still trying to determine what situation led to what may well be an edge case when I posted this yesterday, but likely an issue in my code. – jmdecombe Commented Mar 31 at 18:23

1 Answer 1

Modern browsers support writing File objects, among other objects such as Uint8Array, to the "Origin Private File System". The data is written to the browser configuration folder, referencing the origin where the data was written.

Something like

let dir = await navigator.storage.getDirectory();
let handle = await dir.getFileHandle("filter", { create: true });
let writable = await handle.createWritable();
await writable.write(data);
await writable.close();

to open the OPFS