Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.
Just tap on the Convert SVG button, choose your SVG file and you can obtain the resulting Flutter code from the text field below.
If you want to see realworld example input and output, hit the respective buttons underneath. The examples are the ones from the howto.
Flutter code
Howto
This tutorial describes the usage including the SVG creation using an actual example.
Advantages
- No manual dealing with code that creates bezier paths
- The code that is being returned from the converter is designed to be rather readable (no long numbers with high precision) and can thus be edited afterwards
- The converter supports multiple paths at once in the SVG file
- It softens curves a little
- The boundaries of the existing paths are detected automatically. So no values except for the SVG file need to be provided
- Aside from path nodes in the SVG the converter also converts rect and circle nodes
- Colors are recognized from the shapes and find their representation in the output as well
Caveats
- For the converter to properly convert the SVG into a
Pathit is recommended to put everything to (0,0) of the canvas (except for the paths that are supposed to be shifted) - If padding is desired, a rect should be wrapped around everything with the respective padding towards every shape
- Every group in the SVG should be dissolved before the conversion as it can lead to side-effects
Can you add a copy code button?
Great suggestion! Just added the respective button to the top right of the code container.
This is a fantastic tool. Please keep is alive till Flutter dies.
Well I have no reason to shut it down 🙂
Maybe I could make it open source so that people could also run it offline. Will put this on my list.
If you can share your PayPal email I will sponsor you as much as I could afford.
@marc thanks a lot for such a cool tool. Just have an idea: can you please somehow run MyPainter in inside a Flutter app in the web, so every one can preview result painter on the same page? like here : https://api.flutter.dev/flutter/widgets/Form-class.html (where you have a “Run” button)?
@Andriy
Thank you for your feedback. I will look into that when I’m home. Thank you for your suggestion!
The tool is great!, but it doesn’t seem to account for the height of the canvas, which leads to the correct shape, but smaller than it should be.
“`dart
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
Path path = Path();
// Path number 1
paint.color = Color(0xff33455B);
path = Path();
path.lineTo(size.width * 0.41, -0.62);
path.cubicTo(size.width * 0.61, -0.61, size.width * 0.59, -0.4, size.width * 0.69, -0.29);
path.cubicTo(size.width * 0.74, -0.23, size.width * 0.83, -0.18, size.width * 0.85, -0.11);
path.cubicTo(size.width * 0.86, -0.03, size.width * 0.81, size.height * 0.04, size.width * 0.75, size.height * 0.11);
path.cubicTo(size.width * 0.66, size.height / 5, size.width * 0.59, size.height * 0.35, size.width * 0.41, size.height * 0.37);
path.cubicTo(size.width * 0.22, size.height * 0.4, 0, size.height * 0.35, -0.11, size.height * 0.24);
path.cubicTo(-0.21, size.height * 0.14, -0.11, size.height * 0.01, -0.06, -0.11);
path.cubicTo(-0.03, -0.19, size.width * 0.04, -0.24, size.width * 0.1, -0.31);
path.cubicTo(size.width / 5, -0.42, size.width * 0.22, -0.63, size.width * 0.41, -0.62);
path.cubicTo(size.width * 0.41, -0.62, size.width * 0.41, -0.62, size.width * 0.41, -0.62);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
“`
I don’t fully understand your issue.
As you can see, `size.height` does come up in the CustomPainter which means that the height is actually taken into account.
You might need to wrap you CustomPaint widget with a SizedBox to control the height.
I tried it here: https://imgur.com/Fbq5dXZ – this is height 300 and width 300. If I change the height, the proportions change with it.
Hope that helps!
I think it should use the moveTo instead of lineTo command when translating the M directive in svg
You are right. Will change that! Thank you :).
Doesn’t work for all SVGS. For instance: this simple calendar icon renders completely wrong when converted to Flutter:
svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 512 512″
path d=”M446 40h-46V16c0-8.836-7.163-16-16-16s-16 7.164-16 16v24H144V16c0-8.836-7.163-16-16-16s-16 7.164-16 16v24H66C29.607 40 0 69.607 0 106v340c0 36.393 29.607 66 66 66h380c36.393 0 66-29.607 66-66V106c0-36.393-29.607-66-66-66zm34 406c0 18.778-15.222 34-34 34H66c-18.778 0-34-15.222-34-34V181a5 5 0 015-5h438a5 5 0 015 5z”
/svg
(removed HTML tags)
What’s the problem with that? https://ibb.co/MfRYfDR tried it. Looks fine to me
Hello Marc,
This looks awesome, though I have issues with it, my black piano button when converted looks fully gray, lost all 3d defects, here is the svg code:
image/svg+xml
and here how I implemented it in Flutter:
import ‘package:flutter/material.dart’;
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: CustomPaint(
painter: HeaderPainter(),
child: SizedBox(
width: MediaQuery.of(context).size.width, height: 300))),
Align(
alignment: Alignment.bottomLeft,
child: CustomPaint(
painter: FooterPainter(),
child: SizedBox(
width: MediaQuery.of(context).size.width, height: 300))),
],
);
}
}
class HeaderPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
Path path = Path();
// Path number 1
paint.color = Color(0xFFFF5252);
path = Path();
path.lineTo(0, size.height);
path.cubicTo(size.width * 0.09, size.height * 0.93, size.width * 0.11,
size.height * 0.78, size.width * 0.11, size.height * 0.66);
path.cubicTo(size.width * 0.11, size.height * 0.49, size.width * 0.16,
size.height * 0.37, size.width / 4, size.height * 0.28);
path.cubicTo(size.width * 0.36, size.height * 0.23, size.width * 0.54,
size.height * 0.18, size.width * 0.68, size.height * 0.16);
path.cubicTo(size.width * 0.81, size.height * 0.13, size.width * 0.89,
size.height * 0.07, size.width * 0.98, 0);
path.cubicTo(
size.width * 0.94, 0, size.width * 0.86, 0, size.width * 0.84, 0);
path.cubicTo(size.width * 0.56, 0, size.width * 0.28, 0, 0, 0);
path.cubicTo(0, 0, 0, size.height, 0, size.height);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class FooterPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
Path path = Path();
paint.color = Color(0xFFFFAB40).withOpacity(1);
path = Path();
path.lineTo(size.width, size.height / 5);
path.cubicTo(size.width, size.height / 5, size.width * 0.94,
size.height * 0.88, size.width * 0.65, size.height * 0.93);
path.cubicTo(size.width * 0.36, size.height * 0.97, size.width / 5,
size.height, size.width / 5, size.height);
path.cubicTo(size.width / 5, size.height, size.width, size.height,
size.width, size.height);
path.cubicTo(size.width, size.height, size.width, size.height / 5,
size.width, size.height / 5);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Further more, white piano key that should be easier as it doesn’t have any 3d effects, doesn’t work at all…
Here is the code:
image/svg+xml
https://imgur.com/a/wKPrlzR
On the image you can see keys on right are ones I imported as svg in flutter and one on right is what I get when using your converter
Hope you could help me out figure what is wrong and if it is possible at all to have 3d effects using your tool, I guess maybe your converter works just with one layer? and in order to get 3d effect, your converter should be able to convert svg into multiple layers?
Something like this guy is doing when writing by hand 3d looking buttons?
https://www.youtube.com/watch?v=2iMswlPVHFY
Happy holidays
Layers should not be a problem. Gradients though, as I only extract the fill color. Also, groups are a problem. If you ungroup everything, it should work. You can set gradients afterwards.
hii
i am trying some complex svgs to convert but its not giving proper paths can you help me with this??
thanks
Hey!
Sorry for the late response. Sure, just mail me the SVG file and we have a look at what’s the problem.
It’s not works.
The SVG file is there:
https://pastebin.com/L1arSQ2x
You SVG code is very messy. A transformation of -402.445, 166.218. I cleaned up the file and uploaded it: https://pastebin.com/18uGQhfJ. The respective Dart code is also in there.