svg not sharp, but blurry

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.

The response used a slightly modified code @Paul LeBeau

You can use the SVG attribute - shape-rendering =" crispEdges " to disable browser anti-aliasing.

https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering

crispEdges

Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.

<svg width="50" height="50">
  <rect x="9.5" y="9.5" width="31" height="31" shape-rendering="crispEdges"/>
</svg>

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

No gray pixels are observed.

Update 2019 by comments

There is no universal, 100% solution to the pixelation problem.
Since the rendering depends on the installed operating system, its settings, the video card and which browser is used.

You can use an integrated approach made up of all the answers of this topic:

1. Use integer svg image coordinate values by answer @Paul LeBeau

   If you take a finished image with fractional values, you can process it with SVG optimizer

2. Set the integer value of viewBox by answer @AKX

3. Use the attribute shape-rendering ="crispEdges"

If a design change is possible, avoid contrasting border colors.

For example, use a dark gray color instead of a black and white combination or use shades of gray instead of a pure white background.