Fix a Clipped SVG Logo Without Redrawing the Paths

Keep the clipped file beside the master

Start with the SVG source, not a screenshot of its damaged preview. Save a working copy and retain the original path data. Our example uses one charcoal compound path with a transparent handle hole.

Both versions have an 800×500 output viewport. The deliberately wrong viewBox is 0 0 1024 1024; much of the cup lies beyond the visible frame. The finished cup beside it is the result of the repair, not a newly generated logo.

Locate the drawing before changing the frame

Ask for the bounds of the actual curves, including their turning points. In this example they reach x≈490.710–1620.830 and y≈693.803–1363.685. Looking only at path anchors would underestimate the right and bottom edges.

MDN defines viewBox as four values: minimum x, minimum y, width and height. Here the output and old viewBox have different aspect ratios, so inspect the rendered result rather than assuming every apparent edge corresponds directly to those four numbers.

Give Ciyo a constrained repair request

Supply the SVG text or an exported source file that the agent can read. Ask it to report the existing geometry, save a separate correction, render both files and put those previews on the canvas.

The request below fits this exact sample. For your own logo, have the agent calculate a suitable box with padding; copying our coordinates onto unrelated geometry can create a different crop.

Inspect this SVG without redrawing it. Report the true curve bounds. For this sample, preserve every path d, fill and fill-rule, keep width=800 and height=500, and save a separate version with viewBox="430 630 1260 790". Render the clipped and corrected SVGs as transparent 800×500 PNGs and save both on this canvas. Check that the complete cup and handle hole fit. Explain any source changes and limitations.

Check what changed in the source

Our repaired viewBox is 430 630 1260 790. Width, height, path d, fill and fill-rule remain identical between the two downloaded SVGs. Changing the frame changes apparent scale and placement; it does not preserve the old preview’s pixel positions.

Compare the files before accepting the result. A new path, background rectangle or embedded image would exceed this repair’s scope.

Inspect the complete mark and its transparent hole

The actual repaired PNG is 800×500 with transparent margins of roughly 39px left, 45px right, 40px top and 35px bottom. The base and handle now fit, and the handle opening remains transparent.

Review the SVG in a browser at the size you intend to display. The canvas shows PNG previews, while the downloadable SVG retains the paths. A preview is useful evidence, but it is not the vector master.

Stop if the missing geometry is truly absent

This method works because the curves are present in the source. A missing path, mask, clipping path or CSS overflow needs its own diagnosis. Increasing viewBox cannot reconstruct a shape that was never saved.

Keep the repaired version and original together. The linked samples let you repeat the inspection; this workflow demonstrates browser framing, without making any physical cutting or external-app import claim.

• MDN: viewBox
• Download the clipped SVG
• Download the repaired SVG
• Convert a PNG logo to SVG
• Create a favicon from a logo