Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML SVG Basics SVG and CSS Embedding SVG XML

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

I am trying to dip digger in this questions.

According to Nick in this lecture, we should only use embedded SVG when: 1) the SVG file size is small, and 2) we need to apply some styling to it

The above conditions explain under what situation we CAN use embedded SVG but does not talk much about when we SHOULD use it.

There is one example I can think of: Assume there is a SVG file - badge.svg. It will be used multiple time in the web page and they may have different colors. To avoid creating tons of almost identical SVG files, style seems like a better solution.

Any other examples?

6 Answers

Hello Jiaming Zhang. There really is not right or wrong answer here. It's really preference.

For example in your case, since you would like to create multi color badges it would be time saving to create a small SVG and you can just style the file according to your needs. Since the file is scalable you can create any sized image without the loss of quality.

Hope this helps.

Joel Bardsley
Joel Bardsley
31,249 Points

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.

Juan Aviles
Juan Aviles
12,795 Points

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

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points

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.

Chenghua Yang
Chenghua Yang
2,591 Points

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.