SVG cut off or surrounded by empty space? Fix the viewBox, not the logo
Diagnose clipped SVG edges and excessive whitespace. Understand viewBox coordinates, strokes, masks, and page bounds before changing or retracing your artwork.
Quick answer
A cropped or tiny-looking SVG often has a canvas problem, not a vectorization problem. Check the viewBox, transforms, clipping paths, and stroke width. Fit the page to the intended drawing bounds in a vector editor, keep needed padding, and reopen the export. Do not erase valid paths simply to make the preview fit.
What the viewBox actually controls
The four viewBox values describe minimum x, minimum y, width, and height in the drawing’s coordinate system. They are not necessarily the same as the displayed CSS width and height. Changing only the outer width can resize the viewport while leaving the wrong internal bounds untouched.
| Symptom | Possible cause | Inspect |
|---|---|---|
| Ear or letter edge missing | Drawing extends beyond bounds | viewBox and path position |
| Logo tiny with a broad border | Oversized page | Page fitted to artwork |
| Thick outline clipped | Bounds omit stroke extent | Stroke and effect padding |
| Correct editor, broken export | Mask or clipping mismatch | Exported file structure |
Repair without distorting the drawing
- Duplicate the original and open it in a vector editor.
- Select the visible artwork. Look for stray objects far away that artificially enlarge the selection.
- Fit the page or artboard to the intended drawing. Include deliberate breathing room and stroke extents.
- Check whether a clipping path or mask is hiding content. A larger viewBox does not automatically remove those constraints.
- Export SVG again, then open the actual file in a browser at narrow and wide sizes.
Use precise values, not a universal replacement
For a simple drawing whose visible bounds really are x=20 to 220 and y=30 to 130, a viewBox of 20 30 200 100 describes those bounds. Add padding if a stroke or effect extends farther. Do not paste those numbers into an unrelated file: every drawing has its own coordinates.
Use the SVG design checker for structural review. After the visual fix, the SVG optimizer can reduce markup, but it is not an automatic artboard-repair tool. Preserve the viewBox and compare the final rendering.
Final checks
- No important shape touches an unintended crop boundary.
- Transparent padding is deliberate rather than accidental.
- Stroke ends, shadows, and rounded corners remain visible.
- The aspect ratio stays correct at mobile width.
- The exported file, not only the editor canvas, is verified.
Frequently asked questions
Will adding width and height remove empty space?
Not necessarily. Those attributes control display size; the internal coordinate bounds may still contain large margins.
Should I vectorize the logo again?
Not if the paths are already correct. Repair the document bounds first. Retracing introduces unnecessary changes and may still preserve the same unwanted margins.