其他随机想法（不是我的全部）：

• 我们真的希望避免支持一种预先存在期望实现的功能不会发挥作用的格式。 例如，实现 SVG 将导致人们期望完整的 SVG 支持，包括脚本、HTML、SMIL 等。
• 我们应该明确地设计我们的格式，使其与 Skia 中的性能特征非常接近，例如 drawAtlas。

矢量支持对于支持各种屏幕尺寸和密度的应用程序框架来说似乎至关重要。 否则，您最终会得到如下所示的图标：

而不是这个：

@汉斯穆勒

Kris 也提到了这一点：我们可以在构建时进行一些有限的 SVG 处理。 例如，我们可能会根据 SVG 描述生成 MD 图标小部件。 如果仔细完成，可能会节省空间并提高对原始设计的保真度。

特别是对于材料设计图标，我们应该研究使用材料设计图标字体。

@appsforartists对于它的价值，Cocoa 和 android.view 都不使用矢量格式的图标。

@abarth我对 iOS 并不感到惊讶 - 似乎他们从硬编码的 3.5 英寸屏幕开始，并且一直努力保持这种心理模型/支持分辨率的简单性（参见：每部 iPhone 的宽度相同，或最初的 iPad 和 iPad mini 具有相同的分辨率）。我对移动开发知之甚少，但对于 Android 不是基于矢量的，这有点令人惊讶。

在任何情况下，图标都不应该像上面的屏幕截图那样看起来有别名，并且矢量是解决分辨率独立性的一个很好的解决方案。 你们如何选择实施以解决漂亮的图标取决于您。 :笑脸:

你们如何选择实施以解决漂亮的图标取决于您。

您是否愿意针对您在图标中看到的分辨率问题提出单独的问题？ @krisgiesing实现了一个可处理许多情况的分辨率感知资产解析器。 了解它不处理的情况将是有价值的。

我正在考虑为当前的分辨率感知支持添加一些测试，所以现在是了解某些东西是否工作不正常的好时机。

看起来 3x 的设备像素比为2.6 ，我们可能没有资产。

我现在正在研究这个具体案例。 设备像素比为2.625； 我们正在选择 3.0x 资产，这是预期的。 但是，在渲染过程中似乎发生了一些事情，导致了某种额外的锯齿伪影。 因此，尽管@abarth通过切换到字体修复了 Material Design 图标的情况，但我仍在代表其他需要分辨率相关缩放的图像资产类型进行调查。

我将打开另一个错误来跟踪它，因为它与矢量格式的支持相切。

见#2337

Android 支持“VectorDrawable”格式，它只是 SVG 的一个表现良好的子集。 我希望您考虑使用相同的格式，因为它已经获得了一些社区支持，并且 Android 团队显然认为它的性能足够。

VectorDrawable 肯定受到 SVG 的影响，但它不是一个子集。 它还使用 XML，这几乎可以保证它不会是人们所能想到的性能最高的矢量格式。 :-)

将 VectorDrawable 描述为严格的子集是错误的，但它似乎仍然是确保良好 _render_ 性能和易用性之间的平衡折衷。 VectorDrawable 规范经常在路径数据语法等关键领域遵循 SVG 规范，这使得转换许多开发人员已经使用的 SVG 资产和共享现有 Android 应用程序已经包含的 VectorDrawables 变得更加容易。

我无法想象 XML 是一个重要的性能障碍，因为它只影响解析。 在我看来，_render_ 性能——影响 Flutter 60fps 应用程序目标的那种性能——更多地取决于 Skia 必须绘制的向量操作集，而不是可以完成一次并缓存的解析步骤。

我不想赘述这一点，但我不禁感到这方面的工作已经完成，因此不需要在“2.0 发布后”里程碑中搁置。

我们最终为 Material Design Icons 使用了 Material Design 字体。 我不知道今天有任何障碍阻止某人使用直接dart:ui调用或 CustomPaint 小部件在 Flutter 之上构建它： https://docs.flutter.io/flutter/widgets/CustomPaint-class。 html。 我们目前没有立即建造这样的计划。

$.02 - 即使是 janky 浏览器（和竞争对手框架 React Native没关系，他们的解决方案是 hacky）可以渲染 SVG。 图像导出选项需要为我的团队的每个图标或艺术资产创建至少 3 个文件。 与一个 SVG 文件可以以任何分辨率显示相比，这是一种糟糕的做法。

对于 Hixie 的上述评论，预先存在的期望不应妨碍实现有价值的功能。 我宁愿能够获得对 SVG 显示的基本支持（这为我和我的团队解决了许多问题）并发现扩展选项不可用，而不是依赖于不断增加的 PNG 数量来适应不断增加的屏幕分辨率的数量。

我正在回退为我的团队制作字体，但这不如原生 SVG 支持，因为字体格式为必须在应用程序中调整的行高和字母间距添加了额外的格式。 此外，字体希望以固定分辨率（12 像素、16 像素、20 像素、36 像素...）显示，这也是有限制的。

感谢您提供酷炫的 Flutter 框架。 :)

我会鼓励任何想要 SVG 支持的人将 SVG 支持实现为 Flutter 的 Dart 包。

对于那些感兴趣的人，我会指向https://docs.flutter.io/flutter/dart-ui/dart-ui-library.html这是用于绘图的低级库。

来自团队：Dart 库的解决方案不够好。 只是传递它。

你能详细说明一下吗？ Flutter 的整个框架就是一个 Dart 库； 我们在这里实现的任何东西都可能是一个 Dart 库。 “足够好”的要求是什么？

举个例子，不久前我在 pure-Dart 中实现了一个（简单的、非详尽的）SVG 解析器：

https://github.com/matanlurey/svg

这可能有点微不足道：

一个。 创建一个运行时 SVG -> SvgRenderElement ，它在后台使用dart:ui 。
湾。 创建一个构建时编译步骤，将 SVG 转换为以下内容：

// compiled from star.svg
void drawStarSvg(canvas, width, height) { ... }

@deborah-ufw 如果您有兴趣，我们很乐意聊天以了解更多信息。 你能给我发电子邮件吗？

嗨 Seth、matanlurey 和 Hixie - 非常感谢您的回复。 我可能不是深入交谈的合适人选，因为是我们的首席工程师拒绝了 Dart 插件解决方案（因此导致为我们的应用程序生成了一个巨大的 png 库，这也让我们大多数人感到畏缩）。

我想将这个 Github 问题的链接传递给他们，并要求他们为他们的评论提供技术原因（这比我传递的更丰富多彩）——我会在我完成打字后立即这样做。

如果需要，他们还可以通过 http://gitter.im/flutter/flutter 以及 https://flutter.io/support/ 列出的其他联系方式直接与我们的工程师聊天。 :)

我会添加的。谢谢！ :D

另一种方法是在原生级别集成http://svgpp.org/之类的东西，并使用 Flutter 插件系统与之通信。 这可能会为您提供完整的 SVG 支持的最佳大小/性能特征，但会以维护依赖项为代价。

在引擎级别寻找 SVG 支持怎么样？ 我不认为期望对该标准的全面支持是合理或可取的，但部分吸引力在于对跨职能团队和现有工具的支持。

我的印象是 Skia 提供了一些基本的 SVG 支持。 有没有办法让 Flutter 可以使用它？

据我所知，这只是实验性的和部分的。 这里有一个问题https://bugs.chromium.org/p/skia/issues/detail?id=5596已经存在一年多了。 他们也在他们的路线图中列出了它，但同样不清楚优先级。

在引擎级别支持 SVG 是没有意义的，因为这不会公开 SVG 文档模型，这是 SVG 支持的核心部分。

如果 Flutter 支持 SVG，那么最终的目标就是真正支持真正的 SVG。 半心半意地实现特性是违反 Flutter 的理念的。

