My SVG's strokes are somehow cut off when I have a large stroke width for my rectangle. I have the following code:
<svg width="500px" height="300px">
<rect width="352" height="128" stroke="#333" stroke-width="16" fill-opacity="0"/>
</svg>
Since the rect strokes are centered on the boundary of the rectangle, either use half the stroke width every time (8 in this case) for X and Y:
<svg width="500px" height="300px">
<rect x="8" y="8" width="352" height="128" stroke="#333" stroke-width="16" fill-opacity="0"/>
</svg>
or offset the viewbox of the SVG by half the stroke width:
<svg width="500px" height="300px" viewbox="-8 -8 492 292">
<rect width="352" height="128" stroke="#333" stroke-width="16" fill-opacity="0"/>
</svg>