Skip to content

Conversation

@stevenctl
Copy link

@stevenctl stevenctl commented Dec 6, 2025

Adds percentage unit support for SVG shape attributes

SVG shapes like <rect>, <circle>, <ellipse>, and <line> can have percentage values for their position and size attributes (e.g., width="50%", cx="50%"). Previously
these weren't handled correctly. Easy to test with any image like https://placeholdit.com/600x400/dddddd/999999

This adds:

  • Percentage parsing in parseDoubleWithUnits that resolves values against the viewport dimensions
  • Viewport width/height getters on SvgParser
  • Proper percentage reference handling for all basic shape elements
  • Circle radius uses the normalized diagonal per SVG spec

List which issues are fixed by this PR. You must list at least one issue.

I'm not sure if it fixes these issues, as they have no description. I can file a new issue if needed.

flutter/flutter#158844
flutter/flutter#158845

Pre-Review Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

Footnotes

  1. Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling. 2 3

Signed-off-by: Steven Landow <steven@landow.dev>
@stevenctl stevenctl requested a review from jtmcdole as a code owner December 6, 2025 15:53
@github-actions github-actions bot added p: vector_graphics triage-engine Should be looked at in engine triage labels Dec 6, 2025
Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request adds support for percentage units in SVG shape attributes like rect, circle, ellipse, and line, which is a valuable feature. The changes correctly resolve percentage values against the viewport dimensions, and the circle radius calculation correctly uses the normalized diagonal as per the SVG specification. The addition of new tests to verify this functionality is also great. I've found a minor issue with a misleading comment in the new percentage parsing logic and have suggested a correction to improve clarity. Overall, the changes are well-implemented.

Comment on lines +81 to +83
// If no reference dimension is available, treat as 0.
// This maintains backwards compatibility for cases where
// percentages can't be resolved.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The comment here is a bit misleading. The code doesn't treat unresolved percentages as 0; it either returns null or throws a FormatException. Also, this is a change in behavior from before, where 50% would be parsed as 50.0, so the claim of maintaining backwards compatibility isn't quite accurate (though the new behavior is more correct). I suggest updating the comment to more accurately reflect the code's logic and the SVG specification's requirements.

Suggested change
// If no reference dimension is available, treat as 0.
// This maintains backwards compatibility for cases where
// percentages can't be resolved.
// If no reference dimension is available, the percentage cannot be resolved.
// Per the SVG specification, this is an error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p: vector_graphics triage-engine Should be looked at in engine triage

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant