Skip to content
DevPenh

SVG to Flutter CustomPainter

Paste an SVG icon, or just its path data, and get a Flutter CustomPainter with the paths, colours and strokes as Dart code. No package is needed in your app.

How to use the output

CustomPaint(
  size: const Size(48, 48),
  painter: const IconPainter(),
)

The painter scales the SVG's viewBox to the size you give it and centres it, like a browser does by default (preserveAspectRatio="xMidYMid meet"). Without a viewBox, the width and height attributes are used, and for bare path data the path's own bounds.

CustomPainter or flutter_svg?

To show many SVG files as they are, the flutter_svg package is usually simpler. Generated painter code is useful when you want no extra dependency, need to change or animate individual paths, or want to clip or hit-test with a Path.

What is converted

  • <path> with every command (M L H V C S Q T A Z, absolute and relative, compact numbers such as .5.5 and arc flags such as 0110), and <rect> (including rounded corners), <circle>, <ellipse>, <line>, <polyline> and <polygon>.
  • Arcs become Flutter's arcToPoint, which uses the same endpoint parameters as SVG; smooth curves (S, T) are expanded to full curves.
  • Fill and stroke colours (hex, rgb(), hsl(), names), fill-rule, stroke width, caps, joins and miter limit, and opacity, fill-opacity and stroke-opacity, from attributes or inline style, inherited through <g> groups.
  • transform on any element (matrix, translate, scale, rotate, skewX, skewY), applied with canvas.transform.

What is not converted

The tool lists anything it skipped. In particular:

  • Gradients and patterns (url(#…)): the shape uses its fallback colour, if any. Add a Shader by hand.
  • Text: convert text to paths in your editor first (Inkscape: Path → Object to Path; Figma: Outline stroke or Flatten).
  • <use>, <image>, clip-path, mask, filters, markers, dashed strokes and CSS in <style> blocks or classes.
  • currentColor is drawn black. Group opacity is applied to each shape separately, so overlapping shapes inside a translucent group look slightly different.

Colours in the output are Color(0xAARRGGBB) literals; the Flutter Color converter explains the format and converts single colours.

How the output was checked

Twelve test SVGs covering every path command, arcs with each flag combination, rotated and too-small radii, all basic shapes, nested transforms, inherited styles, opacity, evenodd, an offset viewBox, and Figma and Inkscape exports were converted, drawn by the generated painters on Flutter 3.47.7, and compared pixel by pixel with Chrome's rendering of the same files at 200 × 200 px. At most 0.6% of pixels differed, all on anti-aliased edges, with no pixel differing strongly. The generated code passes flutter analyze with flutter_lints and prefer_const_constructors (2026-10-30).