Inline svg tag can be deferred natively and cached?

I’m wondering whether an inline svg element can use loading=“lazy”
Example:

<svg loading="lazy" style="fill: #444363; stroke: #fff;" width="100px" ..svgcode...</svg>

And also I wonder can they be properly cached as well? For th first I will just test and report back, but the second not sure how to test…

The loading attribute isn’t valid on an SVG element. It would need to be served as a file.

It will cache the document but SVGs are basically just numbers and math. Unless the browser does some magic memory caching to speed up the (re)processing I don’t see caching happening.

Turn inline SVG into cached files

But if you turn all SVGs into files the initial load is likely slower. But that also depends on the device and its connection. A very slow device on a very fast connection might be faster using SVG file downloads. But a very fast device on a very slow connection might be faster using inline SVGs. I’m talking about the initial load time here.

1 Like

Thank you so much!!!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.