SVG filters and masks depend on rendering regions, coordinate systems, alpha or luminance interpretation, and loaded resources. Set the target pixel size first and compare the raster result on the real background.
SVG → PNG
Define the rasterization size before comparing results
SVG describes shapes, text, filters, masks, and their relationships; a renderer turns that description into pixels. Converting to PNG fixes one rendering on a specific pixel grid. Enlarging that PNG later does not recalculate vectors, filter radii, or text outlines. Choose the intended display size and any high-density scale before converting, then record the exact output width and height.
The viewBox, width, height, preserveAspectRatio behavior, and output canvas ratio can produce empty margins, stretching, or cropping. Determine whether the converter accepts one dimension and calculates the other or forces both values independently. Capture a reference rendering in a standards-based browser using the same background and device scale. Compare native output pixels rather than a viewer's interpolated zoom whenever possible.
Small icons and large illustrations need separate checks. A shadow that looks smooth at 1200 pixels may become abrupt at 24 pixels, while a one-pixel line may disappear or become uneven. If you export a double-density asset, also place it at half its pixel dimensions in the real layout. The output is successful only when it works at the size users will see.
- Choose output dimensions first
- Check viewBox and aspect-ratio behavior
- Inspect the real display scale
Look for clipping at the filter region
Blur and drop shadows can extend beyond the geometry that produced them. SVG filters operate within a filter region, and pixels outside that region can be clipped. If an effect ends in a straight line at a canvas edge or disappears abruptly, inspect the filter's x, y, width, height, and coordinate units. A problem already visible in the source browser is not necessarily caused by the PNG converter.
Filter primitive order also matters. Blurring before compositing is not always equivalent to compositing before blur, and a renderer must follow the defined chain. Compare the source in more than one capable browser to establish whether the SVG itself is interoperable. Disable individual filter primitives in a copy when diagnosing a complex chain, then restore them one at a time after the responsible stage is known.
- Inspect straight cutoffs around shadows
- Review filter bounds and coordinate units
- Isolate primitives in a diagnostic copy
When an effect extends beyond its shape, the filter and canvas must provide room for those extra pixels.
Distinguish alpha masks from luminance masks
A mask is more than a black-and-white picture. Depending on the mask source and mode, visibility may be derived from alpha or from luminance combined with alpha. Gray, colored, and partially transparent mask pixels can therefore produce intermediate opacity. If an export looks unexpectedly faint or a colored area vanishes, inspect mask-type or mask-mode and the actual alpha values in the mask content.
Place the PNG over white, black, and a saturated version of the final background. Examine one-pixel borders, soft gradients, and overlaps between masked objects. Also review maskUnits and maskContentUnits. A mask defined relative to an object's bounding box behaves differently from one using the user coordinate system, and a size change can expose positioning mistakes that were less obvious in the original preview.
- Confirm mask mode and source alpha
- Test several contrasting backgrounds
- Review mask units and transforms
Account for fonts and external resources
An SVG may rely on a web font, linked image, stylesheet, fragment reference, or other resource that the converter cannot load. Missing fonts change glyph widths and line breaks; missing images can leave a filter input or mask blank. If the network-hosted SVG looks different when opened as a standalone local file, inventory its external dependencies before blaming rasterization.
Make resources self-contained where appropriate and licensing permits, or ensure they are reachable in the intended conversion environment. Do not assume a remote reference will load because a browser once displayed it; security policy and cross-origin restrictions can differ. Check for duplicate element ids and broken references. A simplified copy with one font, filter, image, or mask removed at a time is often the fastest way to separate a resource failure from a rendering-rule difference.
- Inventory fonts and linked images
- Validate ids and references
- Remove dependencies one at a time
Resources available to a web page are not automatically available to every conversion environment.
Compare each final PNG systematically
Export a representative SVG at the target dimensions and background, then compare it with the browser reference at the same effective scale. Check outer shadows, inner blur, mask gradients, small text, thin strokes, transparency, margins, and canvas dimensions in a fixed order. Automated pixel comparison can help, but the visually important areas still need human review because antialiasing differences are not equally significant everywhere.
Place the PNG in the actual document, interface, or presentation. If it differs, test output dimensions, external resources, filter bounds, and mask interpretation as separate variables. Record the converter and renderer version with the approved settings. Keep the SVG as the editable master, and render new sizes from it rather than enlarging a PNG.
Validate every distributed size. Passing a large export does not prove that a small icon will retain a one-pixel stroke or soft mask edge. Name outputs with their dimensions and background condition so transparent and flattened variants are not mixed. After any SVG change, repeat the checklist instead of overwriting old PNGs and assuming that filters, fonts, and margins stayed identical.
- Inspect effects, text, strokes, and margins
- Test in the real destination
- Render each required size from SVG
The useful reference is the PNG in its final size and background, not an isolated preview.
Key takeaways
- PNG fixes the SVG scene onto a pixel grid, so output dimensions and aspect ratio affect the result.
- Blur and shadows can be clipped when the filter region or output canvas is too small.
- Mask type, units, alpha, luminance, fonts, and external resources can change what the converter renders.
- Compare the PNG at its actual display size and background, then keep the SVG as the editable master.
Frequently asked questions
Why is an SVG shadow clipped in the PNG?
The effect may extend beyond the filter region or output canvas. Inspect filter bounds, coordinate units, and canvas margins.
Why does a mask look lighter after conversion?
Alpha-versus-luminance interpretation, partially transparent colors, color handling, or mask units can change the resulting opacity.
Can SVG text change during conversion?
Yes. If the converter cannot load the intended font, substitution can change glyph shapes, widths, and line breaks.
How should I choose the PNG resolution?
Start with the final display dimensions and required density, then inspect strokes, text, masks, and filters at that effective size.
What should I check first when the output differs?
Separate output size and aspect ratio, external resources, filter regions, and mask mode or units, changing one variable at a time.