我不认为将 SVG 文档模型作为 SVG 支持的核心部分。 对于我想到的用例来说，这将是一个很好的选择，但不是必须的。

是的，库级别支持将启用更多功能 - 但如果引擎本身能够渲染（重要子集）SVG 数据，那大概足以允许渲染由 SVG 子集定义的矢量图像资产。

这个问题显然比这更大，但我很乐意采用现有的 SVG 资产并以不同的分辨率正确渲染它们，而不会将它们全部转换为庞大的光栅图像。

是的，SVG 资产文件导入会非常好，但 SVG 的规范长达 800 多页。 话虽如此，仅导入静态文件以在 Skia（矢量图形库）上渲染应该不是问题。 所以我接受它； 和往常一样，我只能在周末做兼职，所以你不会马上看到东西。 我也有大量的 SVG 文件，但它们都使用相同的东西（来自 flaticon 的图标集合），所以我很感激需要这个功能的人提供的 SVG 文件示例。

卡洛斯。

随着时间的推移，我也一直在思考这个问题。 这是我想出的：

引擎级实现

这似乎很有吸引力，原因如下：

1. 理论上支持image: new AssetImage('graphics/background.svg')之类的东西，让一些 C/C++ 代码解析并将 SVG 数据转换为 Skia 渲染命令
2. 至少有一个好的候选人应该能够在引擎级别相当容易地插入 Skia (https://github.com/svgpp/svgpp)
3. WebKit 的 SVG 逻辑很棒，但似乎有太多依赖项
4. 我不认为 librsvg 移植得很好（与 Ca​​iro 紧密耦合，过渡到 Rust 作为主要语言 - 至少需要想办法将 Skia 作为后端）

但它至少有几个困难：

• 正确处理文本
• 正确处理 CSS（如果有的话？但添加它不是简单的任务）
• 扩展对附加功能的支持（或允许用户更优雅地添加对功能的支持）具有挑战性。
• 似乎处理动画非常困难

Dart 级别的实现

1. Flutter 的dart:ui提供了来自 Skia 的许多 SVG 已经需要的原语
2. 我怀疑在这个级别比在引擎级别更容易处理文本渲染
3. 应该更容易让更多的社区维护/扩展
4. 应该能够更便宜地处理与解析逻辑的直接交互（也许处理异常和/或动画？）

但是有几个难点：

• 支持 CSS 可能不会做得更好
• 支持动画可能不会做得更好
• 可能会更慢（但可能还不够重要，并且可能会被 AOT 编译的 SVG 到 Dart 代码所抵消）

测试数据

就示例 SVG 而言，确定 1.1 测试套件支持哪些 SVG 可能最有用（或者，如果部分支持，那么部分支持它们呢）。 这些可以在这里找到：
https://github.com/w3c/web-platform-tests/tree/master/svg/import

或者在这里进行一些 PNG 比较： https ://www.w3.org/Graphics/SVG/Test/20110816/

@cbazza ，您打算以哪种方式实现此功能？ 在这一点上，我更倾向于 Dart 包级别的实现。

另外，我认为图标类型支持可能很容易使用 IconData 之类的东西来处理。 最好单独处理它，因为它可能只需要支持每个代码点的单个路径

我正在考虑dart:ui 之上的“Dart 级别实现”。

2个基本用例：

(1) 加载静态图标 svg 文件，如您的
"image: new AssetImage('graphics/background.svg')"，其中
文件可能来自文件系统或网络
动态的。

(2) 基于小部件的 svg 支持与 DSX（类似 JSX 的构造）
这看起来非常类似于：
https://github.com/react-native-community/react-native-svg

关于“测试数据”，我需要来自需要的人的真实文件
这不是 w3 测试套件。 SVG 支持将取决于
dart:ui支持什么，所以如果 resired svg 文件包含
dart:ui无法完成的事情，我可以
快速找出。

卡洛斯。

我认为我们不应该选择 react native SVG 模型。 我想要支持现实生活中的案例，我认为涵盖 w3 套件会给我们一个更好的基线，了解哪些有效，哪些无效，以及实施起来有多大的挑战性）

好吧，好像有什么误会……
当我执行 (1) 时，它将采用标准 SVG 文件，并且我将尽可能多地支持dart:ui (Skia)。
当我执行 (2) 时，即创建小部件来处理类似 SVG 的构造，它看起来与 react-native-svg 库非常相似。 这是两件非常不同的事情。

@cbazza我们应用中 svg 的用例主要用于我们用作图标的单色 svg。 这是 Dropbox 上一个 zip 文件的链接，其中包含一些具有代表性的近期 svg。 https://www.dropbox.com/s/dp38wxc22625cvc/icons.zip?dl=0

感谢您有兴趣在这里提供帮助，我很高兴看到 SVG Flutter 插件出现！

我写了一个工具，它对一系列有点 SVG 的文件进行一些最小的解析，并转储出我们以后用来显示图标动画的 Dart 文件： vitool 。

我使用此工具创建了AnimatedIcons数据，您可以通过运行手动测试应用程序( cd dev/manual_tests; flutter run -t lib/animated_icons.dart ) 检查结果。

它远非最佳或完整，但适用于我们当前拥有的一组动画图标，并且有人应该感到有权分叉/扩展它。

@deborah-ufw 对于这些单色图标，您可以做的是创建图标字体，并使用Icon 小部件显示图标。

@amirh创建彩色矢量字体似乎并不容易

@amirh如果您阅读了上面的整个线程，那么创建和定义带有字形作为图标的字体是由于不支持 SVG 而必须采取的一系列额外步骤。 SVG 支持比字体更有效。 此外，zoechi 是对的 - 任何具有多种颜色的矢量艺术几乎不可能制作成字体。

抱歉 - 我查看了示例图标并认为您只需要单色图标。

@deborah-ufw，感谢您提供的文件，正是我正在寻找的东西，并且已经找到了我的文件没有的东西。

@amirh ，是的，我已经看过你的伟大作品了；）

我们终于有一种直接的方法可以将 svg 或矢量资产 xml 源到图像中以进行颤动吗

@Hixie ：请（重新）考虑一下，对于多平台原生移动团队来说，这是一个真正的痛点，但只需要部分、相对简单的 SVG 支持来解决这个问题。 对于 SVG 标准的维护者，这可能被认为是半心半意的，但 Flutter 是为移动开发人员服务的，而不是为一般标准作者服务的。 如果 Flutter 能减轻移动开发者真正的痛苦，即使只是以务实的方式，它也会赢得移动开发者的心。

另请考虑，尽管存在这种长期存在的需求，但社区支持方法未能在 Flutter 竞争对手Xamarin中产生可行的解决方案（在我 5 年的 Xamarin 经验中 - 库无法处理设计工具导出，太有限，不稳定，付费和/或封闭源代码）。

因此，我并不乐观地认为 Flutter 社区会在 Xamarin 社区失败的地方取得成功。 我估计是实用的。 Flutter 团队可以使用现有的 Skia 原语提供对 SVG 图标的部分支持。

这将非常符合 Flutter 的目标：使移动开发人员能够在创纪录的时间内交付美观、高性能的 UX。 它将提高生产力、保真度和性能（SVG 加载速度比所有那些 PNG 快得多；图标 SVG 通常具有适度的计算成本，因为对视觉清晰度的要求通常会导致形状适度复杂）。

核心需求是从常用的创意设计工具（如 Adob​​e）到可扩展的原生应用程序图标的高效工作流程。

当前的 PNG 方法在生产力和应用程序大小方面非常浪费； 在多达 9 个固定位图（6 个 Android，3 个 iOS）中生成和传送每个图标，然后在运行时进行后处理，这真是太原始了。 随着分辨率的大小和变化的增加，这个问题稳步增加。
在其他令人愉快的创新和高效的 Flutter 开发者体验中，它突出了一个痛点。 我认为 Flutter 有真正的机会在这里赢得开发者的心，

@dnfield上面提到的SVG 功能在 Flutter 中实现的障碍，根据我的经验，要么不相关，要么很少见，以至于对于这些设计资产回退到 PNG 是一个小小的不便。
不关心：CSS、HTML、SMIL、文档模型、脚本
动画，文本：很少用到其他技术

我希望这篇评论的长度能传达出解决方案的价值。 嗯！

@VincentH-Net 我百分百支持你，因为我也感到痛苦！！！ 请给我一些你的 SVG 文件。 或许 Xamarin 难以提供 SVG 支持，因为缺乏可以处理它的矢量图形引擎； Flutter with Skia 的情况并非如此，因此我非常乐观地认为社区解决方案将会出现。

FWIW，Xamarin 在 SkiaSharp 中也有可用的 Skia。 即使对于最小的实现，SVG 也可能很棘手。

但是@cbazza我很想在这方面与您合作

在动画方面，我认为启用 Lottie 会满足很多用例（并且可能会为设计师提供更好的工具）。

@dnfield我认为这些 Lottie 动画可以很容易地重建为 Flutter 小部件

@dnfield ，很好，您可能是处理引擎级别更改的低级别人员，而我在小部件上进行高级工作（异步 svg 解析，可以缓存并在渲染更新时发送到画布的“图片”构造等）。
是的，Lottie 的工作对设计师/开发人员的工作流程非常有用。
@zoechi当您可以简单地导入一个可以为您处理所有事情的工作 Lottie 小部件时，为什么要使用小部件手动重建某些东西？ 话虽如此，我之前的目标（2）对于小部件动画效果很好（因此我也想这样做）。

@zoechi - 目标是让设计师能够创建这样的东西并在开发人员方面以最小的努力呈现它们。 第二个目标是在运行时将它们作为资源加载，而不是需要预编译。

SVG 也是如此 - 是的，开发人员当然可以将 SVG 矢量数据转换为 Dart，但理想情况下，您可以只包含矢量绘图（SVG 或非 SVG）资源并在运行时渲染它。

换句话说，我希望能够告诉我的设计师创建一个矢量资产一次，并能够在我的 Flutter 应用程序中使用它，只需最少的修改（并且没有让设计师以各种光栅格式导出它 5 次，最终一旦苹果或三星发布他们的下一部手机就失效了）。

各种光栅格式

是的，感觉就像前十年

https://github.com/luberda-molinet/FFImageLoading可能值得一看，使用 Skia 为 Xamarin 渲染 SVG

@escamoteur

谢谢，看起来真的很好，唯一缺少的是它不是异步的；）

我最近在 Android 应用程序中只使用矢量可绘制对象，我没有看到任何明显的性能损失。 图标清晰，应用程序大小要小得多。 测试不同的图像也更加容易和快捷。 这个@2 ， @3 ， @4 ， @5 ，.... 解决方案在 Flutter 这样的现代框架中看起来像是一个巨大的倒退。
我不明白为什么你不能去负责 android 矢量绘图的团队，并使用他们的想法或实现（如果可能的话）来解决这个问题。

我一直在玩弄一些在画布上绘制的 SVG。 path元素可能是最难实现的，但是有一个 Skia API 如果暴露出来会很有帮助。 我已经尝试在引擎中公开它，一旦我有更多的时间来完善它，我就会打开一个 PR。

粗略的想法是允许我们使用现有的 Skia API 从 SVG 数据字符串创建dart:ui Path 。 建议的方法是static Path Path.parseFromSvgData(String svgData) -> Path

这仍然需要一些工作来解析可以应用的各种转换/笔触/填充。 我认为我们可以从@amirh所做的工作中借用很多东西（我没有借用他所有的路径解析逻辑，因为它似乎可能有 SkParsePath 没有的约束，并且像 SkParsePath 应该更有效，因为它只需要到本机端的一次往返以绘制路径，而不是每个绘图命令的往返）。 出于类似的原因，我也没有最终使用@matanlurey 。

见https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart , https://github.com/dnfield/flutter_svg （目前可以渲染两个 SVG包含在该项目中的画布中）和https://github.com/dnfield/engine/tree/path_svg （目前还包括我为 Lottie 所做的 PathMeasure/PathMetrics 相关工作）。

嗨@dnfield ，

这是我对您的初始实施的看法。 我只想说，无论我要说什么，都不会影响你的热情和编码进度。 你做得越多越好，因为我们以后总是可以使用它。

我遇到的问题是架构问题，这就是原因。 为了让 UI 以 60 帧/秒的速度响应，每帧在阻塞 UI 之前只有约 16 毫秒的运行时间。 所以让我们假设 Flutter 使用了一半来做这件事，这为我们的 SVG 解析器留下了 8ms 的时间，并且无论您拥有多么强大的手机/平板电脑，都无法在此期间解析任何 SVG 文件并生成图像。 所以最好的办法是针对慢速设备并拥有能够使用多个帧执行此操作的异步代码，但关键是每个帧最多只能运行 8 毫秒，然后它必须返回并在下一帧上继续。

所以你不能使用dart:xml解析 XML，因为它不是异步的，它会阻塞直到整个文件被解析。 生成图像也应该是异步的，因为你不能在 8 毫秒内完成所有事情。 不过，过早地优化代码是没有意义的，因此请编写可以阅读的最佳代码。 我有一个可行的计划，但需要一些时间，所以我希望你继续保持原样，因为我总是可以接受你的工作并在以后使用它。 我的设计插入了当前的图像加载功能（AssetImage 和 NetworkImage），用户只需要指定一个“.svg”而不是“.png”。

卡洛斯。

@cbazza只是一个想法：解析可以在隔离中完成。 我认为已经完成了一些工作，以便能够与 UI 隔离以外的隔离与消息通道进行通信，并通过引用而不是复制在隔离之间传递数据（虽然不确定状态或进度）

@cbazza - 谢谢。 我不认为 dart_xml 是解决这个问题的最佳解决方案，但它可以工作并且可以围绕绘图逻辑取得一些进展（而且我不想在实现异步 XML 解析器时完全阻止它）。 我也开始考虑实现ImageProvider ，但我认为这可能是我们可以从用户那里隐藏的实现细节。

我绝不会设置任何这个 API。 但我们至少可以开始绘制 SVG，并且可能在体面的手机上支持简单的 SVG。

您打算使用 XML/SVG 读取/解析 API 吗？

@zoechi - 我们仍然可以使用流式阅读器模型实现更好的内存使用和更好的解析时间。

@zoechi是的，我查看了隔离，但您只能传递原始值（null、num、bool、double、String）以及列表和映射，而不是对象和/或对象树，因此异步路由似乎更好。 弄清楚异步 xml 解析的另一个有趣的事情是，这些概念将适用于任何异步树处理，例如小部件或元素树。 这将启用异步协调，例如在 React 的 Fiber 中：)

