An SVG icon can appear identical on screen whether its markup is inside the HTML or loaded as an image file. The delivery method changes how you style it, reuse it, and inspect it.
SVG describes shapes using XML-based markup. It is useful for graphics such as icons and logos that need to scale cleanly. That does not mean every graphic should become SVG or every SVG should be inserted inline.
Compare the two implementations
An external image reference keeps the SVG in its own resource:
<img src="/assets/search.svg" alt="Search" width="24" height="24">
Inline SVG puts the shapes directly in the document:
<svg viewBox="0 0 24 24" width="24" height="24"
aria-hidden="true" focusable="false">
<circle cx="10" cy="10" r="6" fill="none"
stroke="currentColor" stroke-width="2"></circle>
<path d="M14.5 14.5L21 21" stroke="currentColor"
stroke-width="2"></path>
</svg>
The inline example is decorative and must sit beside a visible label, such as the text on a Search button. If the icon is the only content of a control, provide an accessible name for the control. Do not rely on the shape alone.
Decide how much styling control is needed
Inline shapes can use currentColor and be styled as part of the surrounding document. This is useful when an icon needs to match text or change with a button state.
An SVG loaded through img is a separate image document. Ordinary page CSS does not reach into it to restyle each internal path. You can still size the image element and style its outer box.
Compare repeated bytes with reusable files
A separate file creates a resource request when needed and can be cached for reuse. Inline markup is part of each HTML response. Repeating a detailed SVG in dozens of cards can add substantial repeated markup.
A small icon used once may be inexpensive inline. A large illustration repeated across a site may benefit from a separate cached file. Measure the actual output and transfer; request count alone does not settle the decision.
The browser caching guide explains how repeat requests differ from first visits. Include both when comparing the implementations.
Keep indexing and accessibility questions specific
An inline SVG does not have its own external image URL in the same way that img src does. That distinction matters when assessing image discovery, but it does not justify saying that all inline graphics are ignored by search or that every external icon should appear in image results.
Check the graphic’s purpose. Decorative UI icons need different text alternatives from a diagram carrying information. A company logo may also be represented in structured data, which is a separate implementation from how its visible file is loaded.
Test the chosen version in context
Check a light and dark background, keyboard focus states, mobile sizing, and the accessible name of any icon-only controls. Inspect the final HTML for duplicated markup and Network for the separate file’s response.
For a design-system change, test the shared component across several templates. My page-speed service examines the transfer and rendering costs, while developer SEO training helps teams validate the markup and page behaviour together.