Canvas docs are unclear / confusing

[shamilovtim]

These are the docs to make an SVG canvas compatible:

import 'package:flutter_svg/flutter_svg.dart';
final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

// If you only want the final Picture output, just use
final Picture picture = svgRoot.toPicture();

// Otherwise, if you want to draw it to a canvas:
// Optional, but probably normally desirable: scale the canvas dimensions to
// the SVG's viewbox
svgRoot.scaleCanvasToViewBox(canvas);

// Optional, but probably normally desireable: ensure the SVG isn't rendered
// outside of the viewbox bounds
svgRoot.clipCanvasToViewBox(canvas);
svgRoot.draw(canvas, size);

I'm not understanding several things here. What is "rawSvg" and where is the invocation to get the svg from our assets/file.svg? Furthermore, when I try to render the SVG to a widget it is not an Image so I don't see how I can use canvas.drawImage to render it.

Use case: looking to get an *.svg file that I can draw to a canvas.

[dnfield]

You use svgRoot.draw and give it the canvas.

rawSvg is a string here. You could load it from a file - or just use the SvgPicture.file or SvgPicture.asset.

I'd be happy to review an improvement to the docs here.

[shamilovtim]

if I try to do this:

final String rawSvg = SvgPicture.asset('assets/egg.svg');

I get: A value of type 'SvgPicture' can't be assigned to a variable of type 'String'. If I try .toString() or toStringDeep() all I get is a string of "SvgPicture" not the actual svg paths.

I can try by reading a File as well

[dnfield]

Ahh sorry, you'd want loadAsset for that.

SvgPicture is a widget you just put in the tree

[shamilovtim]

Cool, will do!

[emvaized]

@dnfield I am sorry, could you please give a full example snippet on the discussed situation? For example, I have an svg file with some path data, and how can I draw it on canvas?

I'm a bit confused with your answer, especially on what loadAsset is. And also svgRoot.draw(canvas, size) method gives an error to me, saying that it must accept three arguments instead of two.

Thanks.

[AamirVakeel]

@dnfi

Ahh sorry, you'd want loadAsset for that.

Can you please explain this thing? I am trying to place an SVG over a canvas so we can draw on it but i have an svg file and

final String rawSvg = '''<svg viewBox="...">...''';

This line isn't working out for me as i have a file.

[alectogeek]

@aamirvakeel1 you should load your asset file like this: rootBundle.loadString(assetRoute)