@dnfield是的，我正在研究异步 xml/svg 解析器/处理器。

只是想知道，可以选择使用 Web 视图渲染 SVG 吗？

对于简单的按钮来说太重了，我不确定 webview 是否能够处理 60 帧/秒的变化。 我的意思是假设我们移动图标或缩放它。

我不是 iOS 开发人员，所以我现在看到iOS 11 也支持 vector assets 。 它不是 SVG，而是 PDF。 是否更容易支持 PDF 矢量资产？

不会。Quartz 的内部渲染系统与 PDF 有很多历史联系，这使得在 iOS 设备上更容易做到这一点。 Skia 不是 PDF 渲染器，文件格式 (IMO) 会在支持和不支持的方面引入很多歧义（使用不太好的工具来修复它）。

PDF 比 SVG 更复杂，并且 PDF/X 子集（用于矢量资产）是为打印而设计的。 我很想看到 Flutter 支持 PDF 渲染，但对我们来说，让我们坚持使用 SVG。

我会对 svg 的 VectorDrawable 子集（点、线、曲线、填充、移动）感到满意。 Flutter 允许 RAD 并旨在成为真正的多平台（即将到来的桌面），但现在它不能。 Android 和 Apple 平台都出现在 60"+ 4HD 屏幕上。矢量图形是必须的。

