SVG to Flutter path converter

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.

Convert SVG
Example input
Example output
Copy code
            

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 Path it 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

Also interesting

If you like what you’ve read, feel free to support me:

🥗Buy me a salad

9 thoughts on “SVG to Flutter path converter”

  1. 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;
    }
    }
    “`

    Reply
    • 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!

      Reply

Leave a Comment