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.

Design Illustrator Foundations Creating Home Page Assets Save for Web

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

When should I save as svg?

In this video, Mat shows us how to save our graphics as an svg file; however he never mentions when should we use svg files instead of raster extensions (jpg, png, giff). So... (1) When and/or why should we save our graphics as svg for web? (2) Are svgs fully supported by browsers?

2 Answers

Mark Germani
Mark Germani
14,399 Points

SVG (Scaleable Vector Graphics) files are ideal for saving, as the name suggests, vector images (geometrically composed images based on points, lines, curves, polygons etc.) Advantages for this format are:

  • Potentially smaller file sizes than their rasterized counterparts (jpg, png, gif)

  • Infinitely scaleable; you can re-size them and they will never lose their crispness. This makes them great for generating content for the mobile experience, as you don't need multiple versions of an image for multiple densities of display (retina, retina HD, etc.)

  • Can be manipulated on the page; alter the colour and alpha of strokes and fills and other fun stuff with CSS and Javascript, or even animate the SVG with javascript.

There are some downsides, or at the very least some considerations to make when evaluating the suitability of SVG for your needs:

  • Requires a vector source; if you're using a photograph or other rasterized source, you cannot save directly as an SVG, and while you can use vector authoring tools to convert a rasterized image to vector art, if the source image is very complex (i.e. a photograph) you really wouldn't want to, as the resulting SVG would have far to large a filesize, and for potentially lesser image quality than a well-optimized raster file.

  • Not fully-supported on all browsers as yet; check out "Can I use..." for more info. This can result in the image not displaying, or displaying at a different size than you'd like or otherwise behaving differently. At the very least you'd have to specify an alternate image for browsers not supporting SVG, and that can add to your workload

I use SVG for mobile-only designs (it's handy to have around when creating responsive sites) and I wouldn't want to discourage you from using it, but only when the potential benefits (performance, flexibility) outweigh the downsides (browser support) and when the artwork being saved is appropriate.

I hope this answers both your questions. If not, you might find what you're looking for in this excellent article which was of great use to me when I started using SVG.

Robert Manolis
Robert Manolis
Treehouse Guest Teacher

very comprehensive answer. thank you.

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher

svg works better for print projects. When saving for the web, a lighter weight file format will improve the functionality of a site.

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

I understand, but never the less he mentions svg for web, so I'm curious when is svg a good idea for web.

Thanks