Why SVG Strokes Clip at ViewBox Edges

SVG strokes often appear cut off along the edges of a graphic when an element is positioned directly against the perimeter of the coordinate canvas. This issue occurs because of how SVG rendering engines calculate stroke geometry relative to the viewBox boundaries and default clipping rules. Understanding the interaction between stroke alignment, coordinate systems, and viewport bounds makes it easy to diagnose and resolve this common rendering glitch.

The Mechanics of SVG Stroke Alignment

The primary cause of stroke clipping is that standard SVG strokes are centered along the path’s vector line by default. When you define an element with a stroke width, the rendering engine places half of that stroke thickness on the inside of the path coordinates and the other half on the outside.

For example, if a rectangle has a stroke-width of 4px and is positioned at x="0" and y="0", the center of the stroke line sits exactly at 0. This means: * 2 pixels of the stroke extend into the positive coordinate space (0 to 2). * 2 pixels of the stroke extend into the negative coordinate space (-2 to 0).

Because standard SVG specifications (SVG 1.1 and current implementations) do not widely support inside or outside stroke alignment, the stroke must expand symmetrically outward in both directions from the path edge.

How the viewBox Enforces Clipping

The viewBox attribute defines the visible coordinate system and aspect ratio of the SVG canvas. Anything drawn outside the defined min-x, min-y, width, and height parameters falls outside the designated rendering area.

When an SVG root element renders in a browser, it applies default clipping behavior: * Coordinate Bounds: Geometry rendered at negative coordinates (or beyond the maximum width and height defined by the viewBox) exists outside the visible frame. * Default Overflow: Most web browsers apply overflow: hidden to root <svg> elements by default. This automatically cuts off any visual pixel data that extends beyond the canvas boundaries.

When half of a stroke extends past the viewBox edge into negative coordinates or beyond the maximum dimensions, the browser simply does not render that outer half, leading to uneven or flattened edges.

How to Prevent SVG Stroke Clipping

There are three primary ways to resolve stroke clipping:

1. Expand the viewBox

The most reliable solution is to add padding directly to the viewBox to account for half of the stroke width on all sides. If an icon uses a 4px stroke and has a native size of 24x24, adjusting the viewBox to "-2 -2 28 28" ensures the entire stroke remains visible.

2. Inset the Path Coordinates

Instead of changing the coordinate bounds, you can inset the artwork geometry. Offsetting path coordinates inward by half the stroke-width keeps all vector edges within the visible area. For example, a rectangle on a 100x100 canvas with a 4px stroke should be drawn at x="2", y="2", width="96", and height="96".

3. Adjust the CSS Overflow Property

Setting overflow: visible; on the <svg> element in CSS allows strokes that fall outside the viewBox to remain visible. While effective for simple layouts, this approach can cause overlapping issues if the SVG is placed inside constrained containers or tightly packed UI components.