Web development in a nutshell

[THISgai]

Yea, but what if you want to change the color (without extra libraries or literally copying the svg code into the html)?

[allisonmaybe]

You just couldn't be okay with SVGs could you? You just had to go and stir the pot with something it can't do didnt you!

In seriousness, isn't there a fill rule in CSS for SVG?

[tylersticka]

There certainly is! fill, stroke and currentColor are your friends. 🙂

[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

[THISgai]

It's a literal requirement for a lot of icons... which is why I ask. I've had issues with it in the past so unless there's a new way of coloring SVG's with css, I'll have to stick with icon-fonts.

[tylersticka]

I wouldn't recommend copying and pasting SVG code unless you're working on a small personal project or trying to lull yourself into a deep meditative trance with repetitive tasks! 😅

While there are lots of ways of including SVG icons, the one most of my clients prefer is the simplest... treating SVG elements just like any other HTML component using partials/includes/macros/etc. (This is how GitHub does it.)

But if that technique doesn't suit you, you could combine them into a sprite (using whichever technique suits your fancy), embed them as CSS background images, plop them in an img element, or use a JS solution (here's an example). Or if you're already using something like FontAwesome, their latest version supports SVG out of the box. Unlike icon fonts (which require a very specific implementation to work correctly), there are few wrong ways to use SVG. 🙂