PS 对不起，但如果没有 VG，你（颤振团队）的工作将会随着 Kotlin 在包括 iOS 在内的许多平台上原生工作而消失。 当然 Kotlin 原生它仍处于测试阶段，但 Flutter 也是如此。 :(

@ohir请解释您将如何编写一个跨平台视图（单个代码），该视图可在 iOS 和 Android 上使用 Kotlin 本机。 除非你打算制作一个反应原生小部件抽象的 kotlin 版本？

让我们不要低估 Kotlin 本地人会做什么，因为可能性是无穷无尽的。 我从使用 Cocos2d-x 创建类似 Flutter 的实验中接触到了 Flutter。 他们也可以使用它和/或 React Native 和/或 Flutter，因为一切都是开源的并且可用于异花授粉:)

是的，完全同意，开发人员对 kotlin 的喜爱和采用是巨大的，跨平台编译使可能性无穷无尽。 但是今天在移动跨平台上比较 Flutter beta 和 Kotlin 原生 beta 是没有意义的。
总之，偏离了主题。

@lukaspili到目前为止，有适用于 Android 的 anko。 它的布局 DSL 也可以与各自平台子树中包含的 apko 、linko和 winko* 一起工作。 但这对于 Flutter VG 问题来说已经过时了。 [* 尚不存在]。

感谢所有热情的谈话！ 我们希望让这个问题专注于矢量格式和 API 的用例和要求。 提前感谢您关注主题！ :)

人们如何看待将其拆分为支持 SVG 并将其保留为某些 TBD 颤振矢量格式的问题？

这对我来说很有意义； 最初的问题被表述为某种特定于 Flutter 的矢量格式。

@cbazza Hooray 获得类似 svg 的支持。 我有一堆非图标 svg，我用它们来绘制应用程序的整个 UI。 我应该如何将它们发送给您？

很想尝试移动到颤振，但生成无数的 png 会严重膨胀应用程序大小并且看起来很丑。

是的，请给我一个 URL 来查看文件。

所以在这一点上，在这方面，我正在追求一种基于 Flatbuffer 的方法。 我正在定义一个可以捕获矢量绘图命令的 Flatbuffer 模式 - 或多或少类似于 Skia 捕获路径的方式。

我可以看到这与 SVG 是半互操作的（例如，有一个 SVG -> Flatbuffer 转换工具，或 Android Vector Drawable XML -> Flatbuffer，可以涵盖许多 SVG 用例），并避免了我们对性能的很多影响'd 面对 SVG（缺少流式 XML 解析，需要解析 SVG 路径数据，然后一点一点发送到本机）。 我还能够生成比 SVG 格式更小的二进制文件（尽管它的扩展性如何还有待观察）。

还应该可以在转换工具中更清楚地说明给定 SVG 不支持哪些功能（例如，“此格式不支持外来元素”）。

Flatbuffer 解析位可以在 Dart 或 C++ 中完成 - dart 中的一件事是，有一些方法可以将命令批处理到 Skia 以在 Canvas 上构建路径和绘图。

有一个可能更简单的解决方案，即对 Skia 节点操作执行 SVG 的编译时解析和摘要......这将完全消除 SVG 的运行时解析并允许中间缓冲区的保留模式缓存

@sandrobilbeisi你的意思是像https://github.com/amirh/flutter/commit/69de4bbf3177d9766a386c55b27a12619da43a05 ？

这是值得注意的......还有 vitool https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart

但我更多地考虑作为一个构建步骤，就像 Xcode 将 SVG 资产用于 iOS 可交付成果

@sandrobilbeisi您的意思是在编译期间从 svgs 创建位图吗？

顺便说一句，Xamarin 包 ffimageloading 缓存了渲染的位图，因此只有一次渲染。 它还缓存网络图像和调整大小的图像，使其非常快

不是位图，而是 Skia，它原本是< canvas >的矢量图形引擎
https://skia.org/（ps十几年前被谷歌收购：http://www.satine.org/archives/2007/03/05/the-skia-source-code-dilemma/）

你的意思是将svg转换成skia图像格式？

是的

@cbazza链接到 SVG 测试文件： https ://github.com/slingshotapp/artwork

有没有办法在项目级别运行 vitool？ 我可以创建生成的文件，但它需要访问许多私有类，这些私有类阻止我将.g.dart添加到我的项目中。

参考<flutter>/dev/tools/vitool处的工具： #dart bin/main.dart --asset-name=_$hello --output=here.g.dart ./test_assets/horizontal_bar_relative.svg

@emilieroberts谢谢，但这些文件不是 SVG 格式，而是与 SVG 非常相似的自定义 android 矢量格式。

@cbazza哎呀，确实 - 大多数 svg 现在都在上面了 :)

@cbazza你能澄清一下你对自定义 android 矢量的意思吗？ 他们有一个<svg标签，不像 android 矢量绘图。

无论现在用 vitool 做什么都很棒，但我在任何地方都找不到文档的踪迹。 我可以用AnimatedIcons.arrow_menu写一个例子，但我也想知道如何从外部颤振 SDK 的资产中做到这一点。

@fmatosqg你是对的，用于运行 vitool 生成的动画的代码是框架私有的。 原因是关于什么是 Flutter 的良好矢量格式仍然存在悬而未决的问题（如本期所述），我想避免使用支持任何特定格式的公共 API（因为如果我们不希望将来发生重大变化）。
AnimatedIcon 当前的 API 表面允许我们在框架内部使用 vitool 生成的文件，并且仍然能够在不破坏任何客户端的情况下替换底层实现和矢量格式。

如果你想用 vitool 生成文件并在你的项目中使用它，你可以通过从packages/flutter/lib/src/material/animated_icons复制代码并将其包含在你的项目中来实现（这也保证你的项目不会中断，如果我们改变了 AnimatedIcon 使用的机器）。

很抱歉给您带来不便，希望我们能尽快得到更好的解决方案。

我喜欢这个想法，特别是如果https://github.com/flutter/flutter/issues/13834继续前进。 我认为这样的东西不应该是单体 SDK 的一部分，但如果它是官方或社区包，则不必特别担心。

big G的某个人为Shiny （Go 桌面框架）创造了svg 子集的紧凑格式。 它的二进制表示可以使默认的 Android 启动器图标大小低于 100 字节。 如上所述，在线程和 IMSO 中，绘制向量应该是 Skia 的职责，Flutter 传递了一个最紧凑的可用表示。 将res/ svg 文件编译为内部格式的工具职责。
[ @amirh Re：关于什么是好的矢量格式的开放性问题]

所以 FWIW，在 flutter_svg 中，我制定了代码，以便所有绘图都真正由中间对象完成。 SVG 相关的工作基本上是将 SVG 映射到这些对象。 要使中间格式完全稳定，还有很多工作要做（例如，我已经开始支持文本，但现在非常糟糕）。

我已经开始将对 Android Vector Drawables 的支持移植到框架中（减去对外部颜色和样式引用等的支持，还不支持剪辑路径或可能的其他一些功能）。 应该完全有可能以这种方式支持 Shiny，或者实际上支持任何其他格式。 在这一点上，我喜欢通过 SVG 工作，因为它有助于涵盖许多有趣的案例来支持，所以这是我现在的主要关注点。

