Under what situation it will be better to use embedded SVG?

To provide a real world example, I previously had a client that sold health insurance and had different advisers that covered separate regions within the UK. They requested a contact page that included an interactive UK map. The visitor would hover over/click on their own region and the region would change colour while displaying relevant contact information for advisers covering the particular region.

In order to change the fill colours of the separate paths that formed each region, I had to embed the svg in order to apply the necessary css.

I think what Nick did in the course, is a great example of when you should use an embedded SVG file. Being able to target and style individual parts of the image with CSS is a very powerful feature. For example, I use an SVG for the logo of my site. I use a second version of it, which is more complex in design, for when my media queries trip my mobile design into a larger screen size. Of course this requires two images, when in fact I really only needed the one. I plan to redo this now that I know it's possible, and just style the single SVG to suit my site's needs.

Your idea of different colors is also a great example of when to use an embedded SVG. I can see where a designer could change their site colors to match the seasons or even holidays. Using CSS to change the logo would be much easier than creating new SVG's all the time.

Hope this helps.

~Juan

SVG images are really best suited for small things that are used often, like site logos, icons, and the like. Like Chyno said, they are scalable, so they look nice whatever the size they are increased to (to a reasonable limit, of course). Other things like actual photographs, artwork, and such should be implemented as other elements, like img or as backgrounds for div elements.

My developer friend was telling me that SVGs are cool to work with because you can apply animations and transitions to them - I guess you can do that with some images, too, but probably not at the detail you can with SVGs.

I got the same problem here, too. Sometimes we need several icons and different color in everyone of them. So is it the right time to use?

For that, I have to use embedded svg codes for different CSS styling. However, this makes so many duplicate codes in HTML mockup. But I can't style the external svg files. What's the best strategy here?

Currently, I use font service like font awesome to mimic svg icon. I don't know if it's a good way or not.