If you use <img> tags, then webkit based browsers won't display embedded bitmapped images.
For any kind of advanced SVG use, including the SVG inline offers by far the most flexibility.
Internet Explorer and Edge will resize the SVG correctly, but you must specify both the height and width.
You can add onclick, onmouseover, etc. inside the svg, to any shape in the SVG: onmouseover="top.myfunction(evt);"
You can also use web fonts in the SVG by including them in your regular style sheet.
Note: if you are exporting SVG's from Illustrator, the web font names will be wrong. You can correct this in your CSS and avoid messing around in the SVG. For example, Illustrator gives the wrong name to Arial, and you can fix it like this:
@font-face {
font-family: 'ArialMT';
src:
local('Arial'),
local('Arial MT'),
local('Arial Regular');
font-weight: normal;
font-style: normal;
}
All this works on any browser released since 2013.
For an example, see ozake.com. The whole site is made of SVG's except for the contact form.
Warning: Web fonts are imprecisely resized in Safari — and if you have lots of transitions from plain text to bold or italic, there may be a small amount of extra or missing space at the transition points. See my answer at this question for more information.
<svg>
from which you want to reference other SVGs. This can be achieved, e.g. using<image>
.