在阅读了这篇文章——以及一篇关于 JSX 支持的长篇文章之后——我不禁想到存在治理问题。 Flutter 团队冒着被拉向一千个不同方向的风险，因为开发人员要求他们认为什么很重要。 也许 Flutter 应该建立“孵化器”项目，比如 Apache。 请求的功能由插件以开源方式实现，可能来自 Flutter 团队本身的贡献。 如果插件获得足够的支持、功效和流行度，它们就会成为 Flutter 核心框架的候选者。

我觉得这会让最直言不讳的开发人员把他们的“代码放在嘴边”，而不是在这里展示胸部和眉毛，并且会让 Flutter 团队更自由地专注于核心工程。

我恭敬地不同意。 如果你查看像 bucket5 这样的里程碑，你就会知道团队正在做什么，如果你去 bucket6，你就会知道他们认为什么是优先事项。 如果您查看未来的其他里程碑，您也可以知道他们认为不紧急的事情。

此外，在颤振核心中添加一些东西的原因应该不仅仅是“我可以做一个插件，它适用于每个人，每个人都想要它”。 这是创建插件的原因，但不足以添加到此 repo 或其他颤振 repos。

一个不应该是插件的例子： @dnfield添加到引擎中的东西，以便他可以从他拥有的插件中受益和使用。 如果不将此类插件添加到引擎中，则此类插件将没有机会完成它所做的所有功能。

发声很重要，但永远不能保证它会通过。 把代码放在嘴巴的地方也很重要，但还不够。 这个项目有很大的透明度，他们清楚地听取了开发人员的意见，但这不是民主，并不意味着普选会在不考虑后果的情况下获胜。

是的，请不要担心在 Flutter 框架上工作的开发人员会因讨论错误而分心。 :-) 我们确实阅读了讨论，我们非常关心每个人的意见，但归根结底，我们有明确的指导原则，我们不会只对最响亮的声音做出反应。 我们进行仔细的市场分析，以确定整个社区的关注点。

有趣的对话给我留下了一个简单的问题。 Flutter 团队建议我们如何在 Flutter 中从设计阶段 (SVG) 过渡到矢量图形？

@lukepighetti ，您可以尝试https://github.com/dnfield/flutter_svg并检查它带您走多远。

我个人对 Flutter 中为 SVG 文件提供的解决方案不满意。 我使用了 flutter_svg 包，但我对它不满意。

在我看来，标准库需要原生支持 SVG 支持。 如果我们要开始在桌面应用程序和网站等更大的屏幕上使用 Flutter，这是必须的。

@socialmammoth你能详细说明你看到了什么缺陷吗？

我一直在考虑的一件事是是否值得支持 .skp (SKIAPIICT) 格式。 我认为有充分的理由不直接这样做 - 格式并不能保证在不同版本的 Skia 版本之间保持稳定。

然而，它确实有一些有趣的特性——特别是，它可以让 Chrome/Chromium 生成一个 SKP（可能是一个渲染的 SVG），而且很可能我们已经支持了实际需要的大部分或全部 Skia 绘图命令渲染绝大多数 SKP。

我一直在计划为 SVG 插件创建一种代码生成类型的解决方案，以便您可以从 SVG 生成 Dart/Flutter 代码。 我认为在这一点上，研究 SKP 到 Dart 的构建过程可能会更有趣——为 Flutter SVG 编写的一些代码可以移植到框架（例如RawPicture和相关的基础设施，其中大致对应于RawImage ），我们可以连接一些东西来获取 SKP 的输出（可能是由 Chrome 渲染的 SVG 生成的，无论如何这几乎是 SVG 渲染的黄金标准）。 应该可以制作需要 SVG 的工具，调用无头 Chromium 将其渲染为 SKP，然后将 SKP 转换为 Flutter 可以在运行时渲染的一些 Dart 文件。

这没有解决的一个大领域是在运行时动态加载矢量图形（例如SvgPicture.network ），但我很想知道即使有这个限制，这是否仍然是一个值得/可接受的解决方案。

我也是这样说的，相信在这一点上，我们永远不会在 Flutter 中获得对 SVG 的“原生”支持。 这部分是因为 SVG 本身有很多包袱（XML、CSS、获取外部资产的能力），这些包袱在浏览器/HTML 渲染软件之外实现并不简单，并且会给我们正在尝试的软件增加很多臃肿俯身。 这也部分是因为完全有可能实现相当多的 SVG 而无需对框架进行任何巨大的更改 - 尽管一些东西（特别是现在filterEffect s 和textPath s）可能会受益于对引擎的更多调整。

我认为能够直接从网络加载 SVG 是一个主要好处，即使这意味着我们只支持格式功能的一个子集。

拥有 Flutter 特定的矢量格式听起来就像 Android 使用 VectorDrawables 所做的那样，虽然它工作得很好，但这也意味着它不能从 SVG 已经存在的许多工具中受益。 由于所有格式转换，它也使得迭代设计变得很尴尬。

我希望看到 Flutter 原生支持 SVG，因为这是前端开发人员在 2018 年对其框架的期望。我希望前端开发人员发现 Flutter 可访问，因为我希望生态系统能够发展。

@dnfield

.skp (SKIPICT) 格式。

恕我直言，有趣的方法。 但随后 Flutter 工具（至少在 AS 中）需要无缝处理转换。 设计人员在某种程度上习惯了当前 Android 的矢量可绘制导入所施加的限制，因此他们肯定能够处理其他一组注意事项。

对于休闲开发人员，手册应阅读：“将您的 svg 图纸放在此处，在此处添加注释，随意使用。如果您的 svg 不遵守受支持的 SVG 子集（请参见此处）编译器或分析器（ flutter analyze ）会告诉你的svg有什么问题“。 或类似的东西。

@dnfield

让 Chrome/Chromium 生成

对 PoC 和测试很有用，但真正的解决方案恕我直言，可能不需要如此巨大的依赖——而且很难将其编写为 CI 中间步骤。 当然，在测试版中，然后作为第二种“艰难的方式”，它可能没问题——例如。 获得 skPicture 允许的简单动画绘图。 我可能错了。 因为设计师通常在他们的笔记本电脑翻盖下有一个装有浏览器的大桶。 尽管如此，请注意艺术品经常发生变异。 不仅在原型设计阶段，而且随着发布时间的临近，开发人员正处于寻找 bug 的热潮中。

[IE。 我们要么需要一个 Flutter 工具来处理符合标准的 svg 导入，要么我们需要一种方式，让 Chromium 完全掌握在设计师手中。 不是开发商的。]

PS。 launcher_icons包方式可能会在开始时执行： flutter packages pub run flutter_svg_to_skp:main -i path/to/svgs -o path/to/skps 。

-- 我的 ¢2

@cachapa

能够直接从网络加载 SVG

这是一个单独的大包的工作，它将处理验证和解决方法
围绕可能的不兼容性和生产者的怪癖。
首先获取引擎来绘制开发人员提供的“从网络加载 SVG”包肯定会使用的矢量格式。 :)

只是要清楚@cachapa和@ohir - flutter_svg _already_ 支持通过网络加载 SVG ( SvgPicture.network )。 然而，这个包永远不会支持整个 SVG 规范——目标实际上只是支持足够多的规范来渲染大多数 SVG。 它已经做到了，目前的主要例外是fliterEffect s（所以没有模糊，颜色过滤器等）和许多与文本相关的支持 - 但还有一些其他的（ marker不支持，某些类型的xlink:href引用仍然不受支持）。 还有一些我故意不支持的问题，比如完整的 CSS 规范、脚本和交互性。

