[httpteapot]

About using svg images I wonder if there are some studies about inlining versus using a reference to an external URL.

I have a web page with the same icons repeated 20+ times, and I my intuition is that it it could be optimized by using a shared reference instead of repeated inlined svg sources in the html documention — which is font-awesome default behavior.

[pseudosavant]

SVG can handle this situation. You can define the SVGs somewhere in the HTML document and reference them anywhere you want. https://css-tricks.com/lodge/svg/13-svg-icon-system-use-elem...

The syntax is like this:

<!-- Define the SVGs. I usually put them in an element with `display:none` --> <svg id='svgID12345'><path d="..."/></svg>

<!-- Use the SVG via `<use xlink>` anywhere you want to see it. --> <svg><use xlink:href='#svgID12345'></svg>

You can reference external SVGs in external files as well. Just use `<use xlink:href="defs.svg#icon-1"></use>`. https://css-tricks.com/svg-use-with-external-reference-take-...

[car]

<use xlink> will accomplish what you want to do.