Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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?
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).
