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

Design Photoshop Foundations Vector Shapes Pixel Snapping & Hinting

Julie Vandebosch
Julie Vandebosch
10,360 Points
Posted by Julie Vandebosch
Julie Vandebosch
10,360 Points

PIxel 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
Corwyn Wilkey
7,971 Points
Corwyn Wilkey
Corwyn Wilkey
7,971 Points

SVG = 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
Julie Vandebosch
10,360 Points
Julie Vandebosch
Julie Vandebosch
10,360 Points

So pixel hinting is not necessary when you export it as .svg?

Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points

Why 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
Julie Vandebosch
10,360 Points
Julie Vandebosch
Julie Vandebosch
10,360 Points

I want a responsive website, but I was just wondering if the logo would always show up pixel perfect. Thanks for your answer!

Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points

Yes 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.

Gemma Weirs
Gemma Weirs
15,054 Points
Gemma Weirs
Gemma Weirs
15,054 Points

I think SVG is like vector so it should look okay in every size. Someone feel free to correct if I'm wrong.

Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points

Yes you are correct.