Start by opening a copy of the file with Analyze SVG. If the issue is malformed markup, use Repair SVG; if the coordinate system or explicit dimensions need a targeted change, use Fix SVG Size. Keep the original source because a sizing repair can change how the artwork is framed without changing its paths.
What viewBox controls
The viewBox has four numbers: min-x min-y width height. They define the coordinate rectangle that is mapped into the SVG viewport. The rendered width and height attributes or CSS size determine how large that rectangle appears on the page.
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M3 12h18" />
</svg>In this example, the artwork is authored in a 24-by-24 coordinate space and displayed at 24 CSS pixels in the markup. CSS can still scale the viewport, but the internal coordinates remain the same.
Common symptoms and likely causes
| Symptom | Inspect | Possible repair |
|---|---|---|
| Artwork is clipped | The path extends outside the viewBox rectangle. | Expand or reposition the viewBox, or adjust the artwork bounds. |
| Large empty border | The viewBox is much larger than the visible geometry. | Measure the desired bounds and choose a tighter coordinate rectangle. |
| Icon looks stretched | Viewport aspect ratio and viewBox aspect ratio differ. | Check preserveAspectRatio and the intended display ratio. |
| Image has an unexpected intrinsic size | Width, height, CSS, and viewBox values disagree or are missing. | Set explicit dimensions or use a deliberate responsive CSS rule. |
| Browser shows blank output | XML structure, namespace, references, or malformed path data. | Run Repair SVG and inspect any external references or parser errors. |
Before and after: framing the coordinate system
Loose frame
<svg viewBox="-40 -40 120 120">
<circle cx="0" cy="0" r="12" />
</svg>Tighter frame (illustrative)
<svg viewBox="-14 -14 28 28">
<circle cx="0" cy="0" r="12" />
</svg>The tighter frame reduces unused coordinate space around the circle. For real artwork, include stroke width, filters, shadows, and any off-canvas effects in the review rather than calculating bounds from the path alone.
Width and height are not the same as viewBox
Changing width and height changes the rendered viewport; changing the viewBox changes the coordinate window mapped into that viewport. If you change only width and height, the artwork can scale without being reframed. If you change only the viewBox, you can zoom or crop the artwork while the viewport stays the same. Use Fix SVG Size when you need to make explicit dimension changes, and inspect the output in both an <img> element and inline SVG if your application uses both.
Repair checklist
- Validate that the root element is
<svg>and includes the SVG namespace where required. - Record the current viewBox, width, height, and preserveAspectRatio values.
- Inspect whether visible paths, strokes, filters, masks, and shadows fall inside the intended frame.
- Make one sizing change at a time and compare the result in the target browser.
- Keep the original and test the repaired SVG in every destination that matters.