Flutter SVG 渲染

Question

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

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

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

Answer 1

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

我一直在开发一个在画布上渲染 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

Answer 2

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

如果您绝对需要矢量绘图，您可以查看 Flutter Logo 小部件 作为如何使用

Canvas

API 进行绘制的示例，或者在本机端光栅化图像并将其作为位图传递给 Flutter，但目前您最好的选择可能是嵌入高分辨率光栅化资产图像。

Answer 3

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

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

我在这里找到了一个 SVG 实现的小例子。

Answer 4

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

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)

Answer 5

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

Answer 6

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

dependencies:
     flutter_svg: any

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,
  ),

Answer 7

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

示例-

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

Answer 8

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

该库位于 https://pub.dev/packages/jovial_svg

Answer 9

我通过在 fluttericon.com 将 svg 图像转换为 ttf 解决了类似的问题。

这些是所涉及的步骤。

将所有 svg 文件保存在一个文件夹中。 使用那里的上传器将它们全部上传到 fluttericon。 您可以选择所有这些并拖放到该位置。 在顶部给你的图标一个 dart 类名称：比如 Svgicons

选择所有图标并按“下载”。

它将下载一个 zip 文件，其中包含 dart 文件和包含 Svgicons.ttf 的字体文件夹。

将字体文件夹复制到您的项目文件夹，并将其作为 pubspec.yaml 中的资产引用。

fonts:
  - family: Svgicons
    fonts:
      - asset: fonts/Svgicons.ttf

导入要使用图像的 svgicons_icons.dart。 样品：

import '../svgicons_icons.dart';

import 'social_media.dart';

class SocialMediaRepository {
  List<SocialMedia> getSocialMedia = [
    SocialMedia(id: 1, title: "Facebook", iconAsset:Svgicons.facebook, isFavorite: false),
    SocialMedia(id: 2, title: "Instagram", iconAsset: Svgicons.instagram, isFavorite: false),
    SocialMedia(id: 3, title: "LinkedIn", iconAsset: Svgicons.linkedin, isFavorite: false),
    ....

这里的 iconAsset 是 IconData 类型，它原本是一个引用 svg 图像的字符串。

使用显示ttf

    ...
    Icon(item.iconAsset),
    SizedBox(width: 10),
    Text(item.title),
  ],
),

其中 item 是包含 IconData 的对象。 现在您可以从项目中删除对 svg 图像的引用。

Answer 10

flutter 支持特殊类型的 svg

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

Answer 11

您可以使用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

Answer 12

flutter 中的 Svg https://pub.dev/packages/flutter_svg

1. 在 pubspec.yaml 中添加包

   依赖关系： flutter_svg：任意

   资产：
   -资产/图像/

2. 插入 svg。

   SvgPicture.asset('资产/图像/密码图标.svg', 宽度：24，高度：29.2），

Answer 13

在我的 cas 中，不仅仅使用

svgPicture.assets()

中的

Scaffold

我必须宣布

final Widget mySvg = SvgPicture.asset('assets/icons/24/my.svg');

在

return Scaffold

之前和使用

child: SizedBox(
   width: 24,
   height: 24,
)