SVG rendering issues
SVG gradients not preserved: common causes
Gradients depend on internal IDs, paint references, CSS, and browser rendering. A small markup change can make a gradient turn into a flat fill or disappear.
SVG gradients are usually referenced with values such as `fill="url(#gradientId)"`. If the gradient definition, ID, CSS rule, or reference is removed or renamed, the browser cannot apply the gradient and the output may look flat, black, or blank.
Why SVG gradients break
- The SVG uses `url(#id)` but the matching gradient definition is missing.
- A cleanup tool removed an internal reference that looked unsafe.
- A color editor replaced the gradient reference with a flat color.
- The SVG depends on external CSS that is not inside the file.
- The file uses masks, filters, clipping, or blend effects that export differently in the browser.
How PDFSVG handles gradient references
PDFSVG keeps safe internal paint references such as `url(#gradientId)` during cleanup and export. The color editor also avoids replacing `url(...)` paint values. That protects common linear and radial gradients, but files that depend on external styles or advanced filter stacks can still need manual review.
What to check before export
- Open the SVG in the viewer and check whether the preview matches the original file.
- Search for `linearGradient`, `radialGradient`, and `url(#` in the markup.
- Make sure the referenced ID exists in the same SVG.
- Keep external CSS inline when the gradient depends on class rules.
- After recoloring, preview again before exporting to PNG, PDF, or React.
When a flat color is expected
A flat color is expected when you intentionally recolor a simple one-color icon. It is not expected when a gradient logo turns black or loses its shading. In that case, inspect the internal gradient IDs before converting the file again.
Common questions
Why are my SVG gradients not preserved?
Gradients often break when an internal `url(#id)` reference no longer matches a gradient definition, or when the SVG depends on CSS that is not included in the file.
Can I recolor an SVG without breaking gradients?
Yes, but do not replace `url(...)` fill or stroke values with a flat color unless that is intentional. Preview the SVG after recoloring before exporting it.
Why did my SVG export turn black?
A browser may use black as a fallback when a paint server, gradient, mask, or CSS rule cannot be resolved. Check for missing IDs, removed definitions, or external CSS.
Do gradients work in SVG to PNG and SVG to PDF?
Simple inline gradients usually work because the browser can render them. Complex filters, masks, external assets, and CSS-only definitions should be checked in preview before export.