@lukepighetti我认为这种期望只存在于基于 Web 的前端开发人员身上。 Qt 支持 SVG，但仅支持有限的子集。 GNOME 对 librsvg 的支持更多，但同样存在一些问题（而且在 Linux 环境之外很难使用）。 我很高兴看到 resvg 会发生什么，但我不知道任何集成它的 GUI 库。

@dnfield我不想批评你的工作，因为你做得很好，我非常感谢你。 我只是对颜色没有按预期工作感到失望。 我必须选择自己的颜色，我不是艺术家，我也是色盲。

Flutter 需要像现代浏览器一样支持 SVG。 必须的。 我们需要能够使用直接从网页复制或导入的资产而无需修改。

坦率地说，感谢上帝，至少有一个包，但我们需要颜色，我们需要效果，如果性能是一个问题，而不是让人们关闭功能而不是强迫他们打开功能是可选的。

我们需要对 SVG 的完整规范支持。 我同意@lukepighetti 。 对于 Hummingbird，这是必须的，否则 Web 开发人员会嘲笑 Flutter 并给它一个硬通行证。

甚至@yjbanov在他的文章中也提到了它： https ://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8

由于@dnfield提到了“resvg”， @SocialMammoth也许flutter_svg 也应该针对“SVG static”支持而不是完整的 svg 支持：
http://www.w3.org/TR/SVG11/feature#SVG -static，
我认为这应该让每个人都开心。

甚至 Chrome 也不支持所有 SVG 功能，尤其是从右到左的文本渲染存在问题（过去几年没有任何进展）。 换句话说，我不认为完整的 SVG 支持是现实的。 SVG-static 似乎是一个合理的子集。 在 flutter_svg 中，我错过了文本处理（包括路径上的文本）、过滤器和蒙版。 在 Flutter 中获得支持以构建类似https://drifted.in/horologium-app/的东西会很好

@SocialMammoth

Flutter 需要像现代浏览器一样支持 SVG

不，Flutter 应用程序需要精简。 这个问题与处理所有 SVG 的全能包无关，它明确表示“支持矢量可绘制格式” （不支持 SVG ）。 据我所知，到目前为止，目标是让所有颤振应用程序尽可能地摆脱位图资产。 那是在引擎层面。 @dnfield通过一个包做得很好。 现在是时候从 Dart 中获取一些矢量图形了，而不会使颤振（skia）引擎或应用程序本身膨胀。 .skp的使用似乎是实现该目标的不错选择。 它已经允许比 Android 的 vector-drawable 更多的功能，而且它已经在引擎中了。 设计师将适应其功能集。

@ohir我想我们不同意。 不支持 SVG 文件的前端框架真的是个坏笑话。

好吧，我不认为颤振需要 svg 有用，但它会很好。 如果不是 svg，则比从典型矢量图形应用程序中容易获得的某种格式。

基本上 SVG 是这里使用的标准矢量格式，但我们不可能期望支持 SVG 的所有功能。 我们的目标始终是支持最低要求，以便从典型的矢量图形应用程序中导入矢量资源。 哪些矢量图形应用程序可以读写.skp ？

我对矢量格式是否足够普遍的测试是它是否在 Adob​​e Illustrator、Affinity Designer 和 Inkscape 中可用。 据我所知，几乎离开了 SVG。 我同意我们不需要每个 SVG 功能。 只是基本的路径笔触和填充就可以了。

我不能权威地这么说，但我怀疑实现 SVG 的一个子集比说服矢量图形应用程序支持.skp更容易？

@lukepighetti ：Dan 的想法是使用引擎的内部格式。 该解决方案的关键在于将 SVG 转换为引擎能够理解的格式。 只要存在任何可行的转换器，Inkscape 是否知道这种格式并不重要。

昨天我有疑问，但今天，经过一番研究，在我看来，chrome 自动化得到了很好的支持。 如果 headless chrome可以与渲染代理一起使用，它也可以成为svg->skp转换器。 有点重，但价格实惠。 确实是低悬的果实， @dnfield :)。

这一切都非常符合@Hixie大约三年前设定的目标。

@dnfield如果我错了，请纠正我。
我假设.skp基本上是 Skia 图片的二进制格式。

鉴于dart:ui也有一个可以从 Dart 土地生成的 Skia 图片的包装器，这些图片的内容会不会包含不同的 Skia 功能？ 基本上，来自 Chrome 的那个将使用所有 Skia 功能，而来自dart:ui的那个不会（受限于通过 Flutter 引擎提供的功能）？ “性能”论点有点奇怪，不是吗？ Flutter 引擎和dart:ui删除了所有被认为很慢的 Skia（不显示性能数据），但是如果它通过 Chrome 生成的.skp文件进入，您可以使用所有这些？

另一件事，当使用.skp时，如果图标使用 2 种或更多颜色，您将如何指定图标的颜色？

在 Flutter 中使用 Dart 可以控制每个像素的旧论点怎么样？ 对我来说，支持“svg static”的flutter_svg包是可行的，因为它将支持 Dart 领域的未来创新。 通过绕过 Dart 并让 C++ 处理它，Dart 似乎无法破解它。

Skia 似乎支持 SVG。 为什么 Flutter 不直接提供 SVG 支持？

据我所知，Flutter 团队希望将 Skia 包的大小保持尽可能小。 我不知道 Skia 支持 SVG，但如果支持，那就是唾手可得的成果。 需要说明的是，在 Flutter 中添加 Lottie 支持还有另一个问题，因为 Skia 支持它。

Skia 不支持从 SVG 导入绘图，但对创建 SVG 有一些实验性支持（这里没有那么有用）。

是的，包装尺寸是一个问题。

如果您想寻求 SVG 支持，请参阅： https ://github.com/flutter/flutter/issues/15501

此错误专门与不支持 SVG 的情况下支持矢量图形有关。

对于对矢量图形格式感兴趣的人，我很好奇您的用例。

到目前为止，我知道这些：

• 图标。 可能需要动态重新着色的静态图像（例如，禁用时变灰），并且可能需要根据目标渲染大小具有不同级别的细节。 不可能有文字。

• 动画图标：如上所述的两个图标，以及如何从一个无缝过渡到另一个的描述。

• 背景：可能比屏幕大得多的图像，可能带有视差； 通常带有形状、渐变和阴影的简单场景，不太可能有文字。

是否有其他用例激发您对矢量图形的需求？ 请在此处描述它们。 谢谢。

支持单个图形的多种分辨率，特别是对更高分辨率屏幕的前向兼容性

我的应用程序基本上是会议的伴侣。 我想包括酒店的地图，能够平移和缩放。 由于尺寸和性能的原因，使用高分辨率栅格是不切实际的； 矢量图形是完美的。

现在我正在使用嵌入式 PDF webview，它非常不方便，只能在线工作（尽管如果必须的话，我可能会解决这个问题）。

• 如果没有矢量图形，自定义“看起来很像真实”的旋钮实际上是无法实现的。 尤其是那些旋转、倾斜或熔体剪切的。

补充一下 Dan 所说的：仅 1kB 的矢量源就可以在 7 英寸平板电脑和 105 英寸 4HD 电视上产生精细的细节、流畅的画面。 收银亭应用程序的最新案例，适用于 10 或 14 英寸（面向收银员）和 5 或 7 英寸（面向客户）屏幕。 包含所有 5000 多张矢量图的好东西的大小小于 5MB。 仅将其中的“蔬菜”子集（约 150 个）转换为 png 格式，恰好使用了两个屏幕就超过了 30MB。 完整的库存集可能以 GBytes 范围结束。

PS 下一件大事是定义带有触摸区域的矢量图形，例如，通过选择的填充。 这将为整个类大部分是静态但细节丰富的接口节省数千行代码。
与交互式机械操作手册一样。

