Fix SVG dimension bug - apply configured width/height to SVG output

[man8]

Fix SVG viewBox preservation for proper content scaling

Summary

This PR fixes a critical bug where SVGs were only getting container dimension changes (width/height attributes) but not actual content scaling. The issue occurred because SVGO optimization was removing viewBox attributes before they could be preserved, causing content to remain at original coordinates while only container dimensions changed.

Root cause: SVGO's preset-default configuration includes removeViewBox: true, which stripped viewBox attributes during optimization, preventing proper content scaling.

Solution:

1. Configure SVGO to preserve viewBox attributes by disabling removeViewBox in preset overrides
2. Enhance applySvgAttributes method to preserve original viewBox when applying new dimensions
3. Add comprehensive test coverage for viewBox preservation scenarios

Review & Testing Checklist for Human

• Test end-to-end with real SVG files - Verify that SVG content actually scales proportionally when dimensions change, not just container margins
• Check file size impact - Compare output file sizes before/after to ensure SVGO config change doesn't significantly bloat files
• Test backwards compatibility - Verify existing SVG processing workflows still work correctly with the viewBox preservation changes
• Test edge cases - Try SVGs without original viewBox, malformed SVGs, and complex SVG structures to ensure robust handling

Recommended test plan: Use the test SVG in /tmp/svg-test/ and generate variants with different dimensions to visually confirm content scales rather than just adding margins.

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TB
    CLI["cli/index.js"]
    IP["src/processors/<br/>image-processor.ts"]:::major-edit
    Tests["src/__tests__/<br/>svg-dimensions.test.ts"]:::minor-edit
    SVGO["SVGO Optimization"]
    Output["SVG Output Files"]
    
    CLI --> IP
    IP --> SVGO
    SVGO --> Output
    Tests --> IP
    
    IP -- "processSvgOutput:<br/>Configure SVGO to preserve viewBox" --> SVGO
    IP -- "applySvgAttributes:<br/>Preserve original viewBox" --> Output
    
    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit  
        L3[Context/No Edit]:::context
    end

classDef major-edit fill:#90EE90
classDef minor-edit fill:#ADD8E6
classDef context fill:#FFFFFF

Loading

Notes

• Performance trade-off: Disabling removeViewBox in SVGO may result in slightly larger file sizes, but this is necessary for proper scaling functionality
• DOM parsing dependency: The fix relies on jsdom for SVG manipulation - any jsdom parsing failures will fall back to original content
• All CI checks passing: 13/13 checks across multiple platforms (Ubuntu, macOS, Windows) and Node.js versions (18, 20, 22)

Session requested by: Louis Mandelstam (@man8)
Devin session: https://app.devin.ai/sessions/af8a710843d14c529ba7cbb4f4981b57

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[cursor]

Bug: SVG Parsing Overwrites Dimensions Incorrectly

The parseSvgConfig method incorrectly overrides width and height values from variant.svg with undefined when variant.width or variant.height are not explicitly set. This occurs because width: variant.width and height: variant.height are unconditionally assigned after spreading variant.svg, preventing svg-level dimensions from being used as fallbacks. This behavior is inconsistent with how other properties handle fallbacks.

src/processors/image-processor.ts#L560-L563

assetmill/src/processors/image-processor.ts

Lines 560 to 563 in 4a6498d

	colorTransforms: variant.colorTransforms || variant.svg?.colorTransforms,
	width: variant.width,
	height: variant.height
	};

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