如何在颤动中使用本地的.svg图标？

Question

我正在尝试显示我添加到项目文件夹 assets/contact/tag.svg 中的 svg 图标，并在 pubspec.yaml 中定义了它的路径。 但得到异常

Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#aeb88(), name:
I/flutter (10891):   "assets/contact/tag.svg", colorFilter: null)

我使用flutter_svg插件来显示svg图标

代码：

class ProfileAboutMe extends StatelessWidget {
  const ProfileAboutMe({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: Container(
         alignment: Alignment.center,
        padding: EdgeInsets.only(
          left: 24,
          top: 14,
          right: 24,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'ABOUT ME',
                  overflow: TextOverflow.fade,
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                    color: Color(0xff4e4b6f),
                  ),
                ),
               SvgPicture.asset(
                'assets/contact/tag.svg',
                height: 40,
                width: 40,
                ),

                // IconButton(
                //     onPressed: () => print('abc'),
                //     icon: Icon(Icons.edit_outlined)),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            RichText(
              text: TextSpan(
                style: TextStyle(
                  color: Color(0xff4e4b6f),
                ),
                children: <TextSpan>[
                  TextSpan(
                    text:
                        "Hey guys, This is Anna. I'm here to find someone for hookup. I'm not interested in something serious. I would love to hear your adventurous story",
                    style: TextStyle(
                      fontSize: 15,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

显示黑色容器而不是图标：

我的 svg 图标截图：

我的日志信息：

Syncing files to device Redmi 8A...                              1,240ms

Flutter run key commands.
r Hot reload. ????????????
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on Redmi 8A is available at: http://127.0.0.1:60801/fltQBNjDVcA=/
W/Gralloc3( 8654): mapper 3.x is not supported
I/OpenGLRenderer( 8654): Davey! duration=3648ms; Flags=1, IntendedVsync=216833028460600, Vsync=216833211793926, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=216833215017697, AnimationStart=216833215155197, PerformTraversalsStart=216833215167020, DrawStart=216836489206393, SyncQueued=216836517323321, SyncStart=216836517942487, IssueDrawCommandsStart=216836518714206, SwapBuffers=216836674754727, FrameCompleted=216836677195925, DequeueBufferDuration=3498000, QueueBufferDuration=1371000, 
W/Looper  ( 8654): Slow Looper main: Long Msg: seq=10 plan=13:19:41.416  late=186ms wall=3464ms running=0ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver
I/Choreographer( 8654): Skipped 209 frames!  The application may be doing too much work on its main thread.
W/Looper  ( 8654): Slow Looper main: doFrame is 3499ms late because of 2 msg, msg 1 took 3464ms (seq=10 late=186ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver)
I/flutter ( 8654): ══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
I/flutter ( 8654): The following UnimplementedError was thrown in parseSvgElement:
I/flutter ( 8654): The <style> element is not implemented in this library.
I/flutter ( 8654): 
I/flutter ( 8654): Style elements are not supported by this library and the requested SVG may not render as intended.
I/flutter ( 8654): If possible, ensure the SVG uses inline styles and/or attributes (which are supported), or use a
I/flutter ( 8654): preprocessing utility such as svgcleaner to inline the styles for you.
I/flutter ( 8654): 
I/flutter ( 8654): Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#107cd(), name:
I/flutter ( 8654):   "assets/discover/scan.svg", colorFilter: null)
I/flutter ( 8654): ════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

你可以试试这个包https://pub.dev/packages/flutter_svg

Answer 2

您的问题和解决方案在这里明确提到：

I/flutter ( 8654): The <style> element is not implemented in this library.
I/flutter ( 8654): Style elements are not supported by this library and the requested SVG may not render as intended.
I/flutter ( 8654): If possible, ensure the SVG uses inline styles and/or attributes (which are supported), or use a
I/flutter ( 8654): preprocessing utility such as svgcleaner to inline the styles for you.

让我为你澄清一下：

flutter_svg 包不支持svg 由internal css 组成，例如：

 <style>
       .....
  </style>

因此，为了使其正常工作，您需要删除 internal css 并写入 inline css 或使用不同的 svg 图片或使用预处理实用程序（如 Svgcleaner）为您内联样式。

您可以将 Svgcleaner 下载到您的操作系统中，从 here 或 Direct Download Link - Executable File 对于 windows 操作系统。

但我建议，您最好使用另一张代码中没有internal css 的svg 图片。