Website logo is an SVG and looks like this:
When I resize it by setting my logo width on my website it turns into this:
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?