Error rendering an svg image when referencing a pattern using flutter_svg

Question

Flutter 3.0.5 || Dart 2.17.6 || flutter_svg: 1.1.5

I am trying to add an svg image to the screen which is works fine in browsers but when adding the svg using flutter_svg package as string or asset it gives an error:

======== Exception caught by SVG ===================================================================
The following assertion was thrown while parsing PictureKey(<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop offset="5%" stop-color="white" />
      <stop offset="95%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="red" />
      <stop offset="95%" stop-color="orange" />
    </linearGradient>

    <pattern id="paint0_radial" x="0" y="0" width=".25" height=".25">
      <rect x="0" y="0" width="50" height="50" fill="skyblue" />
      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
      <circle
        cx="25"
        cy="25"
        r="20"
        fill="url(#Gradient1)"
        fill-opacity="0.5" />
    </pattern>
  </defs>

  <rect fill="url(#paint0_radial)" stroke="black" width="200" height="200" />
</svg>, colorFilter: null, theme: SvgTheme(currentColor: Color(0xff000000), fontSize: 14.0, xHeight: 7.0)) in _getDefinitionPaint:
Failed to find definition for url(#paint0_radial)

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
====================================================================================================

and here is the code:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import '../constants.dart';

class Tutorial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          background,
          Center(
            child: SvgPicture.string(picture),
          )
        ],
      ),
    );
  }
}

the error appeared when using pattern tag but if I add id of linear gradient tag the picture renders fine

Error rendering an svg image when referencing a pattern using flutter_svg

0 Answers0