DevForge

SVG to Flutter

Shipping an icon in Flutter without adding a runtime SVG parser means expressing it as canvas calls. This converts the markup into a CustomPainter: every path is replayed as moveTo, lineTo and cubicTo, group transforms are flattened into the coordinates, and the viewBox is fitted with a uniform centred scale.

svg
flutter
options
target
preview

Paste or drop an SVG to preview it.

how to use it

  1. 01Paste SVG markup or drop an .svg file.
  2. 02Name the painter class.
  3. 03Copy the Dart into your project and use the generated widget.

questions

Why flatten the transforms?
Canvas state is imperative, so carrying nested group transforms would mean interleaving save and restore calls. Folding them into the coordinates keeps the painter flat and readable.
How are colors written?
As ARGB literals in the form 0xAARRGGBB, which is what Flutter's Color constructor takes.
Does it scale to any size?
Yes. The painter computes a uniform scale from the size it is given and centres the result, matching the default xMidYMid behaviour of SVG.

related