What you encounter is indeed a case of surprising sub-pixel rendering. You see, SVG strokes are applied exactly on the path where they are specified. Example: If a path runs from the point (0,0) to (0,5) and is assigned a 1px wide stroke, the stroke covers the rectangle (-0.5,0), (0.5,0), (0.5,5), (-0.5,5). The first one of these images illustrates this: 
Your rectangle is drawn from (0,0) (the default position) to (36,36). Therefore the stroke is placed in such a way, that it lies exactly between the screen pixels. That’s the reason for the right and bottom edges to look blurry.
What’s up with the top and left edges? Well, since you didn’t define a size for your SVG image, the browser determined one for you. The default is to start at (0,0) (top-left corner) and make the SVG 300x150 pixels wide.
Since the top and left edges of the rectangle outline are directly on the edge of the image, they still are drawn blurry, but you don’t see the part outside the image. Hence it appears to be a sharp line, but if you look closely, you notice, that it is not fully black, but half transparent.
How to fix this? There are two options. Option 1 is to place the rectangular on half pixels:
<rect x="0.5" y="0.5" .../>
The other option is to move the viewport of your image around, so that the image as a whole is shifted for half a pixel:
<svg viewBox="-0.5 -0.5 37 37">
Note, that I’ve set width and height of the viewport to 37px. That’s because your rectangle will have a final size of 37px: 36px for the outline, and then 0.5px on every side, where the outer half of the 1px stroke rests.
For a general overview on scaling SVGs I suggest this post on CSS Tricks.
