From df3271f1f25a912be2d871235d727db527f430e1 Mon Sep 17 00:00:00 2001 From: androidseb Date: Mon, 1 Dec 2025 23:24:23 +0100 Subject: [PATCH 1/6] Update flutter_svg README with an example to scale images --- third_party/packages/flutter_svg/README.md | 20 ++++++++++++++++- .../example/lib/readme_excerpts.dart | 22 +++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/third_party/packages/flutter_svg/README.md b/third_party/packages/flutter_svg/README.md index aa87cf2dd023..a85546590b89 100644 --- a/third_party/packages/flutter_svg/README.md +++ b/third_party/packages/flutter_svg/README.md @@ -122,7 +122,25 @@ import 'dart:ui' as ui; canvas.drawPicture(pictureInfo.picture); // Or convert the picture to an image: - final ui.Image image = await pictureInfo.picture.toImage(width, height); + 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(), + ); pictureInfo.picture.dispose(); ``` diff --git a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart index aa28285dff12..ba614e54c403 100644 --- a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart +++ b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart @@ -79,7 +79,7 @@ Widget loadPrecompiledAsset() { /// Demonstrates converting SVG to another type. Future convertSvgOutput() async { - final canvas = Canvas(ui.PictureRecorder()); + var canvas = Canvas(ui.PictureRecorder()); const width = 100; const height = 100; @@ -94,7 +94,25 @@ Future convertSvgOutput() async { canvas.drawPicture(pictureInfo.picture); // Or convert the picture to an image: - final ui.Image image = await pictureInfo.picture.toImage(width, height); + 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(), + ); pictureInfo.picture.dispose(); // #enddocregion OutputConversion From 1618e263a1f17d575f5aa1dc9a44a23c0734b97c Mon Sep 17 00:00:00 2001 From: androidseb Date: Sun, 7 Dec 2025 16:25:20 +0100 Subject: [PATCH 2/6] Extracted scaling example into its own dedicated example section --- third_party/packages/flutter_svg/README.md | 29 ++++++++++++--- .../example/lib/readme_excerpts.dart | 35 ++++++++++++++----- 2 files changed, 51 insertions(+), 13 deletions(-) diff --git a/third_party/packages/flutter_svg/README.md b/third_party/packages/flutter_svg/README.md index a85546590b89..868fc8250fb0 100644 --- a/third_party/packages/flutter_svg/README.md +++ b/third_party/packages/flutter_svg/README.md @@ -122,22 +122,41 @@ import 'dart:ui' as ui; canvas.drawPicture(pictureInfo.picture); // Or convert the picture to an image: - ui.Image image = await pictureInfo.picture.toImage(width, height); + final ui.Image image = await pictureInfo.picture.toImage(width, height); - // Or convert the picture to a scaled image: + pictureInfo.picture.dispose(); +``` + +or if you want to scale it, you can do something like: + + +```dart +import 'dart:ui' as ui; + +// ··· + const rawSvg = '''...'''; + final PictureInfo pictureInfo = await vg.loadPicture( + const SvgStringLoader(rawSvg), + null, + ); + + // You can convert the picture to a scaled image: const double targetWidth = 512; const double targetHeight = 512; final pictureRecorder = ui.PictureRecorder(); - canvas = Canvas( + final canvas = Canvas( pictureRecorder, - Rect.fromPoints(Offset.zero, const Offset(targetWidth, targetHeight)), + 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( + final ui.Image scaledImage = await pictureRecorder.endRecording().toImage( targetWidth.ceil(), targetHeight.ceil(), ); diff --git a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart index ba614e54c403..1bc3e21a0a5e 100644 --- a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart +++ b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart @@ -6,9 +6,11 @@ // intended for use as an actual example application. // #docregion OutputConversion +// #docregion OutputScaling import 'dart:ui' as ui; // #enddocregion OutputConversion +// #enddocregion OutputScaling import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; @@ -79,7 +81,7 @@ Widget loadPrecompiledAsset() { /// Demonstrates converting SVG to another type. Future convertSvgOutput() async { - var canvas = Canvas(ui.PictureRecorder()); + final canvas = Canvas(ui.PictureRecorder()); const width = 100; const height = 100; @@ -94,29 +96,46 @@ Future convertSvgOutput() async { canvas.drawPicture(pictureInfo.picture); // Or convert the picture to an image: - ui.Image image = await pictureInfo.picture.toImage(width, height); + final ui.Image image = await pictureInfo.picture.toImage(width, height); - // Or convert the picture to a scaled image: + pictureInfo.picture.dispose(); + // #enddocregion OutputConversion + return image; +} + +/// Demonstrates scaling SVG to a larger image +Future scaleSvgOutput() async { + // #docregion OutputScaling + const rawSvg = '''...'''; + final PictureInfo pictureInfo = await vg.loadPicture( + const SvgStringLoader(rawSvg), + null, + ); + + // You can convert the picture to a scaled image: const double targetWidth = 512; const double targetHeight = 512; final pictureRecorder = ui.PictureRecorder(); - canvas = Canvas( + final canvas = Canvas( pictureRecorder, - Rect.fromPoints(Offset.zero, const Offset(targetWidth, targetHeight)), + 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( + final ui.Image scaledImage = await pictureRecorder.endRecording().toImage( targetWidth.ceil(), targetHeight.ceil(), ); pictureInfo.picture.dispose(); - // #enddocregion OutputConversion - return image; + // #enddocregion OutputScaling + return scaledImage; } // #docregion ColorMapper From 89b9140913b2aa191349c56df44eab35f99062b9 Mon Sep 17 00:00:00 2001 From: androidseb Date: Mon, 9 Feb 2026 19:51:16 +0100 Subject: [PATCH 3/6] Reduced scaling README example to integrate to existing example code --- third_party/packages/flutter_svg/README.md | 40 ++----------------- .../example/lib/readme_excerpts.dart | 40 ++----------------- 2 files changed, 6 insertions(+), 74 deletions(-) diff --git a/third_party/packages/flutter_svg/README.md b/third_party/packages/flutter_svg/README.md index 868fc8250fb0..4320cdbe1da5 100644 --- a/third_party/packages/flutter_svg/README.md +++ b/third_party/packages/flutter_svg/README.md @@ -118,6 +118,9 @@ import 'dart:ui' as ui; null, ); + // You can scale the canvas to achieve lossless scaling + canvas.scale(1.2, 1.2); + // You can draw the picture to a canvas: canvas.drawPicture(pictureInfo.picture); @@ -127,43 +130,6 @@ import 'dart:ui' as ui; pictureInfo.picture.dispose(); ``` -or if you want to scale it, you can do something like: - - -```dart -import 'dart:ui' as ui; - -// ··· - const rawSvg = '''...'''; - final PictureInfo pictureInfo = await vg.loadPicture( - const SvgStringLoader(rawSvg), - null, - ); - - // You can convert the picture to a scaled image: - const double targetWidth = 512; - const double targetHeight = 512; - final pictureRecorder = ui.PictureRecorder(); - final 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 scaledImage = await pictureRecorder.endRecording().toImage( - targetWidth.ceil(), - targetHeight.ceil(), - ); - - pictureInfo.picture.dispose(); -``` - The `SvgPicture` helps to automate this logic, and it provides some convenience wrappers for getting assets from multiple sources. diff --git a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart index 1bc3e21a0a5e..798dd3b30dc7 100644 --- a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart +++ b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart @@ -6,11 +6,9 @@ // intended for use as an actual example application. // #docregion OutputConversion -// #docregion OutputScaling import 'dart:ui' as ui; // #enddocregion OutputConversion -// #enddocregion OutputScaling import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; @@ -92,6 +90,9 @@ Future convertSvgOutput() async { null, ); + // You can scale the canvas to achieve lossless scaling + canvas.scale(1.2, 1.2); + // You can draw the picture to a canvas: canvas.drawPicture(pictureInfo.picture); @@ -103,41 +104,6 @@ Future convertSvgOutput() async { return image; } -/// Demonstrates scaling SVG to a larger image -Future scaleSvgOutput() async { - // #docregion OutputScaling - const rawSvg = '''...'''; - final PictureInfo pictureInfo = await vg.loadPicture( - const SvgStringLoader(rawSvg), - null, - ); - - // You can convert the picture to a scaled image: - const double targetWidth = 512; - const double targetHeight = 512; - final pictureRecorder = ui.PictureRecorder(); - final 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 scaledImage = await pictureRecorder.endRecording().toImage( - targetWidth.ceil(), - targetHeight.ceil(), - ); - - pictureInfo.picture.dispose(); - // #enddocregion OutputScaling - return scaledImage; -} - // #docregion ColorMapper class _MyColorMapper extends ColorMapper { const _MyColorMapper(); From 357771e05b50ecb3c2c42f2ef010ee2002c127ac Mon Sep 17 00:00:00 2001 From: androidseb Date: Mon, 9 Feb 2026 20:18:03 +0100 Subject: [PATCH 4/6] Updated changelog --- third_party/packages/flutter_svg/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/third_party/packages/flutter_svg/CHANGELOG.md b/third_party/packages/flutter_svg/CHANGELOG.md index 1036f995e693..5af43ba4a409 100644 --- a/third_party/packages/flutter_svg/CHANGELOG.md +++ b/third_party/packages/flutter_svg/CHANGELOG.md @@ -1,3 +1,7 @@ +## 2.2.4 + +* Updates README with example to scale SVG without losing quality + ## 2.2.3 * Replaces use of deprecated Color.value. From e747522032d022fe51b7e9c00c3928682b279ca2 Mon Sep 17 00:00:00 2001 From: androidseb Date: Mon, 9 Feb 2026 20:26:59 +0100 Subject: [PATCH 5/6] Updated version in pubspec.yaml --- third_party/packages/flutter_svg/pubspec.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/third_party/packages/flutter_svg/pubspec.yaml b/third_party/packages/flutter_svg/pubspec.yaml index 6aabe135fe0d..4a33a0bef584 100644 --- a/third_party/packages/flutter_svg/pubspec.yaml +++ b/third_party/packages/flutter_svg/pubspec.yaml @@ -2,7 +2,7 @@ name: flutter_svg description: An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files. repository: https://github.com/flutter/packages/tree/main/third_party/packages/flutter_svg issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+flutter_svg%22 -version: 2.2.3 +version: 2.2.4 environment: sdk: ^3.8.0 From d6aa145291bc86e80508521e6236183d6aa61f43 Mon Sep 17 00:00:00 2001 From: androidseb Date: Mon, 9 Feb 2026 22:48:54 +0100 Subject: [PATCH 6/6] Added missing colon characters --- third_party/packages/flutter_svg/README.md | 2 +- .../packages/flutter_svg/example/lib/readme_excerpts.dart | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/third_party/packages/flutter_svg/README.md b/third_party/packages/flutter_svg/README.md index 4320cdbe1da5..2a0d50d2b474 100644 --- a/third_party/packages/flutter_svg/README.md +++ b/third_party/packages/flutter_svg/README.md @@ -118,7 +118,7 @@ import 'dart:ui' as ui; null, ); - // You can scale the canvas to achieve lossless scaling + // You can scale the canvas to achieve lossless scaling: canvas.scale(1.2, 1.2); // You can draw the picture to a canvas: diff --git a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart index 798dd3b30dc7..61c91d58fcb3 100644 --- a/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart +++ b/third_party/packages/flutter_svg/example/lib/readme_excerpts.dart @@ -90,7 +90,7 @@ Future convertSvgOutput() async { null, ); - // You can scale the canvas to achieve lossless scaling + // You can scale the canvas to achieve lossless scaling: canvas.scale(1.2, 1.2); // You can draw the picture to a canvas: