↗ SVGtopixGuides

SVG to PNG: Cropped Edges

Open the SVG to PNG tool and export the tight and padded samples below at the same pixel size to see which parts a tight SVG viewBox cuts off. If the tight export loses an edge, expand the source viewBox to enclose the painted area, then export again and check the saved pixels.

These samples share the same drawing and intrinsic width and height. Their viewBox is the only source change. I saved both PNGs on November 14, 2026 at 03:02 China Standard Time using SVGtopix’s 20261105-batch build and Chrome 157.0.8103.78. Both downloads were 120 × 96 pixels, with Transparent background and Standard rendering. The tight viewBox was 0 0 100 80, and the padded one was -10 -8 120 96.

InputPathCircleRectImageSample files
Tight1120SVG · PNG
Padded1120SVG · PNG

The pixel positions below are zero-based and refer to fully opaque pixels of the exact sample color. The source element counts identify the inputs. They do not measure what survived in the PNG.

The red stroke meets the left edge

Open tight-icon-viewbox.svg and find the red path. Its left segment lies on the source viewBox boundary, while the stroke is centered on that segment. In tight-icon-viewbox.png, fully opaque red reaches column 0. In padded-icon-viewbox.png, the first fully opaque red is at column 6. The same path and stroke are present in both inputs, so the path count misses the paint outside the tight frame.

To check the saved images, zoom in on the left edge and use a pixel inspector on the red bar. The padded sample passes this check when there is clear space to the left of the stroke and the outside edge is visible. If the stroke is flat against the left edge in an export where it should be complete, move the viewBox’s minimum x left and extend its width to retain the opposite edge. Keep the stroke width fixed when comparing the two versions.

The blue circle loses its right arc

In tight-icon-viewbox.svg, the blue circle extends beyond the right side of the viewBox. In tight-icon-viewbox.png, fully opaque blue reaches the last column, 119. In padded-icon-viewbox.png it ends at column 115. Both PNGs have the requested pixel dimensions. The dimensions alone miss the missing curve.

Check the widest part of the circle in each saved PNG. For this icon, the check passes when the outer right arc curves back into clear pixels instead of ending in a vertical cut at the image boundary. If the arc is cut off, extend the viewBox’s right edge beyond the circle’s outer radius. Keep the intended aspect ratio if the final PNG must fit a fixed frame, and inspect the next download at that frame size.

The offset shadow ends at the bottom edge

In tight-icon-viewbox.svg, find the offset filter on the green rectangle below the circle. Inspect the saved PNG below the yellow rectangle. I counted 48 fully opaque pixels of the exact shadow green in the tight export and 180 in the padded export. The tight shadow reaches the last row, 95. The padded shadow ends at row 94. Looking only at the yellow rectangle misses the shadow painted below it.

Inspect the bottom rows of both PNGs. For this sample, the check passes when the green strip ends inside the image and leaves a clear row below it. If the strip meets the canvas edge, extend the viewBox downward to include the offset shadow. If the shadow still cuts off before it reaches the canvas edge, inspect the filter’s own bounds separately. I did not test edits to the filter region in this pair.

The padded viewBox changes the artwork’s scale within the same PNG dimensions, so the pixel counts cannot be subtracted to recover the exact number of clipped pixels. This run covers only these two files and the shared settings above. Other settings, photos and design software imports were not tested. For a white area that should be clear, see the SVG to PNG white background guide.