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 pixe

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:

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.