Micro Tools
Advertisement

SVG to Flutter

Paste SVG and convert its shapes into Flutter CustomPainter Dart code. Rects, circles, paths and polygons become canvas draw calls with matching colors.

SVG to Flutter

Paste SVG markup below.

Advertisement

How the conversion works

Each SVG shape is translated to canvas calls: rect becomes addRect, circle becomes addOval with Rect.fromCircle, and path data commands like M, L, C and Z become moveTo, lineTo, cubicTo and close. Fill and stroke colors turn into Paint objects, and everything is wrapped in a SvgIconPainter class.

When CustomPainter beats flutter_svg

The flutter_svg package is great for asset files, but CustomPainter code needs no assets, no package and no async loading. It is ideal for small icons drawn in code, animated painters and packages that must stay dependency free.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

SVG to Flutter FAQs

Which SVG shapes are supported?
Rect, circle, ellipse, line, polyline, polygon and path are converted. Path commands M, L, H, V, C, Q and Z are supported; arcs (A) and smooth curves (S, T) are skipped.
Are gradients supported?
No. Only flat fill and stroke colors convert. Replace gradients with solid colors before converting, or add a Gradient paint manually afterwards.
How are colors converted?
Hex colors become Color(0xFFRRGGBB) and common color names map to Colors constants. Unsupported formats get a comment so you can fix them by hand.
How do I use the output?
Paste the class into your Dart file and use CustomPaint(painter: SvgIconPainter(), size: Size(24, 24)) wherever you need the icon.
Is my SVG uploaded?
No. Conversion runs entirely in your browser, so your artwork never leaves your device.
Advertisement