Flutter : Can't see SVG picture on the screen

1.9k views Asked by At

I was trying to use svg format but I couldn't see the picture on my phone screen.

Flutter Code:

Padding(
                  padding: const EdgeInsets.only(top: 20),
                  child: Container(
                      width: width, 
                      child: SvgPicture.asset(
                        'assets/images/home_logo.svg',
                      )
                ),

SVG Picture :

<svg width="118" height="16" viewBox="0 0 118 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="118" height="16" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.0117015) scale(0.00220264 0.0162445)"/>
</pattern>
<image id="image0" width="454" height="63" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

Error :

I/flutter (15273): unhandled element pattern; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#5121b(), name: "assets/images/home_logo.svg", colorFilter: null)

This picture kinda looks like this on my browser. But I can't see it in the app. Please have a look!

enter image description here

1

There are 1 answers

4
Hamza On BEST ANSWER

As far as I know you cannot render SVG images directly in Flutter. Try using this package flutter_svg . Its worth a shot. If not you can refer to this question as well.

Cheers!