svg not sharp, but blurry

Question

For whatever reason these svg files, seems blurry, and not 100% sharp in all browsers. These are svg files, and are enclosed within elements that are scaled to pixels, in other words using px and not % - hence no browser bitmap errors.

Any idea as to why this is happening?

This is one of the svg files;

Answer 1

If you want your SVG to be at its sharpest, then design it so that its shapes - especially the horizontal and vertical parts of the shapes - are on pixel boundaries.

For example, compare the following two examples:

<svg width="50" height="50">
  <rect x="9.5" y="9.5" width="31" height="31"/>
</svg>

<svg width="50" height="50">
  <rect x="10" y="10" width="30" height="30"/>
</svg>

Here's what this looks like at 4X enlargement.

Any time your shape passes through the middle of pixels, you will get grey pixels due to the anti-aliasing that 2D renderers use.