Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Development Tools Introduction to Front End Performance Optimization Optimize Assets Optimize Images

James Barrett
James Barrett
13,253 Points

SVG noob question...

Hi there,

I noticed in this video Nick only created .SVG images for the small, icon-like images. Why did we not do the same for the artwork/photography? Is this harder to do?

Furthermore, for clarification, did Nick simply reduce the pixels in each image as they were basically redundant; thus the speed of loading that particular image was decreased dramatically? I also noticed that Nick changed the quality to '.JPG medium'. Again, I am assuming that the quality of the image will determine how fast the image will load - correct me if I am wrong.

Thanks, James.

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there. A SVG file is not really a picture. It's a long list of XML using mathematical calculations to render an image. The result of this, is that a SVG is infinitely scalable. In fact, it stands for Scalable Vector Graphics. It doesn't lose image quality as you increase the size. There are programs out there that can try to run over a raster image and produce a SVG, but in my experience there is generally significant color and sharpness loss. So if you need a simple icon-type image with limited colors then SVG is definitely the way to go. It's also sort of cool to note that because this is all XML, it can be manipulated with CSS. You can, for example, have part of an icon disappear or blink or pretty much whatever you want it to do with enough creativity. In fact, there's a course on animating SVG here at Treehouse.

You can view it here

I might also suggest checking out the MDN documentation for SVG.

Hope this helps! :sparkles:

edited for additional note Yes, the quality affects the overall size of the file as it contains more data, which in turn affects the load time of the image.

James Barrett
James Barrett
13,253 Points

Thanks for the answer :)