My site reuses the same 3 JS-animated clickable SVGs on each of a page's 63 post elements, and they seem to take forever to load/seriously hinder page performance. (Slow performance happens while using 3*63 separate HTML objects to pull in the same 3 external SVGs).

I'm trying to reduce my site's load time by only loading them once (either as an object w/ data attribute pointed to an external SVG file, or by loading them in the HTML as an in-line SVG), and then referencing their ID tag in an another object's data attribute, but this doesn't seem to work.

I made two example CodePens linked above to illustrate the issue, and copied the code from the external version below.

The end goal is just to reduce code (vs in-lining all 63*3 SVGs), and to improve performance/reduce loading times.

If I'm going about this the wrong way, please show me a better way to do this.

<object id="likeButton" type="image/svg+xml" data="https://www.charliemoody.com/s/likeButton.svg">
</object>

<object class="likeButtonClones" type="image/svg+xml" data="#likeButton">
</object>