Flutter SVG 渲染

Posted 2023-02-23

【中文标题】Flutter SVG 渲染

【英文标题】：Flutter SVG rendering

【发布时间】：2017-10-20 14:35:48

【问题描述】：

我尝试将带有 SVG 源的图像添加到我的颤振应用程序中。

new AssetImage("assets/images/candle.svg"))

但我没有得到任何视觉反馈。 如何在 Flutter 中渲染 SVG 图片？

【问题讨论】：

尝试使用简单易用的 flutter_svg 0.14.0 包，它的作用就像魅力一样 更多信息在这里 pub.dev/packages/flutter_svg ，这一切都感谢这个人 github.com/dnfield 将 chrome 的 svg 渲染逻辑移植到 dart

【参考方案1】：

颤动中的Svg https://pub.dev/packages/flutter_svg

在 pubspec.yaml 中添加包

依赖： flutter_svg：任意

资产： -资产/图像/

插入 svg。

SvgPicture.asset('assets/images/password-icon.svg', 宽度：24，高度：29.2），

【参考方案2】：

可能感兴趣：有一个更新的 Flutter SVG 库，名为 jovial_svg。我编写它是为了处理比我当时在 pub.dev 上找到的更强大的 SVG 子集。在此过程中，我还制作了一种二进制格式，可以将 SVG 资产编译为。它更紧凑一些，读取速度提高了大约 10 倍，因此对于与应用程序打包的资产来说，它是一个不错的选择。

图书馆位于https://pub.dev/packages/jovial_svg

【讨论】：

是否可以渲染本地（资产）SVG 图像？是的，如何？我无法找到确切的解决方案。提前致谢。

【参考方案3】：

flutter 支持特殊类型的 svg

如果有样式标签，则不会在颤振中加载 svg 图像 flutter 支持 svg 中的内联样式

【参考方案4】：

步骤 1. 在 pubspec.yaml 中添加依赖项

dependencies:
     flutter_svg: any

任何版本的优势在于您可以在任何 SDK 版本中使用

第 2 步。导入你的应用中的 Flutter svg 包

 import 'package:flutter_svg/flutter_svg.dart';

第 3 步。就像下面这样使用

 SvgPicture.asset(
    'assets/images/bm-icon1.svg',
     width: 18.0,
     height: 18.0,
  ),

【讨论】：

这个答案与@Robin 的有什么不同？

【参考方案5】：

您可以使用这个库来渲染 SVG 图像 - https://pub.dev/packages/flutter_svg

例子-

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)

【讨论】：

这个包可以满足我的要求

【参考方案6】：

您可以按照以下步骤操作 - 访问http://fluttericon.com - 上传您的 SVG 图标 - 点击下载按钮 - 你会得到两个文件 1. iconname.dart 2. iconname.ttf 字体文件 - 在 Flutter 中使用此文件并导入 iconname.dart

【参考方案7】：

来自 Flutter 社区的开发人员创建了一个库来处理 svg 文件。我们可以把它当作

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

我找到了一个 SVG implementation here 的小例子。

【讨论】：

仅供参考 - 这不是官方/第一方插件。也就是说，它应该支持很多常见的用例。

是的，而且这个插件依赖于其他包，保持作者更新非常重要。我不能使用这个包，因为其他一些包与它的旧 xml ^4.0.x 依赖项冲突

【参考方案8】：

您可以使用flare 创建动画，只需将.flr 作为资产导入

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget 
  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  

访问flare_flutter https://pub.dev/packages/flare_flutter

【参考方案9】：

字体在很多情况下都是不错的选择。

我一直在开发一个在画布上呈现 SVG 的库，可在此处获得： https://github.com/dnfield/flutter_svg

目前的 API 看起来类似于

new SvgPicture.asset('asset_name.svg')

渲染asset_name.svg（大小与其父级相同，例如SizedBox）。您还可以指定 color 和 blendMode 为资产着色。

它现在可以在 pub 上使用，并且至少可以与 Flutter 0.3.6 版本一起使用。它处理大量案例，但并非全部 - 请参阅 GitHub 存储库以获取更新和文件问题。

Colin Jackson 引用的原始 GitHub 问题实际上并不是主要关注 Flutter 中的 SVG。为此我在这里打开了另一个问题：https://github.com/flutter/flutter/issues/15501

【讨论】：

有点跑题了，但这有 ios 支持吗？据我所知，iOS 支持 PDF 格式的矢量，所以我很好奇这是否也可以用于在 iOS 上渲染矢量

它应该可以在 Flutter 支持的任何平台上运行。这一切都是使用 Canvas 方法用 Dart 编写的。

为什么不支持最新的flutter stable而不是预览

嗨，Dan，您还可以添加对 - dart:svg 库 - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html 的支持吗？颤振有 dart2 支持吗？我想将多个 SVGElements 全部组合成一个大的序列化字符串，然后使用您的库来呈现 SVG

dart:svg 与 HTML 和 dart2js 一起使用。和这个很不一样。

【参考方案10】：

目前的解决方法是使用字体

https://icomoon.io/

  fonts:
   - family: icomoon
     fonts:
       - asset: assets/fonts/icomoon.ttf

用途

  static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
  static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');

替换### 例如（906）

【讨论】：

我该如何使用它？假设我在asset/svg/mysvg.svg 中有一个svg 文件，我无法用路径替换十六进制。第一个参数是一个 int。

【参考方案11】：

Flutter 目前不支持 SVG。关注issue 1831 获取更新。

如果您绝对需要矢量绘图，您可以查看 Flutter Logo widget 作为如何使用 Canvas API 进行绘图的示例，或者在本机端光栅化您的图像并将其作为位图传递给 Flutter，但现在您最好的选择可能是嵌入高分辨率光栅化资产图像。

【讨论】：

另外，如果你不需要颜色，你总是可以像 Icons 包那样走字体路线。

好吧，毕竟他需要简单地渲染一张 svg 图像，任何 svg 库都可以像这样pub.dev/packages/flutter_svg

问题自 2016 年 2 月 13 日起开放。我们需要等待多长时间？

@BloodLoss 看看 Dan Field 的回答。用户flutter_svg包