Using inline SVG in HTML5
Essentially you are embedding all your SVG codes inside your HTML:
<text x="10" y="50" font-size="30">My SVG</text>
||Supported across all major browsers that support SVG (IE9+).
|Alt and title attributes
|Search engine indexing
Because inline SVG is embedded into HTML, there is no necessity for another network request to obtain the SVG file, and therefore inline SVG will load the fastest.
Be aware that you will still get FOUC (Flash of unstyled content) because chances are, your inline SVG will still refer to an external font. To solve FOUC, you will require embedded fonts as listed in Using an <img> tag.
Since the SVG is essentially the DOM, you can easily use external CSS, fonts and scripts. Multiple SVG can be inlined that refers to a single CSS or font files, therefore saving bandwidth and resources.
In addition, you get the ability to select, highlight and copy text in your SVG, plus the ability for search engines to index these text (Our opinion is that one should rely on HTML for SEO, and leave SVG separated, so we can index text using HTML and index images using SVG).
Workflow is way more complicated since SVG is mixed with HTML, and requires a lot more work maintaining dependencies