0

Website logo is an SVG and looks like this:

enter image description here

When I resize it by setting my logo width on my website it turns into this:

enter image description here

If you zoom in you can see the image is lumpy, uneven and messy. For example, the middle line is off-center, the left line is blurry and two pixels wide, the right line is sharp and one pixel wide, some of the small inner lines are sharp and bright the rest are blurred... I am really confused as I thought SVG files should scale as closely as possible but this is all over the place.

How do I ensure the logo remains pixel perfect and symmetrical at all sizes? Am I resizing it wrong or is the SVG file itself too intricate to scale? Perhaps the lines are not truly centred? How do I communicate this issue to our graphics designer?

Many thanks!

  • 1
    Your logo is simply now below its nyquist limit. Nothing to see here. – joojaa Jun 15 at 16:07
4

This has nothing to do with SVG really. I think it's the design that is the problem.

Looks like the lines are too thin, so when you are rescaling them they are becoming less than a pixel. Change the design if you want something that is to be displayed at such a small size, or alternatively don't scale it so much that it will cause a problem.

Yes, it's true that SVGs can be rescaled without degradation in quality, but SVGs still have to be rendered as pixels on a screen. If you reduce those lines to less than a pixel, chances are they will end up looking like crap, or even completely disappear.

| improve this answer | |
  • People often misunderstand the scalability argument. Its true it can be scaled. But because of fundamental signal processing limitations you can often only scale vector drawings up from some critical size. In this case the thin lines make this critical size big indeed. – joojaa Jun 15 at 16:08
  • @joojaa - exactly. – Billy Kerr Jun 15 at 16:44

Your Answer

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

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