Why is my SVG logo cropped? Check bounds before changing the artwork

1. Compare the same file in two places

Save the approved source and make a working copy. Open the exported SVG directly in a browser, then place that exact file in the intended page or application. Use a contrasting background if part of the logo is white. Compare the symbol, lettering and outermost details, not just the overall silhouette.

If the standalone file is complete, ask the person integrating it to inspect the image container, fixed dimensions, cropping settings and clipping on surrounding elements. Send the original SVG and a screenshot showing the difference. Do not redraw the mark to compensate for a cropped website slot.

If both views lose the same edge, start with the exported file and its source. Change one setting at a time and keep a comparison copy. That makes it possible to tell which change solved the problem rather than accepting a different-looking logo by accident.

2. Separate the artwork coordinates from its display box

The SVG viewBox describes a rectangle using four numbers: minimum x, minimum y, width and height. That rectangle maps the artwork coordinates into the viewport. It is not simply a resolution setting. Changing only an image’s CSS width makes the same mapping larger or smaller.

For a simple example, suppose a rectangular mark is intended to occupy coordinates from x = 0 to 100 and y = 0 to 40. A viewBox covering only x = 0 to 90 is not a faithful description of the intended area. Correct the export from the source, or have someone who understands the SVG set bounds that include the approved artwork.

Check the rendered extent, not only the central path. Strokes, markers and effects can extend past the geometry you selected. Do not apply an arbitrary universal margin: too much extra area makes the logo appear small when placed at a fixed width.

Further reading: MDN: viewBox coordinates · MDN: SVG overflow and viewport clipping

3. Check the export area in Illustrator

If the file came from Illustrator, return to the original AI document. Review which artboard or selection was exported and whether its edges include the complete approved mark. Look for neighboring artwork that should not be in this delivery file.

Adobe distinguishes artboard-based SVG export from object-bound export: with Use Artboards selected, artboards define the exported areas; without it, the combined object bounds define the viewport. Choose intentionally. A tight artwork export and a padded placement asset are different deliverables.

Re-export from the AI source after correcting the area. Adobe recommends returning to that source for further edits rather than treating an exported SVG as the new working master. Do not keep repeatedly importing and resaving until the preview happens to look right.

Further reading: Adobe: SVG export and Use Artboards

4. Inspect clips and effects separately

A clipping path can hide part of a drawing even when the outer SVG bounds are generous. Inspect clipping groups in a copy of the source. Temporarily disabling the relevant clip can help identify the cause, but do not delete every clip: some are essential to the approved design.

A filter also has a defined region. Blur and shadow may extend beyond the filtered object, so inspect the filter region and its coordinate system when only the effect is truncated. Enlarging the outer canvas does not necessarily repair a smaller internal filter region.

The same caution applies to a mask or an intentionally cropped illustration inside a logo. Identify which boundary is responsible, preserve intentional construction and compare any repair against the approved reference. Setting overflow to visible is not a complete delivery strategy: the receiving layout may still clip the result.

Further reading: MDN: clipping paths · MDN: filter regions · MDN: filter coordinate systems

5. Test the repair without changing the brand

Check the repaired export at its intended display size and enlarged. The large view helps reveal a clipped curve; the small view tells you whether the placement still works. Compare proportions, spacing, stroke appearance and any approved padding.

Test the actual destination again. Keep the original and repaired filenames distinguishable, and ask the recipient to replace the old asset rather than relying on a screenshot of the fixed version. If the error remains only in one application, document that limitation instead of promising universal compatibility.

The earlier SVG clipped the lower stroke at the export boundary. This replacement was exported from the approved source and checked in the browser and target header. The artwork itself is unchanged; use the new SVG rather than the previous attachment.

6. Package the checked artwork

Once the source SVG is correct, logopack.app can help organize the delivery package. Inspect the selected output files too: a clean source is a starting point, not a substitute for reviewing each result.

A free account can try the supplied demo while its SVG artwork stays unchanged. Exporting your own artwork requires a paid plan. Check the current plans before exporting, and retain any separately prepared supplier-specific files.

Further reading: Open the generator · View current plans

Before you send the replacement

• ✓The same SVG has been tested alone and in its destination.
• ✓The responsible boundary has been identified, not guessed.
• ✓Symbol, lettering, strokes and approved effects are complete.
• ✓No intentional clip or mask was removed without review.
• ✓The replacement matches the approved artwork and spacing.
• ✓The recipient knows which file replaces the old one.