抛开梦想 - 让我们的设计师先使用简单的矢量图 :)

感谢您迄今为止的反馈。 很有帮助。

@ohir你能详细说明“旋转、倾斜或融化”吗？

我对此感到非常满意的解决方法是使用path_parsing包（https://pub.dev/packages/path_parsing）从 SVG 路径字符串生成画布绘图命令，然后使用这些制作一个绘制它的CustomPainter小部件。 对于路径以外的其他 SVG 形状（矩形、圆形等），我只是手动将它们转换为绘图命令，这有点乏味但不太难。

这对于简单的矢量图标非常有效，并允许您在整个应用程序中使用具有不同大小和颜色的相同小部件。

这是代码： https ://gist.github.com/jpotterm/7b30739e0af722baf97a397d9841d908

如果有一个官方的 Flutter 命令行工具可以解析 SVG 文件并生成会产生类似结果的画布绘图命令，那将非常有用。

@Hixie
例如。 https://dribbble.com/shots/1083175-空调控制器#
中央旋转旋钮及其周围的仪表可以使用当前的 Canvas API 精心绘制，但它也可以适合 2Kb（xml svg）然后大约 300-500B 的可绘制对象。 如果通过一些“矢量图形”界面显示来自 Skia 关卡的矢量图形和基本仿射变换，只需对仪表段应用填充并旋转指示器小圆圈的路径，就可以使这个旋钮变得活跃。

更重要的是，整个旋钮、颜色和其他细节都将完全按照设计师的计划绘制——因为这将是她所有的作品。 Vector绘图+填充+渐变+好设计师的界面可能看起来像： https ://www.artua.com/app-design-deckadance/
开发人员的仿射变换将使这样的设计反应灵敏且充满活力。
至于倾斜和剪切变换：可以例如。 用于对控制杆换档进行建模。
（“融化”字移可能是由萨尔瓦多·达利的鬼魂引起的；）

/无关/

@jpotterm
如果有一个官方的 Flutter 命令行工具可以解析 SVG 文件并生成会产生类似结果的画布绘图命令，那将非常有用。

我制作了类似的东西。 查找 Annotation 并获取指定 SVG PathData 并生成返回 Path 对象的 getter 的代码生成器。 如果人们愿意，我可以清理它并开源它。

我贡献的应用程序非常适合矢量图形。 它有数百个构建 UI 的小黑白线条艺术图形。 这些可以着色和调整大小。

在所有不同密度的多种颜色中这样做会很糟糕，不可持续，并且会使最终的包装变得巨大。 这些图像来自手绘图形。

感谢大家的反馈。 很有帮助的评论。

对于对矢量图形格式感兴趣的人，我很好奇您的用例。

另一个用例基本上是任何需要动态图形的东西：

• 图表
• 加载条
• 画画
• 等等

实际上，我很惊讶 Flutter 不支持这一点，因为 Skia 支持 SVG 的一个子集（无论如何都是有用的部分）。

我想将 SVG 用于艺术。 高质量的全屏平板电脑 PNG 可以是 2mb 或更多，而等效的 SVG 可以是 5-10kb。 添加几个屏幕，我们说的是 20mb 的包而不是 100kb。

对于程序化图形，我是 CustomPaint 的忠实粉丝，所以我永远不会将 SVG 用于图表、加载条、绘图等。对于那些关心 CustomPaint API 的人来说，它在心理上很像 HTML Canvas API。 是的，虽然我同意在 CustomPaint 中写东西很昂贵，但你最终得到的东西是坚如磐石的，并且渲染得非常快而且非常漂亮。

如果您要支持 SVG，那么您必须支持所有 SVG 功能，如渐变、笔触等。 这不是在 Android 项目中完成的，这给开发人员带来了一些警告标志，因为几乎所有其他开发者都是开发者。 平台支持 SVG 和矢量。 这是图形的基础知识，做对了！

@harounhajem请参阅https://github.com/flutter/flutter/issues/15501了解该主题，以及https://github.com/dnfield/flutter_svg

@PierBover对于图表，请考虑https://pub.dev/packages/charts_flutter

我刚刚跳入 Flutter。 我正在将一个个人应用程序从 Ionic 3 重构为 Ionic 4，它（再次）完全不同，它需要一个从头开始的应用程序。
所以我决定转向 Flutter 并尝试一下。 正如我所说，我已经完成并运行了这个应用程序，其中包括我在我的应用程序上准备好的许多图形和图标。 我不是设计师，我需要为这些设计付费。
我知道在这种情况下我不是唯一一个想要重用他的 SVG 资产的人。

@erperejildo - 见https://pub.dev/packages/flutter_svg

（不知道为什么不关闭）

因为实际问题 - 支持除 SVG 之外的矢量可绘制格式 - 没有解决？

哦，我的错@jonahgreenthal。 我来这里寻找 SVG 支持，看到第三条评论要求同样的事情

Uber 已经为 iOS 做到了这一点： https ://github.com/uber/cyborg
在 Flutter 中看到类似的东西会很有趣。

对此有何更新？

@dnfield可以很好地将 svg 显示为新的小部件，但它不适用于AssetImage属性。 我需要使用CircleAvatar小部件显示它

@Hixie还有一个用例，其中 svg 图标需要有多种颜色，因为它可以帮助用户理解图标的含义。 所以我希望解决方案也包括自定义主题颜色的能力。

目前，有些人建议将 SVG 转换为字体并以与图标包相同的方式使用它，但是在这种情况下我们不能在图标中使用多种颜色。

4年的各种评论没有任何有用的解决方案。 简而言之 - 不，不，可能。 不，没有计划。

我们至少可以知道为什么这会如此成问题/困难吗？

Flutter_svg 在 Flutter 中对 SVG 有很好的支持。 Rive 还支持基于矢量的颤振格式。

这个问题是关于创建一个新的基于矢量的格式。 这需要时间:)

@dnfield有一些带有背景属性的小部件，我们无法传递 svgs。 有什么办法可以存档吗？

请添加适当的 svg 支持，而不是创建新格式。 Svg 是事实上的标准。

每当我创建一个应用程序时，通常都会有一个关联的网站，并且网站使用 svg，并且它们使用精美的动画 svg，它们在任何分辨率下都轻巧美观。
在 Flutter 中重用那些动画 svg 真的很有意义，这样可以正确地实现一致性，而不是重新实现图像和动画！

SVG 已经存在、有效并且在其他任何地方都可以广泛使用和支持。 专注于这就是我们所需要的。

这个问题是关于创建一个新的基于矢量的格式

所以你的意思是，这个问题是关于重新发明轮子的，对吧？ 我同意@d-silveira - 更好地添加内置，对 svg 的适当支持，我们不需要任何新的基于矢量的格式。

是的，这是关于发明一个更好的轮子。 Flutter 已经使用 flutter_svg 支持 SVG。

最好能够在构建时导入 svg 并在内部处理它们，或者在导入期间自动生成代码。 与原生 Android 类似 - 您可以导入 svg，Android 路径定义 xml 将从源 svg 生成。 导入到 Flutter 项目中可以生成 dart 代码以重复使用以绘制矢量资源。

@Hixie可以让事情变得更好，我不会讨论这个，但是我们如何支持一些同时只允许非 svg 图像的小部件？ （例如具有背景属性的那些）

这将是对 flutter_svg 的功能请求。

@Hixie Flutter SVG 可以在那里创建图像，但如果框架在某些情况下更能容忍拍照而不是图像，那就太好了。 归档https://github.com/flutter/flutter/issues/49712

flutter_svg

这是为什么？ 这与flutter_svg包完全无关：

CircleAvatar(
  backgroundImage: MySVGImage(),
)

