From df3271f1f25a912be2d871235d727db527f430e1 Mon Sep 17 00:00:00 2001 From: androidseb Date: Mon, 1 Dec 2025 23:24:23 +0100 Subject: [PATCH 1/2] 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 aa87cf2dd02..a85546590b8 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 aa28285dff1..ba614e54c40 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/2] 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 a85546590b8..868fc8250fb 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 ba614e54c40..1bc3e21a0a5 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