I'm using this custom size 64*64 plus icon svg as zoom icon in my website. As you can see, it's pixelated. Specially the white border. Don't know why. Because it's svg it suppose to looks sharp right?

Here is my the svg file: https://svgshare.com/i/H_C.svg

Here is the real world example. Jsfiddle

  • There's nothing wrong with the SVG. It's not pixelated at any zoom level. The problem in the example doesn't look like pixelization to me, more like some kind of rendering/anti-aliasing problem. Perhaps it's related to this similar question on Stack Overflow. – Billy Kerr Jan 26 at 13:21
  • Yes. It is. Let me check. – CssSY Jan 26 at 13:31
  • Quite often these issues aren't really issues per se, but rather just how screens work / pixel density that is more apparent on smaller sizes. To find out if the issue is in the svg or not, you could compare it to a similar shape made in css: comparison ← To me the edge quality looks identical. You did say "white border", so I'm not sure if this comparison tells you what you want to know... Perhaps by "white border" you meant the edge of the white X... but I couldn't be bothered to convert the whole icon into CSS. – Joonas Jan 27 at 8:23
  • If I built cursor in css, I think it cannot use as cursor. – CssSY Jan 27 at 10:18
  • No, the point was to compare css to svg → If the css created graphic looks just as pixelated as your svg, then the issue is not in the svg, but rather the pixel density of your screen (likely). — I can see some pixelation in the edge of the red css circle in my comparison example, just like in the svg image... so at least that part of the svg image is not somehow messed up. – Joonas Jan 27 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.