When you add stroke to svg, it gets cut off, how do you fix that?

The article discusses solutions for the common issue of SVG strokes appearing cut off at the edges. This problem arises when the stroke extends beyond the path of the SVG element but the viewBox does not allow for it. Methods to fix the issue include expanding the viewBox, setting overflow to visible, and potentially using stroke-alignment properties. Additionally, for responsive designs, employing vector-effect: non-scaling-stroke can help keep strokes intact when scaling the SVG. These techniques ensure that SVG strokes render correctly across various display sizes.

When you add a stroke to an SVG element, the stroke may appear cut off if the viewBox or container does not accommodate the extra width.

One easy solution to the SVG stroke cut-off issue is to increase the viewBox or set overflow: visible to avoid content clipping.

Read at SitePoint Forums | Web Development & Design Community