Skip to content

Complex SVGs with gradients or transforms fail to normalize correctly #2

@dconroy

Description

@dconroy

Uploading complex SVG logos, especially those with gradients, filters, or specific transform hierarchies, often results in broken or incorrectly rendered output. The normalization process attempts to preserve defs and styles but might be stripping or mishandling specific attributes or coordinate systems.

Current Context:
src/core/svgNormalize.ts attempts a "minimally destructive" approach by wrapping content in a with a calculated transform.
It relies on getBBox() which can be unreliable or inconsistent across browsers for complex shapes or hidden elements.
It copies and <style> blocks but might miss references or context dependencies (e.g., url(#id) references breaking if IDs clash or are scoped incorrectly).

Reproduction:
Upload an SVG with a linear or radial gradient.
Observe if the gradient renders correctly in the preview or if it disappears/flattens.
Upload an SVG with complex group transforms.
Check if the centering/scaling logic correctly identifies the visible bounds.

Proposed Solution:
Improve getBBox fallback logic to better handle complex hierarchies.
Ensure all ID references in url(...) are preserved and unique to avoid conflicts.
Verify that defs are correctly cloned and accessible to the content in the new structure.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions