[flutter_svg] Update README with an example to scale images

[androidseb]

Following up on my original PR dnfield/flutter_svg#991 after the suggestion from @darshankawar here.

This is an update to the flutter_svg documentation to include an example of how to scale an SVG image without losing quality, as this is something currently missing from the documentation and causing some confusion.

I believe it resolves the following issues (there might be more since then, the original PR is from 2023, I haven't searched for more):

• After methods deprecation, how can I convert SVG to the bitmap without Widget? dnfield/flutter_svg#858
• Problem with scaling since flutter_svg 2.0 yang-f/flutter_svg_provider#47

Pre-Review Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene page, which explains my responsibilities.
• I read and followed the relevant style guides and ran the auto-formatter.
• I signed the CLA.
• The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
• I linked to at least one issue that this PR fixes in the description above.
• I updated pubspec.yaml with an appropriate new version according to the pub versioning philosophy, or I have commented below to indicate which version change exemption this PR falls under¹.
• I updated CHANGELOG.md to add a description of the change, following repository CHANGELOG style, or I have commented below to indicate which CHANGELOG exemption this PR falls under¹.
• I updated/added any relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or I have commented below to indicate which test exemption this PR falls under¹.
• All existing and new tests are passing.

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. ↩ ↩² ↩³

[flutter-dashboard]

It looks like this pull request may not have tests. Please make sure to add tests or get an explicit test exemption before merging.

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. If you believe this PR qualifies for a test exemption, contact "@test-exemption-reviewer" in the #hackers channel in Discord (don't just cc them here, they won't see it!). The test exemption team is a small volunteer group, so all reviewers should feel empowered to ask for tests, without delegating that responsibility entirely to the test exemption group.

[gemini-code-assist]

Code Review

This pull request updates the documentation to include an example of how to scale an SVG image. The changes are applied to README.md and the corresponding example file readme_excerpts.dart. My review focuses on the clarity of the new example code. While the added example is functionally correct, its presentation as a sequence of operations where variables are reassigned can be confusing. I've suggested an alternative structure that presents the different image creation methods as clear alternatives, improving readability for developers who will use this as a reference.

[gemini-code-assist]

Assigning a value to image and then immediately reassigning it can be confusing in an example, as it might suggest to users that both steps are necessary. To make it clearer that creating an unscaled image and a scaled image are alternative operations, I suggest commenting out the first assignment. This also allows you to use final for the image variable, which is good practice.

Suggested change

	ui.Image image = await pictureInfo.picture.toImage(width, height);
	// Or convert the picture to a scaled image:
	const double targetWidth = 512;
	const double targetHeight = 512;
	final pictureRecorder = ui.PictureRecorder();
	canvas = Canvas(
	pictureRecorder,
	Rect.fromPoints(Offset.zero, const Offset(targetWidth, targetHeight)),
	);
	canvas.scale(
	targetWidth / pictureInfo.size.width,
	targetHeight / pictureInfo.size.height,
	);
	canvas.drawPicture(pictureInfo.picture);
	image = await pictureRecorder.endRecording().toImage(
	targetWidth.ceil(),
	targetHeight.ceil(),
	);
	// To create an unscaled image, you can do:
	// final ui.Image image = await pictureInfo.picture.toImage(width, height);
	// Or convert the picture to a scaled image:
	const double targetWidth = 512;
	const double targetHeight = 512;
	final pictureRecorder = ui.PictureRecorder();
	canvas = Canvas(
	pictureRecorder,
	Rect.fromPoints(Offset.zero, const Offset(targetWidth, targetHeight)),
	);
	canvas.scale(
	targetWidth / pictureInfo.size.width,
	targetHeight / pictureInfo.size.height,
	);
	canvas.drawPicture(pictureInfo.picture);
	final ui.Image image = await pictureRecorder.endRecording().toImage(
	targetWidth.ceil(),
	targetHeight.ceil(),
	);

[gemini-code-assist]

Assigning a value to image and then immediately reassigning it can be confusing in an example, as it might suggest to users that both steps are necessary. To make it clearer that creating an unscaled image and a scaled image are alternative operations, I suggest commenting out the first assignment. This also allows you to use final for the image variable, which is good practice.

Suggested change

	ui.Image image = await pictureInfo.picture.toImage(width, height);
	// Or convert the picture to a scaled image:
	const double targetWidth = 512;
	const double targetHeight = 512;
	final pictureRecorder = ui.PictureRecorder();
	canvas = Canvas(
	pictureRecorder,
	Rect.fromPoints(Offset.zero, const Offset(targetWidth, targetHeight)),
	);
	canvas.scale(
	targetWidth / pictureInfo.size.width,
	targetHeight / pictureInfo.size.height,
	);
	canvas.drawPicture(pictureInfo.picture);
	image = await pictureRecorder.endRecording().toImage(
	targetWidth.ceil(),
	targetHeight.ceil(),
	);
	// To create an unscaled image, you can do:
	// final ui.Image image = await pictureInfo.picture.toImage(width, height);
	// Or convert the picture to a scaled image:
	const double targetWidth = 512;
	const double targetHeight = 512;
	final pictureRecorder = ui.PictureRecorder();
	canvas = Canvas(
	pictureRecorder,
	Rect.fromPoints(Offset.zero, const Offset(targetWidth, targetHeight)),
	);
	canvas.scale(
	targetWidth / pictureInfo.size.width,
	targetHeight / pictureInfo.size.height,
	);
	canvas.drawPicture(pictureInfo.picture);
	final ui.Image image = await pictureRecorder.endRecording().toImage(
	targetWidth.ceil(),
	targetHeight.ceil(),
	);

[domesticmouse]

The Gemini Code Assist review concern is valid, please address