[vector_graphics_compiler] support percentage units SVG shape attributes by stevenctl · Pull Request #10577 · flutter/packages

stevenctl · 2025-12-06T15:53:03Z

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.

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

Signed-off-by: Steven Landow <steven@landow.dev>

gemini-code-assist

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.

packages/vector_graphics_compiler/lib/src/svg/numbers.dart

jtmcdole

Added a question. Sorry for the delay.

jtmcdole · 2026-01-08T19:14:28Z

packages/vector_graphics_compiler/lib/src/svg/parser.dart

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


can you link to the spec section?

stuartmorgan-g · 2026-01-09T18:05:19Z

packages/vector_graphics_compiler/lib/src/svg/numbers.dart


+  // Handle percentage values first.
+  // Check inline to avoid circular import with parsers.dart.
+  final bool isPercent = rawDouble?.endsWith('%') ?? false;


Is the provided rawDouble guaranteed to be trimmed? It seems like it would be safer to trim before doing this check.

Good catch!

stuartmorgan-g · 2026-01-09T18:06:52Z

packages/vector_graphics_compiler/lib/src/svg/numbers.dart

+  final bool isPercent = rawDouble?.endsWith('%') ?? false;
+  if (isPercent) {
+    if (percentageRef == null || percentageRef.isInfinite) {
+      // If no reference dimension is available, treat as 0.


This says "treat as 0", but it returns null, not 0, so it's not clear to me what this comment means.

I ended up changing it and forgot to update the comment.

stuartmorgan-g · 2026-01-09T18:09:45Z

packages/vector_graphics_compiler/CHANGELOG.md

See https://github.com/flutter/flutter/blob/master/docs/ecosystem/contributing/README.md#updating-a-changelog-that-has-a-next for why CI is failing the changelog check.

I should probably revert the pubspec version change, right?

Which of the version change exemptions do you believe this change falls under?

nvm misread your guide

stevenctl · 2026-02-04T15:55:45Z

I think this is good to go now

stuartmorgan-g

LGTM

stuartmorgan-g · 2026-02-18T18:08:40Z

@jtmcdole FYI this is still waiting on an engine team approval to land.

jtmcdole · 2026-02-18T18:17:02Z

Should this technically have been a minor bump in symver?

MINOR version when you add functionality in a backward compatible manner

stuartmorgan-g · 2026-02-18T18:19:43Z

Yeah, probably. There's a lot of grey area in minor vs bugfix when the API itself doesn't change, but this does make more sense as a minor version. I'll adjust it.

…pe attributes (flutter/packages#10577)

flutter/packages@59f905c...9da22bf 2026-02-19 mit@google.com [cupertino_ui, material_ui] Fix capitalization in README section headers (flutter/packages#11058) 2026-02-18 engine-flutter-autoroll@skia.org Manual roll Flutter from 6e4a481 to c023e5b (17 revisions) (flutter/packages#11060) 2026-02-18 steven@landow.dev [vector_graphics_compiler] support percentage units SVG shape attributes (flutter/packages#10577) 2026-02-18 stuartmorgan@google.com [local_auth] Convert example app to Swift (flutter/packages#11003) 2026-02-18 stuartmorgan@google.com [ci] Fix syntax error in auto-labeler (flutter/packages#11052) 2026-02-18 github-admin@google.com Refactor Github Action per b/485167538 (flutter/packages#11051) 2026-02-18 katelovett@google.com [material_ui] Add material_ui package (flutter/packages#11043) 2026-02-18 katelovett@google.com [cupertino_ui] Add cupertino_ui package (flutter/packages#11042) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages-flutter-autoroll Please CC flutter-ecosystem@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

vector_graphics_compiler: support percentage units SVG shape attributes

885b5d0

Signed-off-by: Steven Landow <steven@landow.dev>

stevenctl requested a review from jtmcdole as a code owner December 6, 2025 15:53

github-actions bot added p: vector_graphics triage-engine Should be looked at in engine triage labels Dec 6, 2025

gemini-code-assist bot reviewed Dec 6, 2025

View reviewed changes

packages/vector_graphics_compiler/lib/src/svg/numbers.dart Outdated Show resolved Hide resolved

jtmcdole reviewed Jan 8, 2026

View reviewed changes

stuartmorgan-g requested changes Jan 9, 2026

View reviewed changes

stevenctl added 8 commits January 9, 2026 11:58

Merge branch 'main' into stevenctl/svg-percentages

55f937b

fix changelog

ad34f30

trim input and fix misleading comment

afc54b8

update reference to SVG spec

dd15893

add type to var in test

f51fb5b

Merge branch 'main' into stevenctl/svg-percentages

ae3ec27

Merge branch 'main' into stevenctl/svg-percentages

841f27d

bump version

b260547

stuartmorgan-g approved these changes Feb 4, 2026

View reviewed changes

jtmcdole approved these changes Feb 18, 2026

View reviewed changes

Merge branch 'main' into stevenctl/svg-percentages

7146bdd

stuartmorgan-g added 3 commits February 18, 2026 13:20

Update version in CHANGELOG.md

6c824c3

Update version in pubspec.yaml

e6be8ea

Merge branch 'main' into stevenctl/svg-percentages

dc39f60

stuartmorgan-g added autosubmit Merge PR when tree becomes green via auto submit App and removed triage-engine Should be looked at in engine triage labels Feb 18, 2026

auto-submit bot merged commit 6e02708 into flutter:main Feb 18, 2026
81 checks passed

github-actions bot added the triage-engine Should be looked at in engine triage label Feb 18, 2026

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Feb 19, 2026

6e027081c [vector_graphics_compiler] support percentage units SVG sha…

51266f5

…pe attributes (flutter/packages#10577)

engine-flutter-autoroll mentioned this pull request Feb 19, 2026

Roll Packages from 59f905ced6b8 to 9da22bf24a36 (8 revisions) flutter/flutter#182611

Merged

Comments

Conversation

stevenctl commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-Review Checklist

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

jtmcdole left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stevenctl commented Feb 4, 2026

Uh oh!

stuartmorgan-g left a comment

Choose a reason for hiding this comment

Uh oh!

stuartmorgan-g commented Feb 18, 2026

Uh oh!

jtmcdole commented Feb 18, 2026

Uh oh!

stuartmorgan-g commented Feb 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

stevenctl commented Dec 6, 2025 •

edited

Loading