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

@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.

Copy link
Member

@jtmcdole jtmcdole left a comment

Choose a reason for hiding this comment

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

Added a question. Sorry for the delay.

parserState.attribute('cy', def: '0'),
percentageRef: vh,
)!;
// For radius percentage, use the normalized diagonal per SVG spec.
Copy link
Member

Choose a reason for hiding this comment

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

can you link to the spec section?

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.

2 participants