Flutter SVG Path Converter

main.dart

// Generates canvas drawing commands from an SVG path string

import 'package:path_parsing/path_parsing.dart';

void main(List<String> args) {
    if (args.length < 3) {
        print('Usage: width height path_string');
        return;
    }

    final width = int.parse(args[0]);
    final height = int.parse(args[1]);
    final pathString = args[2];

    print('canvas.drawPath(');
    print('    Path()');

    final FlutterPathProxy pathProxy = FlutterPathProxy(width, height);
    writeSvgPathDataToPath(pathString, pathProxy);

    print(pathProxy.lines.map((x) => '        $x').join('\n') + ',');

    print('    Paint()..color = Colors.black,');
    print(');');
}

class FlutterPathProxy extends PathProxy {
    int width;
    int height;
    List<String> lines;

    FlutterPathProxy(this.width, this.height) {
        this.lines = [];
    }

    @override
    void close() {
        lines.add('..close()');
    }

    @override
    void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) {
        lines.add('..cubicTo(');
        lines.add('    ${x1 / width} * size.width, ${y1 / height} * size.height,');
        lines.add('    ${x2 / width} * size.width, ${y2 / height} * size.height,');
        lines.add('    ${x3 / width} * size.width, ${y3 / height} * size.height,');
        lines.add(')');
    }

    @override
    void lineTo(double x, double y) {
        final s = [
            '${x / width} * size.width',
            '${y / height} * size.height',
        ].join(', ');

        lines.add('..lineTo($s)');
    }

    @override
    void moveTo(double x, double y) {
        final s = [
            '${x / width} * size.width',
            '${y / height} * size.height',
        ].join(', ');

        lines.add('..moveTo($s)');
    }
}

output.dart

// An icon component using canvas drawing commands generated by main.dart

import 'package:flutter/material.dart';

class HeartIcon extends StatelessWidget {
    final Size size;
    final Color color;

    const HeartIcon(this.size, this.color);

    @override
    Widget build(BuildContext context) {
        return CustomPaint(painter: _Painter(color), size: size);
    }
}

class _Painter extends CustomPainter {
    final Color color;

    _Painter(this.color);

    @override
    void paint(Canvas canvas, Size size) {
        canvas.drawPath(
            Path()
                ..moveTo(0.48212272727272726 * size.width, 0.32979882352941176 * size.height)
                ..lineTo(0.7231818181818181 * size.width, 0.01784023529411765 * size.height)
                ..lineTo(0.9642409090909091 * size.width, 0.32979882352941176 * size.height)
                ..lineTo(0.48212272727272726 * size.width, 0.9537176470588236 * size.height)
                ..lineTo(0.000005548636363636365 * size.width, 0.32979882352941176 * size.height)
                ..lineTo(0.24106454545454545 * size.width, 0.01784023529411765 * size.height)
                ..lineTo(0.48212272727272726 * size.width, 0.32979882352941176 * size.height)
                ..close(),
            Paint()..color = color,
        );
    }

    @override
    bool shouldRepaint(_Painter oldDelegate) {
        return oldDelegate.color != this.color;
    }
}