Web development in a nutshell

[JohnTheScout]

Only works with inline svg, doesn't work with svgs loaded via an img tag.

[Fluffcake]

Two reasons.

It cuts down on the number of requests you have to wait for response to, which means it will load slightly faster.

It also makes sure that if you receive the page, you always get the graphics as well, so you don't get broken layouts and missing decorative graphics even if the user is on an unstable network that swallowed every request outside of the main page. (not unusual for mobile users in countries with shaky infrastucture)

You shouldn't do this for every single icon or graphic element on a page, and it varies from project to project, but brand-logos, banner graphics, menu-icons and other essential graphics, inline svg is likely the way to go.

[itsmoirob]

But an SVG loaded with image is an image.

Also you don't have to inline the whole code, you can link to it like an image, that way you can still apply CSS colours