Detailed answer
Img works well for a separate SVG asset with alt text.
Inline SVG allows document styling and scripting but requires appropriate accessibility naming and careful handling. Choose according to the asset's role rather than convenience alone. Uploaded SVG should be treated as active content and sanitized before embedding.
Example
<img src="html-tree.svg" alt="The hierarchy of a basic HTML document" width="480" height="320">
Understanding the behavior
An external SVG used as an image is convenient for reusable graphics, while inline SVG allows individual shapes to be styled or manipulated in the document. Both approaches still need an accessible treatment suited to the graphic's purpose.
Practical implementation notes
Treat SVG from untrusted sources carefully, especially when inserting it inline. For a simple decorative icon next to visible text, avoid adding a duplicate accessible name that makes the label repetitive.
How to check it
Load it through img and inspect the accessible name supplied by alt.
Expected result
It behaves as an image resource without exposing a custom inline widget.
Watch out: Do not inject arbitrary uploaded SVG into the document.
Read the reference ↗