The practical answer
For a circle centered at (50,50), radius 50 and stroke width 12, the outer bounds run from −6 to 106. A viewBox of "-6 -6 112 112" contains the geometric stroke. Use "-7 -7 114 114" if the delivery needs an additional unit of transparent clearance, and check the requested pixel size.
How a path fits while the stroke does not
Imagine a band laid along the circumference. The path reaches 0 and 100, while the band extends another 6 units on both sides. All four cardinal points can therefore cross the original canvas. The 6 comes from 12÷2; it is not a compression artifact.
The MDN stroke-width reference defines the width; its viewBox reference explains the coordinate-to-viewport mapping. The overflow reference describes viewport clipping. This exercise explicitly sets hidden so embedding differences are not mistaken for a repair.
This is an original geometry exercise, not a universal bounding-box algorithm. Joins, caps, shadows, transforms and non-scaling strokes can change other files’ painted extents. Isolate the basic fault here before diagnosing a complex illustration.
Start with a deliberately clipped control
Save the following UTF-8 text as ring-clipped.svg, or paste it into a converter that accepts SVG source. Both the canvas and viewBox are 100 by 100. The missing space is intentional.
Inspect the top, bottom, left and right contact points rather than just the center. An editor may display content outside its page; if the downloaded PNG does not contain it, the delivered file still fails.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" overflow="hidden">
<circle cx="50" cy="50" r="50" fill="none" stroke="#164e63" stroke-width="12"/>
</svg>Choose which dimension must remain fixed
Expanding the viewBox preserves the path coordinates. Moving the shape into an expanded positive-coordinate canvas is another option for a downstream system that dislikes negative origins. Changing only width and height does not recover content outside an unchanged coordinate range.
Mapping 112 units into a 100-pixel PNG makes the complete ring approximately 89.29% of the previous unit scale. That may be correct for a fixed-size icon, but it does not preserve the subject’s pixel scale while adding space. Use 112×112 to preserve that scale, or 114×114 for the extra clearance.
| Setting | Coordinate range | Output | Expected result |
|---|---|---|---|
| Clipped control | 0 0 100 100 | 100×100 | Stroke extends past viewport |
| Geometric repair | -6 -6 112 112 | 112×112 | Includes theoretical outer bounds |
| Delivery clearance | -7 -7 114 114 | 114×114 | One more unit beyond the bounds |
<svg xmlns="http://www.w3.org/2000/svg" width="114" height="114" viewBox="-7 -7 114 114" overflow="hidden">
<circle cx="50" cy="50" r="50" fill="none" stroke="#164e63" stroke-width="12"/>
</svg>Check the downloaded artifact
Paste each input into the SVG-to-PNG tool, generate the image and download it. The current tool renders source as an image and exports it; it does not inspect paths or automatically repair the viewBox. Make the edit in the source first.
Keep the clipped control and clearance version. Check the downloaded dimensions: 100×100 and 114×114. Place the transparent PNG on both light and dark backgrounds, enlarge the four contact points, then return to 100% for the intended use. Transparent corners are expected.
Acceptance means an uncut outline, the requested dimensions and correct placement. It does not mean every edge pixel must be opaque: anti-aliasing creates partial alpha. Small rasterizer differences alone also do not establish a clipping fault.
Before delivery
- Retain both sources, their viewBox settings and the editable master.
- Inspect the actual PNG dimensions rather than the webpage thumbnail.
- Check all four contact points, clearance and unintended subject scaling.
- If clipping remains, inspect parent clipping, clipPath, filter bounds and transforms instead of endlessly increasing resolution.
Separate canvas faults from other export failures
For a dimension misunderstanding, use the viewBox and output-pixel guide. If the outlines are intact but lettering changes, use the font-fallback handoff guide. These faults can coexist, but their fixes belong in different places.
Tell the recipient the PNG size, transparency, approved subject scale and matching SVG revision. For a complex logo or technical drawing, inspect the entire painted bounds in a suitable editor; this simple circle calculation does not cover every possible graphic.
Common questions
Can I just use overflow="visible"?
Visibility in a page does not expand a fixed-size raster file. Put the required artwork inside the final canvas and inspect the actual download.
Further reading & sources
Put the guide into practice
Open the relevant tool, preview the result and check your exported file.
