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 trialJulie Vandebosch
10,360 PointsPIxel hinting and responsive design
It is not very clear to me if you have to do pixel hinting when you are exporting the logo / icon as .svg for responsive websites. Will the object look nice in every size? Or is it better to do the pixel hinting for several sizes and export as a .gif or .png?
3 Answers
Corwyn Wilkey
7,971 PointsSVG = Scalable Vector Graphic. SVG is resolution independent and will look clean at any size. other formats like .jpeg, .tiff, .png. etc., all raster (pixel) based images so yes, those will require pixel hinting for responsive re-sizing for the web.
Basic SVG is supported by all browsers, however it is worth noting that the support specks are not the same across the board. Certain features such as filters, gradients, blending modes, etc. will have varying support from browser to browser. Check out SVG features and browser support specs here... http://caniuse.com/#cats=SVG.
SVG is definitely the way to go for RWD. I've been using Icomoon to create my own icon fonts using my own custom SVG graphics for certain UI elements. Adds more flexibility and eases of use and manipulation with CSS/javascript/jQuery etc.
Julie Vandebosch
10,360 PointsSo pixel hinting is not necessary when you export it as .svg?
Al Lu
UX Design Techdegree Student 15,801 PointsWhy you have to do pixel hinting in first place? Its not necessary for responsive design.. just for aesthetic purpose if you want to be pixel perfect.
Julie Vandebosch
10,360 PointsI want a responsive website, but I was just wondering if the logo would always show up pixel perfect. Thanks for your answer!
Al Lu
UX Design Techdegree Student 15,801 PointsYes and no. First of all you need to make sure that your css is fine, so when youre scaling down the website, the logo will keep its own proportions. Even if the logo is with the right proportions at certain breaking points the logo will be just too small. So all we need to do is to make sure it will display bigger by using media queries. If youre using SVG its not a problem, but if youre using png, jpeg or gif you need to make sure its not blurry or pixelated.
Julie Vandebosch
10,360 PointsOk, thank you very much!
Gemma Weirs
15,054 PointsI think SVG is like vector so it should look okay in every size. Someone feel free to correct if I'm wrong.
Al Lu
UX Design Techdegree Student 15,801 PointsYes you are correct.