What are the best practices for images/svgs being used for multple img elements?

Question

I have an asset, asset.svg, that I want to use for several img elements.

Is there anything wrong with only have one svg file that the other img elements reference as the src?

Or should I have a separate svg file to accompany each img element.

Here is a link to a code sandbox with one svg being used as the src for three separate img elements.

code sandbox

Answer 1

Ok here is thing and I have been faced with dilemma my self. I was using one image and wanted different colours to it. Obviously I would have to make two JPGs or PNGs to achieve this but cut throat was load time. I wanted reuse-ability.

if you are using raw SVG in html then you will get cache with rest of page but it wont be reusable other than place it was in placed in code.

<div>
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="chance" filter="url(#filter0_d)">
<rect x="4" width="25" height="25" rx="5" fill="#52A5FF"/>
<rect x="4.5" y="0.5" width="24" height="24" rx="4.5" stroke="#1F8BFF"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="33" height="33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

</div>

But if you use it as image source like you have then it will fetched with http request and cached separate to the html code that fetched it. Added advantage of this technique is since it would cached separately you can use the power of cache in rest of the pages on site not just parent page it self

<div>
<img src="https://j199m.csb.app/src/chance.svg" />
    <img src="https://j199m.csb.app/src/chance.svg" />
    <img src="https://j199m.csb.app/src/chance.svg" />
</div>

heck you can even use it as background image - see it repeat it self magic at works

div {
background: url(https://j199m.csb.app/src/chance.svg);
}

<div>hehe haha</div>

Bottom line theory

HTTP caching works based on URLs, and it is “all or nothing” - you can instruct the client to either take the whole resource from cache, or to reload it completely aka hard refresh.

Now, by “inlining” your SVGs, you are making them part of the HTML document - they are not external resources any more, that could individually be checked for whether they can be taken from cache or need to be reloaded, subject to page cache.

So, if you have three HTML documents that all have the same SVG image inlined, the code of the image will be loaded three times - because it is part of the three HTML documents.

So, if you have three HTML documents that all have the same SVG image as external source, the image will be loaded once and then from cache on each request - because it is part of individual cache resource not coupled with rest of html.

if the image was embedded as an external resource (as img, background-image, object, …), it would be loaded only once, on the first of those three HTML pages the browser loads. On the other pages, it will recognize, “hey, that external resource with this particular URL is in my cache already - no need to load it again.

wonderfully stated by this answer https://stackoverflow.com/a/37832616/10588650

Answer 2

a svg file can be used as many times as you need in the src attribute. There's nothing wrong using the same file multiple times.

e.g.

<img class="image-1" src="src/chance.svg" />
<img class="image-2" src="src/chance.svg" />

.image-1 {
   // styles here
}
.image-2 {
// styles here
}