flutter cannot load and render svg images

Question

I am trying to load and show an image in svg format but I get this error everytime

unhandled element pattern; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#5abbc(), name: "assets/svg/Ellipse.svg", colorFilter: null)
══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
The following assertion was thrown while parsing AssetBundlePictureKey(bundle:
PlatformAssetBundle#5abbc(), name: "assets/svg/Ellipse.svg", colorFilter: null) in
_getDefinitionPaint:
Failed to find definition for url(#pattern0)
This library only supports <defs> and xlink:href references that are defined ahead of their
references.
This error can be caused when the desired definition is defined after the element referring to it
(e.g. at the end of the file), or defined in another file.
This error is treated as non-fatal, but your SVG file will likely not render as intended
════════════════════════════════════════════════════════════════════════════════════════════════════

This is how I am trying to display it

Padding(
  padding: const EdgeInsets.only(top: 24),
  child: SvgPicture.asset(
   'assets/svg/Ellipse.svg',
   width: 100,
   height: 100,
 ),
),

How can I fix the error

Answer 1

Tested on flutter_svg: ^1.1.5

To fix this problem we need to move up tags defs and /defs in svg icons.

For example, this icon throw exception

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6484 3.68253H10.7791C8.03372 3.68253 5.66705 5.90787 5.66705 8.65453V22.9705C5.66705 25.8719 7.87772 28.1532 10.7791 28.1532H21.4297C24.1764 28.1532 26.4031 25.7172 26.4031 22.9705V10.7172L19.6484 3.68253Z" stroke="url(#paint0_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M19.2981 3.66693V7.5456C19.2981 9.43893 20.8301 10.9749 22.7235 10.9789C24.4781 10.9829 26.2741 10.9843 26.3955 10.9763" stroke="url(#paint1_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M15.5208 12.5875V21.3515" stroke="url(#paint2_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M11.7363 16.3883L15.5203 12.5869L19.3056 16.3883" stroke="url(#paint3_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <defs>
        <linearGradient id="paint0_linear_3_133" x1="6.35751" y1="3.68257" x2="23.5898" y2="3.74374" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
        <linearGradient id="paint1_linear_3_133" x1="19.5344" y1="3.66694" x2="25.4325" y2="3.69092" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
        <linearGradient id="paint2_linear_3_133" x1="14.8985" y1="12.5875" x2="16.0066" y2="12.5882" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
        <linearGradient id="paint3_linear_3_133" x1="11.9883" y1="12.5869" x2="18.2783" y2="12.6394" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
    </defs>
</svg>

and if we move up tags defs and /defs so it works

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="paint0_linear_3_133" x1="6.35751" y1="3.68257" x2="23.5898" y2="3.74374" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
        <linearGradient id="paint1_linear_3_133" x1="19.5344" y1="3.66694" x2="25.4325" y2="3.69092" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
        <linearGradient id="paint2_linear_3_133" x1="14.8985" y1="12.5875" x2="16.0066" y2="12.5882" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
        <linearGradient id="paint3_linear_3_133" x1="11.9883" y1="12.5869" x2="18.2783" y2="12.6394" gradientUnits="userSpaceOnUse">
            <stop stop-color="#4D45A9" />
            <stop offset="1" stop-color="#766AFF" />
        </linearGradient>
    </defs>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6484 3.68253H10.7791C8.03372 3.68253 5.66705 5.90787 5.66705 8.65453V22.9705C5.66705 25.8719 7.87772 28.1532 10.7791 28.1532H21.4297C24.1764 28.1532 26.4031 25.7172 26.4031 22.9705V10.7172L19.6484 3.68253Z" stroke="url(#paint0_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M19.2981 3.66693V7.5456C19.2981 9.43893 20.8301 10.9749 22.7235 10.9789C24.4781 10.9829 26.2741 10.9843 26.3955 10.9763" stroke="url(#paint1_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M15.5208 12.5875V21.3515" stroke="url(#paint2_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M11.7363 16.3883L15.5203 12.5869L19.3056 16.3883" stroke="url(#paint3_linear_3_133)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>

Original helping post: https://stackoverflow.com/a/62773031/11725354

Answer 2

You can use base64 string of the SVG file if that is not loading.

Answer 3

Flutter natively doesn’t support rendering SVG. But there are some workaround for that.

Solution 1: There is a package called flutter_svg which provide a solid way of adding SVG to your flutter project.

Solution 2: Convert your SVG files to PNG using a free online convertor (Example: https://svgtopng.com/).

Answer 4

Try using flutter_svg library. This will render SVG in your flutter app.

Link: https://pub.dev/packages/flutter_svg

Basic Usage:

final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
  assetName,
  semanticsLabel: 'Acme Logo'
);