@Hixie flutter_svg 仅适用于某些情况。 让我给你一个实际的例子：我需要使用一个 REST API，它在它的一些端点中返回图像 url。 这些图像是用户在后台生成的，因此其中一些是 png，一些是 jpg，一些是 svg。 后台不包含url中的文件扩展名，也不支持HEAD，所以我们无法提前知道图像类型。
Flutter 的预期行为将是接收 image.network 中的 url 并处理它，而不是强迫我跳过箍来猜测它是什么类型的图像，如果它是 svg 则切换到 flutter_svg。
所有这些甚至都没有考虑到 flutter_svg 在任何情况下都不是图像的替代品！ :p

一般来说，SVG 也只适用于某些用例。 :-)

这个特定问题是关于具有非 SVG 矢量图形格式的。 如果您有不同的要求，我建议将其作为单独的问题提交。

从前面的讨论中，一些重要的考虑因素是：

• 我们不想要完整的 SVG 支持。 规范中有太多昂贵、重量级和/或重复我们在 Flutter 中已有的内容。
• 我们应该在我们支持的格式中强调这些操作在我们的图形引擎（Skia）中是有效的/高效的/优化的。
• 我们可能希望在构建时处理格式，而不是支持完整的运行时解释器。

那么有人如何为颤振优化的图像创建新的矢量格式呢？ 基于以上，我认为这就是建议的......

也许 Rive 的人可以把一些 SVG 转换库放在一起。 他们已经为 Flutter 提供了一个专有（和开源）的矢量引擎。 @luigi-罗索

为什么不支持将 svg 导入 Flutter 项目。 并转换为 dart 代码/新矢量可绘制等。请注意，在原生 Android 上也是如此，这就是为什么我们不直接使用 svg（我同意这没有多大意义）而是导入到项目中，svg 被剥离不支持和不需要的功能并转换为 android 路径定义。

这对 Flutter 来说不是个好主意吗？

@giaur500这个问题与此无关。 如果您有关于 SVG 的具体建议，请提交单独的问题。

公平地说，本期的许多评论都在讨论 SVG 和 Flutter。

跟随

SVG 非常适合出色的像素级用户界面。 到目前为止，对于大像素来说是最好的。

@lukepighetti是的。 不幸的是，它们都离题了，将它们放在这里不会对 Flutter 产生任何改进。

从前面的讨论中，一些重要的考虑因素是：

• 我们不想要完整的 SVG 支持。 规范中有太多昂贵、重量级和/或重复我们在 Flutter 中已有的内容。
• 我们应该在我们支持的格式中强调这些操作在我们的图形引擎（Skia）中是有效的/高效的/优化的。
• 我们可能希望在构建时处理格式，而不是支持完整的运行时解释器。

构建时间工具会很棒，获取矢量并渲染所有屏幕密度，并将资产添加为图像。 Apples iOS 使用 PDF 图标来做到这一点。

最好能够在构建时导入 svg 并在内部处理它们，或者在导入期间自动生成代码。 与原生 Android 类似 - 您可以导入 svg，Android 路径定义 xml 将从源 svg 生成。 导入到 Flutter 项目中可以生成 dart 代码以重复使用来绘制矢量资源。

我喜欢

@giaur500这个问题与此无关。 如果您有关于 SVG 的具体建议，请提交单独的问题。

新问题已创建： https ://github.com/flutter/flutter/issues/63752

那么这是什么状态呢？
是否有任何意图支持类似于 VectorDrawable 的东西，甚至为 Android 上的那些支持 VectorDrawable 本身？

作为考虑采用生态系统的开发人员，我想说这是一个可以说服我保持原生的强项。

我自己从未尝试过，但 Flutter svg lib 曾经支持 at
矢量可绘制路径的最少关键特征。

2020 年 8 月 15 日星期六 19:46，n00bmind， notifications @github.com 写道：

那么这是什么状态呢？
有没有打算支持类似的东西
VectorDrawable，甚至是 Android 上的 VectorDrawable 本身？

作为考虑采用生态系统的开发人员，我会说这是一个
说服我留在本土的强项..

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/flutter/flutter/issues/1831#issuecomment-674375846 ，
或退订
https://github.com/notifications/unsubscribe-auth/ABI4Y4LWYSYEIWI3RRSSCK3SAZKO5ANCNFSM4B3FXMMQ
.

我想状态什么都不是。 从这个线程这里不存在任何结论，而且我的想法是开发类似于立即关闭的原生矢量可绘制的东西。

flutter svg 包对你不起作用有什么原因吗？ 我们在我们的一个应用程序中使用它取得了巨大的成功。 我从未使用过 Vector Drawable，所以我不确定它与 SVG 相比如何。

对于这种用例，flutter_svg 包似乎值得一看。
@lukepighetti你如何评价它的表现？ 我的使用只是一个启动图像和应用程序中随处可见的一些图标大小的图形，所以没什么特别的。

对于这种用例，flutter_svg 包似乎值得一看。

@lukepighetti你如何评价它的表现？ 我的使用只是一个启动图像和应用程序中随处可见的一些图标大小的图形，所以没什么特别的。

对于您的用例，我认为它非常高。 我认为人们在向 Flutter 团队施加压力让他们在内部做某事之前真的应该试一试。

@lukepighetti

在他们向 Flutter 团队施加压力让他们在内部做某事之前。

这个特定问题的真正问题是，Skia Flutter 图形引擎拥有使“可绘制”矢量格式以最高速度运行所需的一切，而无需导入调用引擎逐步绘制图元的相当重的 dart 包。

我认为人们真的应该试一试_(svg package)_

我认为人们应该在每个可能的地方大声呼吁谷歌员工关注这个 gh-issue，因为现在——四年后——只有负面的公关可能会让谷歌的某个人思考 2020 年的移动框架是否真的应该迫使我们携带我们的应用程序中所有兆字节的光栅图形。

[@Hixie]

除非我遗漏了什么，否则这种颤动功能的实现看起来很像@dnfield的flutter_svg包，它似乎可以解决您描述的用例。 最重要的是，维护者是 Flutter 核心团队的成员，因此我们可以确定它的质量。 如果这个包在https://github.com/flutter/plugins你会感觉好点吗？

如果我缺少某些东西，请随时教育我，以便我可以了解有关此主题的更多信息。

@lukepighetti

我认为问题标题中的“非 SVG”应该是红色、粗体和闪烁的。

这个问题与 svg 格式无关。

OP（和我）希望公开 Skia 的路径 API，以便资产图形可以以紧凑的形式表示 - 即固定字节序的二进制。 Dan 甚至对 Skia做了一个适用于 flutter_svg 的补丁，这反过来又允许我们使用 svg 资产。 尽管我们仍然在应用程序运行时解析 xml 并通过调用引擎进行绘制 - 也适用于捆绑在 apk 中的静态资产。

通过对自定义矢量可绘制格式（我们将其命名为fvd ）的适当支持，设计师工作的解析将发生一次 - 在应用程序构建时，然后fvd格式的对象将直接扔给 Skia。 在图形繁重的应用程序中，这种方法将对应用程序大小产生巨大影响，并显着节省渲染时间。 [引用自己]

我希望上面能说明我如何看待这个问题，并证明我呼吁最终完成它是合理的。
甚至作为 flutter_svg 库的一部分。

Flutter 应该比竞争技术拥有另一个优势。

就其价值而言，使用flutter_svg本身并没有什么问题，只是它甚至缺少一些非常简单的东西，例如它不支持百分比并且在尝试渲染它们时直接崩溃。 这条评论不是对flutter_svg库的敲门声，它只是向那些说我们可以使用flutter_svg的人解释一下。

尽管不支持脚本、HTML、SMIL 等，flutter_svg 似乎工作得很好。

它看起来不错，我们可以从文件资产、网络或普通字符串构建 SVG。