SVG does not always look sharp in HTML

I have an SVG icon made with Inkscape. The page size is width: 200px, height: 200px and the line size is width: 170px, height: 170px.

When I put it in a HTML page:

It is the same SVG it only changes the HTML. When the width is 30px it looks ok, When it is 35px it looks bad, When it is 40px it looks well, 35, 36, 37 and 39 has the same aspect

Why does it happen?


1 Answer 1


From a programming standpoint, images are optimally rendered when they are created and resized as multiples of 8. In your case, if you created your image 256x256 for example, you can scale it down to 168x168 and the image should retain its details proportionately for its new size.

That's most likely the reason why when it was 40x40 (5 * 8 x 5 * 8), it looked good. And the difference between 30 and 35 is that the 30x30 looked better than the 35x35, because 30 is closer to 32 (8 * 4).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.