-
Notifications
You must be signed in to change notification settings - Fork 448
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
After methods deprecation, how can I convert SVG to the bitmap without Widget? #858
Comments
Looks like this got lost in the readme updates. I'll add it back. In the mean time here is a code snippet that should work:
|
Thank you very much for the prompt response, now it works! Although I still have some issues when I switch from 1.1.6 to 2.0.1 which disappear when switch back, I'm still not ready to blame flutter_svg in this, it is probably my bug. If not, I'll reopen this issue with further details o create a new one. |
A quick follow up. In order to render SVG into destination bitmap dimensions I had to write the following code:
Is there any chance to avoid this intermediate step and get the desired picture size after loadPicture? If not, may be it would be worthful to make some public method for this or additional Size parameter? Just because SVG -> scale -> bitmap case is something essential and the "scale" part should not lead to reinvent the wheel :) Actually, that's why my code worked fine in 1.1.6, so for 2.x it is also a question of the backward compatibility. Thank you! |
This works but would love to get |
This only really "works" if you're scaling down your SVG image, but if you're looking to scale it up, you will lose quality and your picture will become pixelated. I have not found a way to achieve this without quality loss at this time... It seems like the only way to achieve this would be with a library change, maybe adding a SvgStringLoader('<xml... </xml>', size: Size(500,500)) or final pictureInfo = await vg.loadPicture(SvgStringLoader(...), size: Size(500,500)); Or maybe it is possible through some other way that I have not found? Anybody found a way to achieve this without losing picture quality when scaling up the SVG image? |
If the original svg view is too large, the generatd image may take a lot of memory. It will be nice to have a size option when loading the picture. |
same issue. why isn't it simple to convert an svg to an image with a size? Do we have to edit the svg to fix the size? |
jovial_svg works well:
|
Also, |
Build context is nullable. |
I struggled to get this working, but @FaFre's response helped me figure it out. I'll post my full code sample here in case it helps - I wanted to convert an SVG string to PNG bytes, but you can adapt the code and grab intermediary results to suit your needs: // With the following imports:
// import 'dart:typed_data';
// import 'dart:ui' as ui;
// import 'package:flutter/widgets.dart';
// import 'package:flutter_svg/flutter_svg.dart';
Future<Uint8List> svgStringToPngBytes(
// The SVG string
String svgStringContent,
// The target width of the output image
double targetWidth,
// The target height of the output image
double targetHeight,
) async {
final SvgStringLoader svgStringLoader = SvgStringLoader(svgStringContent);
final PictureInfo pictureInfo = await vg.loadPicture(svgStringLoader, null);
final ui.Picture picture = pictureInfo.picture;
final ui.PictureRecorder recorder = ui.PictureRecorder();
final ui.Canvas canvas = Canvas(recorder, Rect.fromPoints(Offset.zero, Offset(targetWidth, targetHeight)));
canvas.scale(targetWidth / pictureInfo.size.width, targetHeight / pictureInfo.size.height);
canvas.drawPicture(picture);
final ui.Image imgByteData = await recorder.endRecording().toImage(targetWidth.ceil(), targetHeight.ceil());
final ByteData? bytesData = await imgByteData.toByteData(format: ui.ImageByteFormat.png);
final Uint8List imageData = bytesData?.buffer.asUint8List() ?? Uint8List(0);
pictureInfo.picture.dispose();
return imageData;
} We get a nicely non-pixelated vector-scaled PNG image out of this, even if the SVG image was smaller than the specified target size. As mentioned in the 2.0.0 release notes, from what I can see (note it's specific to my setup), the performance has improved significantly: I've benchmarked running that specific function 1000 times on a specific image in debug mode, and what used to take 2 seconds now takes about 1.5 seconds. I've created a PR to improve the documentation and help people find how to scale the SVG images here. I'm hopeful that with this clarification, we could resolve/close this issue... I hope this helps! |
Hello,
For versions 1.1.6 and below I used the following code to convert SVG to Image:
Now this approach is deprecated, but I still need to get a bitmap from SVG bypassing Widget. Any idea how to accomplish this?
Thank you!
The text was updated successfully, but these errors were encountered: