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
Matthew Francis
6,967 PointsPNG vs SVG?
I'm confused, it looks like that both are used to show icons/small simple shapes and images. But which should I use?
1 Answer
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsDid you mean to link to a specific video?
Pngs are raster graphics, which means the the file has a whole grid laid out of all the little pixels and what color they are. Svgs are vector graphics which means it's just an xml file that has some instructions, like draw a circle here with this radius, this border width, this color, and then the browser does the work later of rendering the image based on those instructions.
This means that svgs are smaller files, because they're just little text files, not a big matrix of pixels. It also means they scale to any size without becoming pixelated. If you have an svg, I definitely recommend using it over a png in most cases. Not everything can be an svg though. Pictures you take with your camera are going to have to stay as rastor graphics. Also sometimes you'll be required to provide a png, like iOS icons, generated at specific sizes.
Matthew Francis
6,967 PointsAlso sometimes you'll be required to provide a png, like iOS icons, generated at specific sizes.
Can't the icons be made with SVGs? Don't they serve the same purpose, except that SVGs can be manipulated with code? So in a nutshell, is it safe to assume to always use SVG over PNG for simple shaped icons?
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsIt's pretty easy to turn an svg into a png. Sketch has some tools for exporting vector assets as pngs in all the required png formats. But I'm pretty sure when you're building an iOS app, you have to provide them with a bundle of pngs for different formats: https://developer.apple.com/library/archive/qa/qa1686/_index.html
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsAlso apparently you can't use svgs as favicons, for another example. But most places you're using images in a website you build you can do whatever you want.
Matthew Francis
6,967 PointsMakes sense, is it better practice to always use SVG over png? or does it not really matter at all?
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsIf the designer made the image as a vector graphic (like in Sketch or Illustrator), then ideally you should keep it in that format, if you have the option.
Douglas Ploughman
15,917 PointsDouglas Ploughman
15,917 PointsHere’s the rule: if we’re talking bitmap artefacts, you should export the image asset as PNG or JPG (PNG if you need transparency, JPG if not). If your image has vector artefacts that are easy to scale (shapes, flat/linear colours, etc), SVG is your format. Plus, SVG can be exported as code, meaning you can use CSS or JavaScript to edit the image dynamically, which is ideal for creating hover effects or subtle animations!