SVG Logo Cut Off? Check the ViewBox, Strokes and Clipping

If an SVG logo loses an edge, first compare the exact exported file on its own with the same file in its intended placement. A cut inside the asset and a cut imposed by a website header need different repairs. Keep the original, work on a copy, and identify the boundary before changing the artwork.

Avoid stretching the logo or adding arbitrary padding everywhere. The useful outcome is a complete mark at the intended proportions, with a clear explanation of what changed.

Separate the viewBox from the displayed viewport

The viewport is the area allocated to display the SVG. The viewBox describes the rectangle of internal coordinates mapped into that area. Its four numbers are minimum x, minimum y, width and height. For example, viewBox="0 0 200 80" describes a coordinate rectangle starting at zero and extending 200 units across and 80 down. These are not automatically CSS pixels. MDN's viewBox reference explains the mapping.

Treat the viewBox as one part of the investigation, not a universal clipping switch. SVG overflow rules determine what happens outside the viewport; an explicit clip path or surrounding layout can impose another boundary. MDN documents that SVG overflow="hidden" applies a clip matching the viewport, while CSS can override the presentation attribute. SVG overflow reference.

Compare the same file in two places

Start with a controlled comparison:

1. Save the actual SVG used by the page, rather than another file with a similar name.
2. Open that export independently in a browser, then compare it with the editable master in your vector editor.
3. View the same export in its intended header, slide or document.
4. Record which edge disappears, the display size, and whether the problem changes when the container changes.

A complete standalone view points you toward the embedding context, but does not prove the file has no issues: standalone and embedded contexts may apply different rules. If the letterforms themselves change rather than simply losing an edge, also follow the guide to SVG logo font changes.

Use a comparison sheet like this one. Every row below is hypothetical, not a reported repair result.

Symptom	Standalone export	Embedded or exported copy	Next check
Right edge of symbol missing	Same edge missing	Same cut	File bounds and internal clipping
Bottom of wordmark missing	Complete	Cut only in header	Header height, positioning and parent overflow
Thin outline missing at border	Outline reaches boundary	Same border affected	Painted stroke bounds
Symbol disappears during movement	Resting frame complete	Cut during motion	Bounds across the full animation

Replace the hypothetical observations with your own. Send the sheet with the file instead of asking someone to infer the problem from a cropped screenshot.

Check painted edges, not just path coordinates

A stroke has thickness around a path. Its visible edge can therefore extend beyond coordinates that appear to fit the viewBox. Caps and joins also affect the outline. MDN's stroke explanation describes these differences.

For a hypothetical example, imagine a vertical path at x=0 with a centered stroke width of 8 user units. Its straight sides extend approximately 4 units to either side of the path. If a clipping boundary starts at x=0, part of that stroke lies outside it. This calculation illustrates the cause; it is not a padding formula for an entire logo.

Ask the designer to inspect the visible bounds, including strokes and intentional effects, and fit the export area accordingly. Enlarging the viewBox without moving paths can change how large the mark appears within a fixed display box. Review the placement again afterward, and preserve the logo's proportions.

Export padding also differs from brand spacing. Use your logo clear-space rules when placing the finished asset rather than assuming a repaired viewBox supplies the required surrounding space.

Inspect internal clipping and the surrounding layout separately

An SVG clip-path restricts the painted region of the elements to which it applies. Content outside that region is not drawn, even if the outer SVG has room. MDN's clipPath reference documents this behavior.

Ask the designer whether a clip is intentional. On a duplicate, temporarily disabling the relevant clip can help isolate its contribution. Do not delete every clipping element: the logo may rely on one to construct the approved appearance.

For a website-only problem, give the developer the page and affected screen size. Ask them to inspect the SVG placement and its ancestor containers. An SVG change cannot by itself establish that a surrounding header allows the required space. Likewise, globally changing overflow to visible may reveal artwork while creating an unwanted overlap elsewhere.

For animation, include the moment the cut occurs. A resting frame alone is insufficient to describe a moving boundary problem.

Finish with a minimal handoff and acceptance check

Provide the editable master, original export, candidate export and one screenshot of the intended placement. Add the affected edge, browser or application version, embedding method if known, and the comparison sheet.

Before accepting the candidate, check that:

• The complete intended outline appears at the actual delivery size.
• Proportions, lettering, internal spacing and intentional clipping remain correct.
• The original failing placement now displays the mark correctly.
• The change has not introduced excessive empty space or overlap.
• Any required PNG or PDF is checked separately against the approved master.

Use the SVG, PNG and PDF logo file guide to organize those deliveries. Keep the editable master and the explanation of the repair; a corrected SVG in one placement is not approval of every downstream export.