Mi sitio reutiliza los mismos 3 SVG animados con JS en los que se puede hacer clic en cada uno de los 63 elementos de publicación de una página, y parece que tardan una eternidad en cargarse/dificultan gravemente el rendimiento de la página. (El rendimiento lento ocurre cuando se usan 3*63 objetos HTML separados para extraer los mismos 3 SVG externos).

Estoy tratando de reducir el tiempo de carga de mi sitio cargándolos solo una vez (ya sea como un objeto con un atributo de datos apuntado a un archivo SVG externo , o cargándolos en el HTML como un SVG en línea ), y luego haciendo referencia a su Etiqueta de identificación en el atributo de datos de otro objeto, pero esto no parece funcionar.

Hice dos CodePens de ejemplo vinculados arriba para ilustrar el problema y copié el código de la versión externa a continuación.

El objetivo final es simplemente reducir el código (frente a la integración de todos los SVG de 63*3) y mejorar el rendimiento/reducir los tiempos de carga.

Si estoy haciendo esto de la manera incorrecta, por favor muéstrenme una mejor manera de hacerlo.

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