他のランダムな考え（すべてが私のものではありません）：

• パフォーマンスが低下する機能を実装するという既存の期待があるフォーマットのサポートは避けたいと考えています。 たとえば、SVGを実装すると、スクリプト、HTML、SMILなどを含む完全なSVGサポートを期待するようになります。
• drawAtlasなど、Skiaのパフォーマンス機能に非常に密接に一致する形式を明示的に設計する必要があります。

ベクトルのサポートは、さまざまな画面サイズと密度をサポートするアプリフレームワークにとって重要なようです。 そうしないと、次のようなアイコンが表示されます。

これの代わりに：

@HansMuller

Krisもこれについて言及しました：ビルド時にいくつかの制限されたSVG処理を行うことができました。 たとえば、SVGの説明に基づいてMDアイコンウィジェットを生成する場合があります。 注意深く行うと、スペースを節約し、元のデザインへの忠実度を高めることができます。

特にマテリアルデザインアイコンについては、マテリアルデザインアイコンフォントを使用して調査する必要があります。

@appsforartists価値があるので、Cocoaもandroid.viewもアイコンにベクター形式を使用しません。

@abarth iOSについて私を驚かせない-彼らはハードコードされた3.5インチの画面から始めて、それ以来、サポートされている解像度のメンタルモデル/シンプルさを維持しようとかなり懸命に努力してきたようです（各iPhoneの幅が同じであるか、またはオリジナルのiPadとiPadminiの解像度は同じです。モバイル開発についてはよくわかりませんが、Androidがベクターベースではないことについては少し驚きます。

いずれにせよ、アイコンは上のスクリーンショットのようにエイリアスで表示されるべきではなく、ベクトルは解像度に依存しないための優れたソリューションです。 きれいなアイコンを解決するためにどのように実装するかはあなた次第です。 ：スマイリー：

きれいなアイコンを解決するためにどのように実装するかはあなた次第です。

アイコンで表示されていた解像度の問題について、別の問題を提出してもよろしいですか？ @krisgiesingは、多くのケースを処理する解決対応のアセットリゾルバーを実装しました。 それが処理しないケースについて学ぶことは価値があるでしょう。

現在の解像度認識サポートにいくつかのテストを追加することを検討しているので、何かが正しく機能していないかどうかを理解する絶好の機会です。

3xのデバイスピクセル比は2.6のようですが、これにはおそらくアセットがありません。

私は今、この特定のケースを見ています。 デバイスのピクセル比は2.625です。 予想される3.0xアセットを選択しています。 ただし、レンダリング中に何かが起こっているようで、何らかの余分なエイリアシングアーティファクトが発生しています。 そのため、 @ abarthはフォントに切り替えることでマテリアルデザインアイコンのケースを修正しましたが、解像度に依存するスケーリングが必要な他のタイプの画像アセットに代わって調査中です。

ベクトル形式のサポートには接線方向であるため、これを追跡するために別のバグを開きます。

＃2337を参照

Androidは、SVGのパフォーマンスの高いサブセットである「VectorDrawable」形式をサポートしています。 すでにコミュニティのサポートがあり、Androidチームがそのパフォーマンスを適切と見なしていることを考えると、同じ形式の使用を検討してください。

VectorDrawableは確かにSVGの影響を受けますが、サブセットではありません。 また、XMLを使用しているため、考えられる中で最もパフォーマンスの高いベクター形式にならないことがほぼ保証されます。 :-)

VectorDrawableを厳密なサブセットとして説明するのは誤りでしたが、それでも、優れた_render_パフォーマンスの確保と使いやすさの間のバランスの取れた妥協点のようです。 VectorDrawable仕様は、パスデータ構文などの重要な領域のSVG仕様に準拠していることが多く、多くの開発者がすでに使用しているSVGアセットの変換や、既存のAndroidアプリにすでに含まれているVectorDrawableの共有がはるかに簡単になります。

XMLは解析にのみ影響するため、重要なパフォーマンスブロッカーであるとは想像できません。 _render_パフォーマンス（Flutterの60 fpsアプリの目標に影響を与える種類のパフォーマンス）は、一度実行してキャッシュできる解析ステップではなく、Skiaが描画する必要のある一連のベクトル操作に依存しているように見えます。

私は要点を詳しく説明したくありませんが、このための作業はすでに完了しているので、「2.0リリース後」のマイルストーンで棚上げする必要はないと感じずにはいられません。

マテリアルデザインアイコンにマテリアルデザインフォントを使用することになりました。 今日、直接dart:ui呼び出しまたはCustomPaintウィジェット（ https://docs.flutter.io/flutter/widgets/CustomPaint-class）を使用して、誰かがFlutterの上にこれを構築することを妨げる障害を認識していません。 html。 現時点では、そのようなものを構築する予定はありません。

$ .02-ぎこちないブラウザ（そして競合他社のフレームワークReact Nativeは気にしない、彼らのソリューションはハッキー）でさえSVGをレンダリングすることができます。 画像のエクスポートオプションでは、チームのアイコンまたはアートアセットごとに少なくとも3つのファイルを作成する必要があります。 これは、1つのSVGファイルを任意の解像度で表示できるのに比べてお勧めできません。

Hixieによる上記のコメントについては、既存の期待が価値のある機能の実装を妨げるべきではありません。 私はむしろSVGディスプレイの基本的なサポート（私と私のチームの多くの問題を解決する）を持ち、増え続けるPNGに依存して増え続けるPNGに依存するよりも、拡張オプションが利用できないことを知りたいと思っています。画面解像度の数。

チーム用のフォントの作成にフォールバックしていますが、フォント形式によって、アプリで調整する必要のある行の高さと文字の間隔に余分な形式が追加されるため、ネイティブのSVGサポートほど良くありません。 また、フォントは固定解像度（12px、16px、20px、36px ...）で表示される必要がありますが、これも制限があります。

クールなFlutterフレームワークをありがとう。 :)

SVGサポートが必要な人は誰でもSVGサポートをFlutterのDartパッケージとして実装することをお勧めします。

興味のある方は、描画用の低レベルのライブラリであるhttps://docs.flutter.io/flutter/dart-ui/dart-ui-library.htmlを参照してください。

チームから：ダートライブラリは十分な解決策ではありません。 渡すだけです。

それについて詳しく教えていただけますか？ Flutterのフレームワーク全体がDartライブラリです。 ここで実装するものはすべて、Dartライブラリである可能性があります。 「十分に良い」ための要件は何ですか？

その好例として、私は（単純で、網羅的ではない）SVGパーサーをpure-Dartに実装しました。

https://github.com/matanlurey/svg

次のいずれかを行うのは簡単なことです。

a。 ランタイムSVG-> SvgRenderElementを作成します。これは、内部でdart:uiを使用します。
b。 SVGを次のようなものに変換するビルド時のコンパイルステップを作成します。

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

@ deborah-ufw興味があれば、チャットして詳細を確認したいと思います。 メールを送ってもらえますか？

こんにちはセス、マタンルーリー、ヒクソン-ご回答ありがとうございます。 Dartプラグインソリューションを拒否したのはリードエンジニアだったので、私はおそらく深く話すのにふさわしい人物ではありません（したがって、私たちのアプリ用のpngの巨大なライブラリが生成され、私たちのほとんどもうんざりします）。

このGithubの問題へのリンクを彼らに伝え、彼らのコメントの技術的な理由を提供するように依頼したいと思います（これは私が伝えたよりもかなりカラフルになりました）-入力が終わったらすぐにそれを行います。

また、http：//gitter.im/flutter/flutterや、必要に応じてhttps://flutter.io/support/に記載されている他の連絡方法を介してエンジニアと直接チャットすることもできます。 :)

追加します。ありがとうございます！ ：D

もう1つのアプローチは、ネイティブレベルでhttp://svgpp.org/のようなものを統合し、Flutterプラグインシステムを使用して通信することです。 これにより、SVGを完全にサポートするための最適なサイズ/パフォーマンス特性が得られる可能性がありますが、依存関係を維持する必要があります。

エンジンレベルでSVGサポートを探すのはどうですか？ 標準の完全なサポートを期待することは合理的または望ましいとは思いませんが、魅力の一部は、部門の枠を超えたチームと既存のツールのサポートです。

Skiaがいくつかの基本的なSVGサポートを提供しているという印象を受けました。 これをFlutterで利用できるようにする方法はありませんか？

私の知る限り、それは実験的で部分的なものにすぎません。 ここで開いている問題がありますhttps://bugs.chromium.org/p/skia/issues/detail?id=5596ビットそれは1年以上前のものです。 彼らはまたそれを彼らのロードマップにリストしているが、やはりどの優先順位を明確にしていない。

SVGサポートのコア部分であるSVGドキュメントモデルが公開されないため、エンジンレベルでSVGをサポートすることは意味がありません。

FlutterがSVGをサポートしている場合、実際に実際のSVGをサポートするという最終的な目標があります。 機能を中途半端に実装することは、Flutterの哲学に反します。

SVGサポートのコア部分としてSVGドキュメントモデルを公開しているとは思いません。 それはあるといいのですが、私が考えているユースケースでは必須ではありません。

はい、ライブラリレベルのサポートにより、より多くの機能が有効になりますが、エンジン自体がSVGデータ（の重要なサブセット）をレンダリングできる場合は、おそらく、SVGのそのサブセットによって定義されたベクター画像アセットをレンダリングするのに十分です。

この問題は明らかにそれよりも大きいですが、既存のSVGアセットを取得し、それらをすべてかさばるラスターイメージに変換することなく、さまざまな解像度で適切にレンダリングできれば幸いです。

ええ、SVGアセットファイルのインポートは本当に素晴らしいでしょうが、SVGの仕様は800ページ以上の長さです。 静的ファイルをインポートしてSkia（ベクターグラフィックライブラリ）でレンダリングするだけでも問題はありません。 だから私はそれを引き受けています。 いつものように私は週末にパートタイムでしか仕事ができないので、すぐに物事を見ることができません。 また、私は1トンのSVGファイルを持っていますが、それらはすべて同じもの（flaticonからのアイコンコレクション）を使用しているので、この機能を必要とする人々からのサンプルSVGファイルをいただければ幸いです。

カルロス。

私もこれについて少し時間をかけてうなずきました。 これが私が思いついたものです：

エンジンレベルの実装

これは、次の理由で魅力的なようです。

1. 理論的には、 image: new AssetImage('graphics/background.svg')のようなものをサポートして、C / C ++コードを解析してSVGデータをSkiaレンダリングコマンドに変換します
2. エンジンレベルでSkiaにかなり簡単にプラグインできるはずの少なくとも1つの良い候補（https://github.com/svgpp/svgpp）
3. WebKitのSVGロジックは素晴らしいでしょうが、依存関係が多すぎるようです
4. librsvgの移植はあまりうまくいかないと思います（カイロと緊密に連携し、第一言語としてRustに移行します-少なくともバックエンドとしてSkiaに到達する方法を見つける必要があります）

しかし、少なくともいくつかの問題があります。

• テキストを適切に処理する
• CSSを適切に処理する（もしあれば？しかしそれを追加するのは簡単な作業ではありません）
• 追加機能のサポートを拡張する（またはユーザーが機能のサポートをより適切に追加できるようにする）ことは困難です。
• アニメーションを扱うのは非常に難しいようです

ダートレベルの実装

1. Flutterのdart:uiは、SVGがすでに必要としているSkiaの多くのプリミティブを提供します
2. このレベルでは、エンジンレベルよりもテキストレンダリングの方がはるかに簡単に処理できると思います。
3. より多くのコミュニティが維持/拡張するのが簡単になるはずです
4. 解析ロジックとの直接の相互作用をより安価に処理できる必要があります（おそらく例外やアニメーションを処理するためですか？）

しかし、いくつかの問題があります。

• CSSのサポートはそれほど良くないかもしれません
• アニメーションのサポートはそれほど良くないかもしれません
• おそらく遅くなるでしょう（しかし、おそらく問題になるほどで​​はなく、AOTでコンパイルされたSVGからDartコードによって相殺される可能性があります）

テストデータ

サンプルSVGに関する限り、1.1テストスイートからサポートされているSVGを特定することがおそらく最も役立ちます（または、部分的にサポートされている場合は、部分的にサポートされているSVGについて）。 それらはここで見つけることができます：
https://github.com/w3c/web-platform-tests/tree/master/svg/import

または、ここでいくつかのPNG比較を行います： https ：//www.w3.org/Graphics/SVG/Test/20110816/

@cbazza 、これをどのように実装することを考えていますか？ この時点で、私はDartパッケージレベルの実装にもっと傾いています。

また、アイコンタイプのサポートは、おそらくIconDataのようなもので簡単に処理できると思います。 コードポイントごとに1つのパスのみをサポートする必要がある可能性があるため、これを個別に処理するのが最適な場合があります。

dart：uiの上に「ダーツレベルの実装」を考えています。

2つの基本的なユースケース：

（1）静的アイコンsvgファイルを次のようなものでロードします
"image：new AssetImage（ 'graphics / background.svg'）"、ここで、
ファイルはファイルシステムまたはネットワーク経由で取得される可能性があります
動的に。

（2）DSXを使用したウィジェットベースのsvgサポート（JSXのような構成）
これは次のようになります。
https://github.com/react-native-community/react-native-svg

「テストデータ」については、必要な人からの実際のファイルが必要です
これはw3テストスイートではありません。 SVGサポートは依存します
dart：uiがサポートするものに基づいて、必要なsvgファイルに次のものが含まれている場合
dart：uiではできないこと、私はできるでしょう
早く見つけなさい。

カルロス。

私は、react NativeSVGモデルに行くべきではないと思います。 私は実際のケースをサポートしたいと思っていますが、w3スイートをカバーすることで、機能するものと機能しないもの、および実装がどれほど難しいかについてのより良いベースラインが得られると思います）

OK、誤解があるようです...
（1）を実行すると、標準のSVGファイルが必要になり、 dart：ui （Skia）で可能な限りサポートしようとします。
（2）を実行すると、SVGのような構造を処理するウィジェットが作成され、react-native-svgライブラリと非常によく似たものになります。 これらは2つの非常に異なるものです。

@cbazzaアプリでのsvgsのユースケースは、主にアイコンとして使用する1色のsvgsです。 これは、代表的な最近のsvgの選択を含むDropbox上のzipファイルへのリンクです。 https://www.dropbox.com/s/dp38wxc22625cvc/icons.zip?dl=0

ここでの支援に関心をお寄せいただきありがとうございます。SVGFlutterプラグインが実現するのを楽しみにしています。

ややSVGファイルのシーケンスを最小限に解析し、後でアイコンアニメーションを表示するために使用するDartファイルをダンプするツールvitoolを作成しました。

このツールを使用してAnimatedIconsデータを作成しました。手動テストアプリ（ cd dev/manual_tests; flutter run -t lib/animated_icons.dart ）を実行して結果を確認できます。

最適または完全にはほど遠いですが、現在のアニメーションアイコンのセットで機能し、誰かがそれをフォーク/拡張できるようになっていると感じるはずです。

@ deborah-これらの単色アイコンのufwでできることは、アイコンフォントを作成し、アイコンウィジェットを使用してアイコンを表示することです。

@amirhはカラーベクターフォントを作成するのは簡単ではないようです

@amirh上記のスレッド全体を読んだ場合、グリフをアイコンとして使用してフォントを作成および定義することは、SVGがサポートされていないため、実行する必要のある追加の一連の手順です。 SVGのサポートは、フォントよりもはるかに効率的です。 また、zoechiは正しいです-複数の色を持つベクターアートをフォントにすることはほぼ不可能です。

申し訳ありませんが、サンプルアイコンを見て、必要なのは単色のアイコンだけだと思いました。

@ deborah-ufw、ファイルに感謝します。まさに私が探していたもので、私のファイルにはないものがすでに見つかりました。

@amirh 、はい私はあなたの素晴らしい仕事をすでに見ました;）

フラッターのためにsvgまたはvectorアセットxmlを画像にソースする簡単な方法がついにありますか？

@Hixie ：マルチプラットフォームのネイティブモバイルチームの場合、これは実際の問題点であると（再）検討してください。ただし、これを解決するには、部分的で比較的単純なSVGサポートのみが必要です。 SVG標準メンテナにとって、これは中途半端なものと見なすことができますが、Flutterはモバイル開発者向けであり、一般的な標準作成者向けではありません。 Flutterは、実際的な方法でのみであっても、モバイル開発者の非常に現実的な苦痛を軽減すれば、モバイル開発者の心をつかむでしょう。

この長年のニーズにもかかわらず、コミュニティサポートアプローチはFlutterの競合他社であるXamarinで実行可能なソリューションを生み出すことができなかったことも考慮してください（私の5年間のXamarinの経験では、libsは設計ツールのエクスポートを処理できず、制限が多すぎて安定していません、有料および/またはクローズドソース）。

このため、Xamarinコミュニティが失敗した場所でFlutterコミュニティが成功することは楽観的ではありません。 私はそれが実用的だと見積もっています。 SVGアイコンの部分的なサポートは、Flutterチームが既存のSkiaプリミティブを使用して提供できるものです。

これはFlutterの目標によく適合します。つまり、モバイル開発者が記録的な速さで美しく高性能なUXを提供できるようにします。 生産性、忠実度、パフォーマンスが向上します（SVGはこれらすべてのPNGよりもはるかに高速に読み込まれます。アイコンSVGは通常、視覚的な明瞭さの要件が適度な複雑さの形につながるため、適度な計算コストがかかります）。

中心的なニーズは、一般的に使用されるクリエイティブデザイナーツール（Adobeなど）からスケーラブルなネイティブアプリアイコンまでの生産的なワークフローです。

現在のPNGアプローチは、生産性とアプリサイズの点で非常に無駄です。 最大9つの固定ビットマップ（6つのAndroid、3つのiOS）ですべてのアイコンを生成して出荷し、実行時に後処理するのは非常に原始的です。 サイズとバリエーションの解像度が増加するにつれて、問題は着実に増加します。
それは、さもなければ楽しい革新的で生産的なFlutter開発者の経験の中で痛い親指として突き出ています。 Flutterには、ここで開発者の心をつかむ本当の機会があると思います。

また、 @ dnfieldは、Flutterで実装する際の障害として言及されている上記のSVG機能は、私の経験では関連性がないか、まれであるため、これらの設計アセットをPNGにフォールバックすることは小さな不便です。
気にしないでください：CSS、HTML、SMIL、ドキュメントモデル、スクリプト
アニメーション、テキスト：そのために他のテクノロジーにフォールバックするのに十分なほど珍しい

このコメントの長さが、ソリューションにどれだけの価値があるかを伝えてくれることを願っています。 Hth！

@ VincentH-Net私も痛みを感じるので、私はあなたと100％一緒です!!! SVGファイルをいくつか送ってください。 おそらく、Xamarinは、SVGを処理できるベクターグラフィックエンジンがないために、SVGサポートの提供に苦労していました。 これはFlutterwith Skiaには当てはまらないので、コミュニティソリューションが実現することを非常に楽観視しています。

FWIW、XamarinではSkiaSharpでもSkiaを利用できます。 SVGは、最小限の実装でも扱いにくい場合があります。

しかし、 @ cbazza私はこれについてあなたと協力することに非常に興味があります

アニメーションの面では、Lottieを有効にすると、多くのユースケースが満たされると思います（おそらく、デザイナー向けのより優れたツールを使用してそれを行うことができます）。

@dnfieldこれらのLottieアニメーションは、Flutterウィジェットとして簡単に再構築できると思います

@dnfield 、すばらしいです。ウィジェットで上位レベルの作業を行っている間、エンジンレベルの変更を処理する低レベルの人になる可能性があります（非同期svg解析、レンダリングの更新時にキャッシュしてキャンバスに送信できる「画像」構築など）。
はい、Lottieの作業は、デザイナー/開発者のワークフローに最適です。
@zoechiすべてを処理する動作中のLottieウィジェットを単純にインポートできるのに、ウィジェットを使用して手動で何かを再構築するのはなぜですか？ 上記の私の前の目標（2）は、ウィジェットアニメーションでうまく機能すると言っていました（したがって、私もそれをやりたいのです）。

@ zoechi-目標は、デザイナーがそのようなものを作成し、開発者側の最小限の労力でそれらをレンダリングできるようにすることです。 2番目の目標は、事前コンパイルを必要とせずに、実行時にリソースとしてそれらをロードできるようにすることです。

同じことがSVGにも当てはまります-はい、開発者は確かにSVGベクターデータをDartに変換できますが、理想的には、ベクター描画（SVGかどうか）リソースを含めて実行時にレンダリングすることができます。

言い換えれば、ベクターアセットを一度作成して、最小限の変更でFlutterアプリケーションで使用できるようにデザイナーに指示できるようにしたい（そしてデザイナーにさまざまなラスター形式で5回エクスポートさせずに、最終的にはAppleまたはSamsungが次の電話をリリースするとすぐに無効になります）。

さまざまなラスター形式

ええ、それは前の10年のように感じます

https://github.com/luberda-molinet/FFImageLoading一見の価値があるかもしれませんが、Skiaを使用してXamarinのSVGをレンダリングします

@escamoteur

おかげで、それは本当に良さそうです、唯一欠けているのはそれが非同期ではないということです;）

最近Androidアプリケーションでベクタードローアブルのみを使用していますが、目立ったパフォーマンスの低下は見られません。 アイコンはシャープで、アプリのサイズははるかに小さくなっています。 また、さまざまな画像をテストする方がはるかに簡単で高速です。 この@ 2 、 @ 3 、 @ 4 、 @ 5 、....ソリューションは、Flutterのような最新のフレームワークの大きな一歩のように見えます。
Androidのベクタードローアブルを担当するチームに行けず、その問題を解決するために彼らのアイデアや実装（可能であれば）を使用できない理由がわかりません。

私はここでいくつかのSVGがキャンバスに描かれていることをいじくり回してきました。 path要素はおそらく実装が最も難しいですが、公開された場合に本当に役立つSkiaAPIがあります。 私はそれをエンジンで公開することを試みました、そして私がそれを洗練するためにもう少し時間があったらPRを開きます。

大まかなアイデアは、既存のSkia APIを使用して、SVGデータ文字列からdart:ui Pathを作成できるようにすることです。 提案された方法はstatic Path Path.parseFromSvgData(String svgData) -> Pathです

それでも、適用できるさまざまな変換/ストローク/塗りつぶしを解析するためのいくつかの回避策が残っています。 @amirhが行った作業からかなりの量を借りることができると思います（SkParsePathにはない制約があるように見えたため、彼のパス解析ロジックをすべて借りませんでした。SkParsePathのように、必要なのは各描画コマンドの往復ではなく、パスを描画するためのネイティブ側への1回の往復）。 同様の理由で、 @ matanlureyを使用することもありませんでした。

https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart、https://github.com/dnfield/flutter_svg （現在2つのSVGをレンダリングできます）を参照してくださいそのプロジェクトに含まれています）、およびhttps://github.com/dnfield/engine/tree/path_svg （現在、LottieのPathMeasure / PathMetrics関連の作業も含まれています）。

こんにちは@dnfield 、

これがあなたの最初の実装についての私の見解です。 私が何を言おうとしても、あなたの熱意とコーディングの進歩に違いはないはずです。 後でいつでも使用できるので、やればやるほど上手くなります。

私が抱えている問題は建築であり、その理由はここにあります。 UIが60フレーム/秒で応答するために、各フレームはUIをブロックする前に実行するのに最大16ミリ秒しかありません。 それで、半分がFlutterによってそれを行うために使用されていると仮定しましょう。これは、SVGパーサーに8ミリ秒を残し、電話/タブレットがどれほど強力であっても、その期間にSVGファイルを解析して画像を生成する方法はありません。 したがって、最も良い方法は、低速のデバイスをターゲットにして、複数のフレームを使用してこれを実行できる非同期コードを用意することですが、重要なのは、各フレームは最大8ミリ秒しか実行できず、次のフレームに戻って取得する必要があるということです。

したがって、非同期ではないため、 dart：xmlを使用してXMLを解析することはできません。ファイル全体が解析されるまで、XMLはブロックされます。 また、8ミリ秒ですべてを実行できるわけではないため、イメージの生成は非同期である必要があります。 ただし、コードを時期尚早に最適化しても意味がないので、読み取り可能な最高のコードを記述してください。 うまくいく計画はありますが、少し時間がかかりますので、いつでも仕事を引き継いで利用できるので、そのまま続けていただきたいと思います。 私のデザインは現在の画像読み込み機能（AssetImage＆NetworkImage）にプラグインしており、ユーザーは「.png」ではなく「.svg」を指定するだけです。

カルロス。

@cbazzaは単なるアイデアです。解析は分離して実行できます。 UI分離以外の分離からのメッセージチャネルと通信し、コピーする代わりに参照によって分離間でデータを渡すことができるようにするために、いくつかの作業が行われたと思います（ただし、ステータスや進行状況についてはわかりません）

@ cbazza-ありがとう。 dart_xmlがこれに最適なソリューションだとは思いませんが、dart_xmlは機能し、描画ロジックをある程度進めることができます（非同期XMLパーサーの実装中にこれを完全にブロックしたくありませんでした）。 ImageProviderの実装も検討し始めましたが、それはユーザーからわかりにくい実装の詳細になる可能性があると思います。

私はこのAPIのいずれにも設定されていません。 しかし、少なくともSVGの描画を開始することはできますし、まともな電話で単純なものをサポートすることもできます。

XML / SVG読み取り/解析APIに取り組むつもりですか？

@ zoechi-ストリーミングリーダーモデルを使用すると、メモリ使用量と解析時間を大幅に改善できます。

@zoechiはい私は分離を調べましたが、プリミティブ値（null、num、bool、double、String）とリストとマップのみを渡すことができ、オブジェクトやオブジェクトツリーは渡すことができないため、非同期ルートの方が優れているように見えました。 非同期xml解析を理解することについてのもう一つの興味深い点は、概念が、たとえばウィジェットや要素ツリーなどの非同期ツリー処理に適用されることです。 これにより、たとえばReactのファイバーのように非同期調整が可能になります:)

@dnfieldはい私は非同期xml / svgパーサー/プロセッサーに取り組んでいます。

不思議に思うのですが、Webビューを使用してSVGをレンダリングすることはオプションになり得ますか？

単純なボタンには重すぎて、Webビューが60フレーム/秒の変更を処理できるかどうかはわかりません。 たとえば、アイコンを移動したり、拡大縮小したりするとします。

私はiOS開発者ではないので、iOS11もベクターアセットをサポートしていることがわかります。 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もネイティブです。 :(

@ohirKotlinネイティブを使用してiOSとAndroidの両方で機能するクロスプラットフォームビュー（単一コード）を作成する方法を説明してください。 あなたがreactnativeウィジェットの抽象化のkotlinバージョンを作るつもりでない限り？

可能性は無限大なので、Kotlinの先住民が何をするかを過小評価しないでください。 Cocos2d-xを使用してFlutterのようなものを作成する実験からFlutterにたどり着きました。 すべてがオープンソースであり、他家受粉に利用できるため、彼らもそれを使用したり、ReactNativeやFlutterを使用したりできます:)

ええ、完全に同意します。kotlinの愛と開発者からの採用は膨大であり、クロスプラットフォームのコンパイルは可能性を無限に広げます。 しかし、今日のモバイルクロスプラットフォーム向けのFlutterベータ版とKotlinネイティブベータ版の比較は無意味です。
とにかく、主題から逸脱します。

@lukaspiliこれまでのところAndroid用のankoがあります。 そのレイアウトDSLは、それぞれのプラットフォームサブツリーに含まれているapko 、linko 、およびwinko *でもそのまま機能する可能性があります。 しかし、これはFlutterVGの問題のOTです。 [*はまだ存在しません]。

情熱的な会話をありがとう！ この問題は、ベクター形式とAPIのユースケースと要件に焦点を当てたままにしておきたいと思います。 トピックにとどまってくれてありがとう！ :)

これをSVGをサポートするための問題に分割し、これをTBDフラッターベクトル形式用に維持することについて、人々はどう思いますか？

それは私には理にかなっています。 元の問題は、ある種のFlutter固有のベクトル形式として表現されています。

@cbazza Hoorayは、svgのようなサポートを提供します。 基本的にアプリのUI全体を描画するために使用するアイコン以外のsvgがたくさんあります。 どのように送ればいいですか？

フラッターに移行してみたいと思いますが、無数のpngを生成すると、アプリのサイズが大幅に膨れ上がり、見栄えが悪くなります。

はい、ファイルを確認するためのURLを送ってください。

したがって、この時点で、この面では、フラットバッファベースのアプローチを追求しています。 私は、ベクトル描画コマンドをキャプチャできるFlatbufferスキーマの定義に取り組んでいます-多かれ少なかれ、Skiaがパスをキャプチャする方法です。

これはSVGと半相互運用可能であり（たとえば、SVG-> Flatbuffer変換ツール、またはAndroid Vector Drawable XML-> Flatbufferを使用して、SVGの多くのユースケースをカバーできる）、パフォーマンスへの多くの影響を回避できます。 SVGに直面します（ストリーミングXML解析が不足しているため、SVGパスデータを解析してから少しずつネイティブに送信する必要があります）。 また、SVG形式よりも小さいバイナリファイルを作成することもできました（ただし、それがどれだけ適切にスケーリングされるかはまだわかりません）。

また、特定のSVGでサポートされていない機能について、変換ツールで前もって明確にすることも可能です（たとえば、「ForeignElementsはこの形式ではサポートされていません」）。

Flatbuffer解析ビットはDartまたはC ++で実行できます-dartの1つのことは、パスを構築してCanvasに描画するためにコマンドをSkiaにバッチ処理する方法があると便利なことです。

コンパイル時の解析とSVGからSkiaノードへの操作のダイジェストを実行するという潜在的にはるかに単純なソリューションがあります...これにより、SVGの実行時の解析が完全に排除され、中間バッファーの保持モードキャッシングが可能になります

@sandrobilbeisiはhttps://github.com/amirh/flutter/commit/69de4bbf3177d9766a386c55b27a12619da43a05のような意味ですか？

それは注目に値します...そしてvitoolもありますhttps://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart

しかし、私はXcodeがiOS成果物のSVGアセットで使用するようなビルドステップとしてもっと考えていました

@sandrobilbeisiコンパイル時にsvgsからビットマップを作成するという意味ですか？

ところで、Xamarinパッケージのffimageloadingは、レンダリングされたビットマップをキャッシュするため、レンダリングは1回だけです。 また、ネットワーク画像とサイズ変更された画像をキャッシュするため、非常に高速です

ビットマップではなく、元々 < canvas >のベクターグラフィックエンジンであるSkia
https://skia.org/（12年前にGoogleが取得した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ベクターの意味を明確にできますか？ Androidのベクタードローアブルとは異なり、 <svgタグが付いています。

現在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の一部であってはならないと思いますが、それが公式またはコミュニティパッケージであるかどうかは特に関係ありません。

ビッグ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チームはコアエンジニアリングに集中できるようになります。

私は敬意を表して反対します。 バケット5のようなマイルストーンを調べると、チームが何に取り組んでいるのかがわかり、バケット6に行くと、チームが何を優先しているのかがわかります。 また、今後の他のマイルストーンを見れば、彼らが緊急と見なしていないことを知ることができます。

また、フラッターコアに何かを追加する理由は、「プラグインを実行でき、それはすべての人に有効であり、誰もがそれを望んでいる」というだけではありません。 これがプラグインを作成する理由ですが、このリポジトリや他のフラッターリポジトリに追加するには十分ではありません。

プラグインであってはならないものの例：@dnfieldが所有するプラグインの恩恵を受けて使用できるように、 @ dnfieldがエンジンに追加したもの。 このようなプラグインは、エンジンに追加されていない場合、プラグインが実行するすべての機能を実行する可能性はありません。

ボーカルであることは重要ですが、それが成功することを保証するものではありません。 口のある場所にコードを配置することも重要ですが、それでも十分ではありません。 このプロジェクトには多くの透明性があり、開発者の言うことをはっきりと聞いていますが、それは民主主義ではなく、結果を理由にせずに人気投票が勝つという意味ではありません。

はい、Flutterのフレームワークに取り組んでいる開発者がバグに関する議論に気を取られることを心配しないでください。 :-)私たちは議論を読み、皆の意見に非常に気を配っていますが、結局のところ、私たちは明確な指導原則を持っており、最も大きな声に反応するだけではありません。 私たちは慎重な市場分析を行い、コミュニティ全体が何を気にかけているかを判断します。

簡単な質問を残す興味深い会話。 Flutterチームは、Flutterでデザインフェーズ（SVG）からベクターグラフィックスに移行することをどのように推奨していますか？

@lukepighetti https://github.com/dnfield/flutter_svgを試して、どれだけ遠くまで行くかを確認できます。

個人的には、FlutterのSVGファイルに提供されているソリューションに満足していません。 flutter_svgパッケージを使用しましたが、満足していません。

私の意見では、SVGサポートは標準ライブラリでネイティブにサポートされる必要があります。 デスクトップアプリやウェブサイトなどの大画面でFlutterの使用を開始する場合は、これが必須です。

@socialmammothは、あなたが見ている欠陥について詳しく説明できますか？

私がしばらく熟考してきたことの1つは、.skp（SKIAPICT）形式をサポートする価値があるかどうかです。 これを直接行わないのには十分な理由があると思います。フォーマットは、Skiaのバージョンごとに安定していることが保証されていません。

ただし、いくつかの興味深いプロパティがあります。特に、Chrome / ChromiumでSKP（おそらくレンダリングされたSVG）を生成することが可能であり、実際に必要なSkia描画コマンドのほとんどまたはすべてをすでにサポートしている可能性があります。 SKPの大部分をレンダリングします。

SVGからDart / Flutterコードを生成できるように、SVGプラグイン用のcode-genタイプのソリューションを作成することを計画していました。 この時点で、SKPからDartへのビルドプロセスを調査する方がおそらく興味深いと思います。FlutterSVG用に記述されたコードの一部をフレームワークに移植できます（たとえば、 RawPictureおよび関連するインフラストラクチャ。おおよそRawImageに対応し、SKPの出力を取得する何かを接続することができます（おそらくChromeによってレンダリングされたSVGから生成されます。これはとにかくSVGレンダリングのゴールドスタンダードです）。 SVGを使用するツールを作成し、ヘッドレスChromiumを呼び出してSKPにレンダリングし、Flutterが実行時にレンダリングできるいくつかのDartファイルにSKPを変換することが可能であるはずです。

これが解決しない大きな領域の1つは、実行時にベクターグラフィックを動的にロードすることです（例： SvgPicture.network ）が、その制限があっても、これが価値のある/許容できるソリューションであるかどうかについてのフィードバックに興味があります。

また、現時点では、FlutterでSVGの「ネイティブ」サポートを取得することは決してないという信念を持ってこれを言います。 これは、SVG自体に多くの手荷物（XML、CSS、外部アセットをフェッチする機能）があり、ブラウザー/ HTMLレンダリングソフトウェアの外部で実装するのは簡単ではなく、私たちが試しているソフトウェアに多くの肥大化をもたらすためです。身を乗り出す。 また、フレームワークに大きな変更を加えることなく、かなりの量のSVGを実装することが完全に可能であるという理由もありますが、いくつかのこと（特に、現在filterEffectとtextPath ）はおそらくそうなるでしょう。エンジンをさらに微調整することでメリットが得られます。

SVGをネットワークから直接ロードできることは、フォーマットの機能のサブセットのみをサポートすることを意味する場合でも、大きなメリットだと思います。

Flutter固有のベクトル形式を持つことは、AndroidがVectorDrawablesで行っていることのように聞こえます。これは正常に機能しますが、SVGにすでに存在する多くのツールの恩恵を受けられないことも意味します。 また、すべてのフォーマット変換のために、デザインを繰り返すのが面倒になります。

FlutterがSVGをネイティブにサポートすることを望んでいます。これは、フロントエンド開発者が2018年のフレームワークに期待するものだからです。エコシステムを成長させたいので、フロントエンド開発者にFlutterにアクセスできるようにしてもらいたいです。

@dnfield

.skp（SKIAPICT）形式。

私見興味深いアプローチ。 ただし、Flutterツール（少なくともASでは）は、変換をシームレスに処理する必要があります。 デザイナーは、現在のAndroidのベクター描画可能なインポートによって課せられる制限にある程度慣れているため、他の一連の推奨事項と禁止事項に確実に対処できるようになります。

カジュアルな開発者のために、マニュアルは次のように読む必要がありflutter analyze 。あなたのsvgで何が悪いのか"。 またはそのようなもの。

@dnfield

Chrome / Chromiumを生成する

PoCとテストには適していますが、実際のソリューションIMHOは、それほど大きな依存関係を必要としない場合があります。CIの中間ステップとしてスクリプトを作成するのは困難です。 もちろん、ベータ版では、2番目の「難しい方法」としては問題ないかもしれません。 skPictureが可能にする簡単なアニメーション描画を取得します。 私は間違っているかもしれません。 デザイナーは通常、ラップトップのフラップの下にブラウザを備えた大きなバケツを持っています。 それでも、アートワークは頻繁に変化することに注意してください。 プロトタイピングの段階だけでなく、起動時間が近づき、開発者がバグハンティングに熱中しているときも同様です。

[すなわち。 適合したsvgインポートを処理するフラッターツールが必要であるか、クロムが完全に設計者の手に渡る方法が必要です。 開発者のものではありません。]

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_は、ネットワーク（ SvgPicture.network ）を介したSVGのロードをサポートしています。 ただし、そのパッケージがSVG仕様全体をサポートすることは決してありません。目標は、実際には、ほとんどのSVGをレンダリングするのに十分な仕様をサポートすることだけです。 すでにそれを行っていますが、現時点での主な例外はfliterEffectであり（ブラー、カラーフィルターなどはありません）、テキスト関連のサポートがたくさんありますが、他にもいくつかあります（ marker sはサポートされていませんが、証明書タイプのxlink:href参照は引き続きサポートされていません）。 完全なCSS仕様、スクリプト、対話性など、意図的にサポートしていない問題もいくつかあります。

@lukepighetti期待は、Webベースのフロントエンド開発者にのみ実際に存在すると思います。 QtはSVGをサポートしていますが、サブセットは限られています。 GNOMEはlibrsvgでもう少しサポートしますが、これにもいくつかの問題があります（そして、Linux環境の外で使用するのは本当に難しいです）。 resvgで何が起こるかを見るのは楽しみですが、それを統合しているGUIライブラリはわかりません。

@dnfieldあなたは素晴らしい仕事をしてくれたので、あなたの仕事を批判したくありません。本当にありがとうございます。 色が期待どおりに機能しないことに失望しています。 私は自分の色を選ばなければなりませんでした。私は芸術家ではなく、色覚異常でもあります。

Flutterは、最新のブラウザーと同じようにSVGをサポートする必要があります。 それは絶対必要です。 Webページから直接コピーまたはインポートされたアセットを変更せずに使用できる必要があります。

率直に言って、少なくともパッケージはありますが、色が必要です。パフォーマンスが問題になる場合は、機能を強制的にオンにするのではなく、機能をオフにすることをオプションにするよりも、効果が必要です。

SVGの完全な仕様サポートが必要です。 @lukepighettiに同意します。 Hummingbirdの場合、これは必須です。そうしないと、Web開発者はFlutterを笑い、ハードパスを与えます。

@yjbanovでさえ、ここの彼の記事でそれについて言及しています： https ：//medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8

@dnfieldが「resvg」について言及しているので、 @ SocialMammothは、完全なsvgサポートではなく、「SVGstatic」サポートも目指す必要があります。
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はパッケージを介して素晴らしい仕事をしました。 今度は、フラッター（skia）エンジンやアプリ自体を膨らませることなく、Dartからいくつかのベクターグラフィックを入手できるようにします。 .skpの使用は、その目標に適しているようです。 それはすでにAndroidのベクトル描画可能よりも多くを可能にし、それはすでにエンジンにあります。 設計者はその機能セットに対応します。

@ohir私たちはその時同意しないと思います。 SVGファイルをサポートしないフロントエンドフレームワークは本当に悪い冗談です。

ええと、フラッターNEEDS svgは役に立たないと思いますが、それは素晴らしいことです。 そして、svgでない場合は、一般的なベクターグラフィックスアプリケーションから簡単に取得できる形式よりも優れています。

基本的に、SVGはここで使用する標準のベクター形式ですが、SVGのすべての機能のサポートを期待できるとは限りません。 目標は常に、典型的なベクターグラフィックスアプリケーションからベクターアセットをインポートするために最小限をサポートすることでした。 .skpを読み書きできるベクターグラフィックスアプリケーションはどれですか？

ベクター形式が十分に普及しているかどうかの私のテストは、Adobe Illustrator、Affinity Designer、およびInkscapeで利用できるかどうかです。 私の知る限り、ほとんどSVGを離れています。 そして、すべてのSVG機能が必要なわけではないことに同意します。 基本的なパスのストロークと塗りつぶしだけで問題ありません。

権威を持ってこれを言うことはできませんが、ベクターグラフィックスアプリケーションに.skpをサポートするよう説得するよりも、SVGのサブセットを実装する方が簡単だと思います。

@lukepighetti ：Danのアイデアは、エンジンの内部形式を使用することです。 このソリューションの要点は、SVGをエンジンが理解できる形式に変換することです。 実行可能なコンバーターが存在する限り、Inkscapeがこのフォーマットを知っているかどうかは関係ありません。

昨日は疑問でしたが、今日は少し調べてみると、クロムの自動化は十分にサポートされているようです。 ヘッドレスクロームをレンダリングプロキシで使用できる場合は、 svg->skpコンバーターにすることもできます。 少し重いですが、手頃な価格です。 確かにぶら下がっている果物、 @ dnfield :)。

それはすべて、ほぼ3年前に@Hixieによって設定された目標にうまく適合しています。

@dnfield間違っている場合は、訂正してください。
.skpは基本的にSkiaPictureのバイナリ形式だと思います。

dart：uiにはダートランドから生成できるSkia Pictureのラッパーもあるので、これらの画像のコンテンツにはさまざまなSkia機能が含まれていませんか？ 基本的に、ChromeのものはすべてのSkia機能を使用しますが、 dart：uiのものは使用しません（Flutterエンジンを介して利用可能になったものによって制限されます）？ 「パフォーマンス」の議論はちょっと変ですね。 Flutter engine＆ dart：uiは、遅いと見なされたすべてのSkiaを（パフォーマンスの数値を表示せずに）削除しますが、Chromeで生成された.skpファイルを介して入ってくる場合は、それらすべてを使用できますか？

もう1つ、 .skpを使用する場合、たとえばアイコンが2色以上を使用している場合、アイコンの色をどのように指定しますか？

FlutterでDartを使用することで、すべてのピクセルを制御できるという古い議論はどうですか？ 私にとって、「svg static」をサポートするflutter_svgパッケージは、ダートランドでの将来のイノベーションを可能にするため、進むべき道です。 Dartをバイパスし、C ++に処理させるだけでは、Dartはそれをハックできなかったようです。

SkiaはSVGをサポートしているようです。 FlutterがSVGサポートを直接提供しないのはなぜですか？

Flutterチームは、Skiaパッケージのサイズをできるだけ小さくしたいと考えています。 SkiaがSVGをサポートしていることを知りませんでしたが、サポートしている場合、それは低ぶら下がっている果物です。 注意として、Skiaがサポートしているため、FlutterにLottieサポートを追加することには別の問題があります。

SkiaはSVGからの図面のインポートをサポートしていませんが、SVGを作成するための実験的なサポートがあります（これはここではそれほど有用ではありません）。

そして、はい、パッケージサイズは懸念事項です。

SVGサポートを要求する場合は、 https ：//github.com/flutter/flutter/issues/15501を参照してください。

このバグは、特にSVGをサポートせずにベクターグラフィックスをサポートすることに関するものです。

ベクターグラフィック形式に興味のある人のために、私はあなたのユースケースに興味があります。

私はこれまでにこれらを知っています：

• アイコン。 動的に色を変更する必要がある静的な画像（たとえば、無効にするとグレー表示される）、およびターゲットのレンダリングサイズに応じてさまざまな詳細レベルが必要になる場合があります。 テキストがない可能性があります。

• アニメーションアイコン：上記の2つのアイコンと、一方から他方にシームレスに移行する方法の説明。

• 背景：画面よりもはるかに大きく、視差で表示される可能性のある画像。 形、グラデーション、影のある一般的に単純なシーンで、テキストがない可能性があります。

ベクターグラフィックの必要性を動機付ける他のユースケースはありますか？ ここに説明してください。 ありがとう。

1つのグラフィックで複数の解像度をサポートし、特に高解像度の画面の上位互換性を備えています

私のアプリは基本的に会議の仲間です。 パンとズームができるホテルの地図を含めたいと思います。 サイズとパフォーマンスの理由から、高解像度のラスターを使用することは実用的ではありません。 ベクターグラフィックスは完璧です。

現在、私は埋め込まれたPDF Webビューを使用しています。これは非常に不便で、オンラインでしか機能しません（ただし、必要に応じて回避できる可能性があります）。

• カスタムの「そっくりの本物の」ノブは、ベクターグラフィックスなしでは実質的に達成できません。 特に、回転、スキュー、または溶融せん断を行うもの。

ダンの発言に加えて、わずか1kBのベクトルソースで、7インチタブレットと105インチ4HDTVの両方で細部まで滑らかな画像を生成できます。 10または14 "（レジ係向け）および5または7"（顧客向け）画面用のレジキオスクアプリからの最近のケース。 グッズの5000以上のすべてのベクター図面のセットは、サイズが5MB未満でした。 使用された正確な2つの画面のpngに変換された「野菜」サブセット（〜150）は、30MBを超えていました。 完全なインベントリセットはGBytesの範囲で終了する場合があります。

PS次の大きなことは、たとえば選択した塗りつぶしを介して、タッチ領域が定義されたベクターグラフィックスを作成することです。 これにより、ほとんど静的であるが詳細が豊富なインターフェイスのクラス全体で数千行のコードを節約できたはずです。
インタラクティブな機械操作マニュアルのように。

夢はさておき、最初にデザイナーに簡単なベクター描画を使用させてください:)

これまでのフィードバックに感謝します。 非常に役立ちます。

@ohir 「回転、ゆがみ、または溶ける」について詳しく説明していただけますか？

私が実際に非常に満足しているこの回避策は、 path_parsingパッケージ（https://pub.dev/packages/path_parsing）を使用してSVGパス文字列からキャンバス描画コマンドを生成し、それらを使用することです。それを描画するCustomPainterウィジェットを作成します。 パス以外の他のSVGシェイプ（長方形、円など）の場合、手動で描画コマンドに変換します。これは少し面倒ですが、それほど難しくはありません。

これは単純なベクターアイコンに非常によく機能し、アプリ全体で異なるサイズと色の同じウィジェットを使用できます。

コードは次のとおりです： https ：//gist.github.com/jpotterm/7b30739e0af722baf97a397d9841d908

SVGファイルを解析し、同様の結果を生成するキャンバス描画コマンドを生成する公式のフラッターコマンドラインツールがあれば、非常に便利です。

@Hixie
例えば。 https://dribbble.com/shots/1083175-エアコン-コントローラー＃
中央の回転ノブとその周囲のゲージは、現在のCanvas APIを使用して細心の注意を払って描画できますが、2Kb（xml svg）に収まり、約300〜500Bの描画可能になります。 いくつかの「ベクトルグラフィックス」インターフェイスを介して公開されたSkiaレベルからのベクトルグラフィックスと基本的なアフィン変換である場合、このノブは、ゲージセグメントに塗りつぶしを適用し、インジケーターの小さな円のパスを回転させるだけで生き生きとさせることができます。

さらに重要なのは、色やその他の詳細を含むこのノブ全体が、デザイナーが計画したとおりに描画されることです。これは、彼女のすべての作業が埋め込まれているためです。 ベクトル描画のインターフェイス+塗りつぶし+グラデーション+優れたデザイナーは次のようになります： https ：//www.artua.com/app-design-deckadance/
開発者側でのアフィン変換により、このようなデザインは応答性が高く活気に満ちたものになります。
スキュー、およびせん断変換については、次のようになります。 コントロールレバーのシフトをモデル化するために使用されます。
（サルバドール・ダリの幽霊によって引き起こされた可能性が高い「メルト」ワードシフト;）

/オフトピック/

@jpotterm
SVGファイルを解析し、同様の結果を生成するキャンバス描画コマンドを生成する公式のフラッターコマンドラインツールがあれば、非常に便利です。

私は似たようなものを作りました。 アノテーションを検索し、指定されたSVG PathDataを取得して、Pathオブジェクトを返すゲッターを生成するコードジェネレーター。 人々が望むなら、私はそれをクリーンアップしてオープンソースにすることができます。

私が寄稿しているアプリは、ベクターグラフィックスに最適です。 UIを構築する何百もの小さな白黒の線画グラフィックがあります。 これらは色付けやサイズ変更が可能です。

すべての異なる密度で複数の色でこれを行うことは、行うのがひどく、持続不可能であり、最終的なパッケージを巨大にするでしょう。 これらの画像は手描きのグラフィックから来ています。

皆様からのフィードバックに感謝します。 非常に役立つコメント。

ベクターグラフィック形式に興味のある人のために、私はあなたのユースケースに興味があります。

もう1つの使用例は、基本的に動的グラフィックスを必要とするものです。

• チャート
• ローディングバー
• 図
• 等

私は実際、SkiaがSVGのサブセット（とにかく便利な部分）をサポートしているので、Flutterがそれをサポートしていないことに非常に驚いています。

アートにSVGを使いたいです。 高品質のフルスクリーンタブレットPNGは2MB以上にすることができますが、同等のSVGは5〜10kbにすることができます。 いくつかの画面を追加すると、100kbではなく20mbがパッケージに追加されます。

プログラマティックグラフィックスの場合、私はCustomPaintの大ファンなので、グラフ、バーの読み込み、描画などにSVGを使用することはありません。CustomPaintAPIを心配している人にとっては、精神的にはHTML CanvasAPIによく似ています。 はい、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に飛び込んだところです。 私は個人用アプリをIonic3からIonic4にリファクタリングしていましたが、それは（再び）まったく異なり、アプリを最初から作成する必要がありました。
そこで、Flutterに移動して試してみることにしました。 私が言ったように、私はこのアプリを完成させて動作させました。これには、アプリで準備した多くのグラフィックとアイコンが含まれています。 私はデザイナーではないので、このデザインにお金を払う必要があります。
彼のSVGアセットを再利用したいと思っているのは、私だけではないことを理解しています。

@ erperejildo - https： //pub.dev/packages/flutter_svgを参照

（なぜこれが閉じられないのかわかりません）

実際の問題（SVG以外のベクター描画可能形式をサポート）は解決されていないのでしょうか？

ああ、私のせい@jonahgreenthal。 私はSVGサポートを探してここに来て、3番目のコメントが同じことを求めているのを見ました

UberはiOS用にこれを行いました： https ：//github.com/uber/cyborg
Flutterでそのようなものを見るのは面白いでしょう。

これに関する更新はありますか？

@dnfieldは、svgを新しいウィジェットとして表示するのに問題なく機能しましたが、 AssetImageプロパティでは機能しません。 CircleAvatarウィジェットを使用して表示する必要があります

@Hixieは、ユーザーがアイコンの意味を理解するのに役立つため、svgアイコンに複数の色を付ける必要があるユースケースもあります。 したがって、ソリューションにテーマの色をカスタマイズする機能も含まれることを願っています。

現在、SVGをフォントに変換し、アイコンパッケージと同じように使用することを提案する人もいますが、この場合、アイコンに複数の色を含めることはできません。

有用な解決策のない4年間のさまざまなコメント。 要するに-いいえ、不可能です。 いいえ、予定されていません。

少なくとも、なぜこれがそれほど問題がある/難しいのかを知ることができますか？

Flutter_svgは、flutterでのSVGを適切にサポートしています。 Riveは、フラッターのベクトルベースの形式もサポートしています。

この問題は、新しいベクターベースのフォーマットの作成に関するものです。 それには時間がかかります:)

@dnfieldsvgsを渡すことができない背景プロパティを持つウィジェットがいくつかあります。 これをアーカイブする方法はありますか？

新しいフォーマットを作成する代わりに、適切なsvgサポートを追加してください。 Svgは事実上の標準です。

私がアプリを作成するときはいつでも、通常は関連するWebサイトがあり、Webサイトはsvgを使用し、美しくアニメーション化されたsvgを使用します。これは、軽量で、どの解像度でも美しいです。
画像やアニメーションを再実装する代わりに、一貫性を適切に実現できるように、これらのアニメーション化されたsvgをFlutterで再利用することは本当に理にかなっています。

SVGはすでに存在し、機能しており、他の場所で広く使用され、サポートされています。 それに焦点を当てることが私たちに必要なことです。

この問題は、新しいベクターベースのフォーマットの作成に関するものです

つまり、この問題は車輪の再発明に関するものですよね？ 私は@ d-silveiraに同意します-組み込みのより良い、svgの適切なサポート、新しいベクターベースのフォーマットは必要ありません。

はい、それはより良いホイールを発明することです。 SVGは、flutter_svgを使用するFlutterですでにサポートされています。

ビルド時にsvgをインポートして内部で処理できるようにするか、インポート中にコードを自動生成できるようにすることをお勧めします。 ネイティブAndroidと同様に、svgをインポートでき、Androidパス定義xmlはソースsvgから生成されます。 Flutterプロジェクトにインポートすると、ベクターアセットを描画するために再利用されるダーツコードが生成される可能性があります。

@Hixieは物事をより良くするのに良いです、それについては議論しませんが、その間に非svg画像のみを許可するいくつかのウィジェットをどのようにサポートできますか？ （たとえば、背景プロパティを持つもの）

それはflutter_svgの機能リクエストになります。

@Hixie Flutter SVGはそこで画像を作成できますが、場合によっては、フレームワークが画像よりも写真を撮るのに寛容であるとよいでしょう。 提出済みhttps://github.com/flutter/flutter/issues/49712

flutter_svg

何故ですか？ これはflutter_svgパッケージとはまったく関係ありません。

CircleAvatar(
  backgroundImage: MySVGImage(),
)

@Hixie flutter_svgは、一部のケースでのみ機能します。 実用的な例を挙げましょう。エンドポイントの一部で画像のURLを返すRESTAPIを使用する必要があります。 画像はバックオフィスでユーザーが生成したものであるため、一部はpng、一部はjpg、一部はsvgです。 バックオフィスはURLにファイル拡張子を含めておらず、HEADをサポートしていないため、画像の種類を事前に知る方法はありません。
flutterの予想される動作は、画像の種類を推測するためにフープをジャンプするのではなく、image.networkでURLを受信して​​処理することであり、svgの場合はflutter_svgに切り替えます。
これはすべて、flutter_svgがすべての場合に画像のドロップイン置換ではないという事実を考慮に入れていません！ ：p

SVGは一般的に、一部のユースケースでも機能します。 :-)

この特定の問題は、非SVGベクターグラフィックス形式の使用に関するものです。 別の要件がある場合は、別の問題として提出することをお勧めします。

以前の議論から、いくつかの重要な考慮事項は次のとおりです。

• SVGの完全なサポートは必要ありません。 スペックには、高価で重量があり、Flutterにすでにあるものと重複しているものが多すぎます。
• サポートされている形式で、これらの操作がグラフィックエンジン（Skia）で効果的/効率的/最適化されていることを強調する必要があります。
• 完全なランタイムインタープリターをサポートするのではなく、ビルド時にフォーマットを処理したい場合があります。

では、フラッター用に最適化された画像用の新しいベクター形式を作成するにはどうすればよいでしょうか。 上記に基づいて、私はそれが提案されているものだと思います...

たぶん、Riveにいる人たちは、SVG変換ライブラリをまとめることができます。 彼らはすでにFlutter専用の（そしてオープンソースの）ベクトルエンジンを持っています。 @ luigi-rosso

Flutterプロジェクトにsvgをインポートするサポートを追加しないのはなぜですか。 そして、ダートコード/新しいベクタードローアブルなどに変換します。同じ状況がネイティブAndroidでもあることに注意してください。そのため、svgを直接使用せず（私はあまり意味がないことに同意します）、代わりにプロジェクトにインポートします。svgはから削除されます。サポートされておらず、機能も必要ありません。Androidパス定義に変換されます。

Flutterにとってそれは良い考えではありませんか？

@ giaur500この問題はそれについてではありません。 特にSVGについて提案がある場合は、別の問題を提出してください。

公平を期すために、この号のコメントの多くはSVGとFlutterについて議論しています。

従う

SVGは、優れたピクセルレベルのユーザーインターフェイスに最適です。 優れたピクセルとしては、これまでのところ適切に最適です。

@lukepighettiはい。 残念ながら、これらはすべてトピックから外れており、ここに配置してもFlutterが改善されることはありません。

以前の議論から、いくつかの重要な考慮事項は次のとおりです。

• SVGの完全なサポートは必要ありません。 スペックには、高価で重量があり、Flutterにすでにあるものと重複しているものが多すぎます。
• サポートされている形式で、これらの操作がグラフィックエンジン（Skia）で効果的/効率的/最適化されていることを強調する必要があります。
• 完全なランタイムインタープリターをサポートするのではなく、ビルド時にフォーマットを処理したい場合があります。

ビルドタイムツールは素晴らしいでしょう。ベクトルを取り、すべての画面密度をレンダリングし、アセットを画像として追加します。 ApplesiOSはPDFアイコンでこれを行います。

ビルド時にsvgをインポートして内部で処理できるようにするか、インポート中にコードを自動生成できるようにすることをお勧めします。 ネイティブAndroidと同様に、svgをインポートでき、Androidパス定義xmlはソースsvgから生成されます。 Flutterプロジェクトにインポートすると、ベクターアセットを描画するために再利用されるダーツコードが生成される可能性があります。

それはいいですね

@ giaur500この問題はそれについてではありません。 特にSVGについて提案がある場合は、別の問題を提出してください。

新しい問題が作成されました： https ：//github.com/flutter/flutter/issues/63752

それで、これの状態は何ですか？
VectorDrawableに似たもの、またはAndroid上のVectorDrawable自体をサポートする意図はありますか？

エコシステムの採用を検討している開発者として、これは私がネイティブであり続けることを納得させる強みだと思います。

自分で試したことはありませんが、flutter svglibは
パスのようなベクトル描画可能の最も重要でない機能。

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パッケージが機能しない理由はありますか？ 私たちは、私たちのアプリの1つで大成功を収めてそれを使用しています。 Vector Drawableを使用したことがないので、SVGと比較してわかりません。

flutter_svgパッケージは、この種のユースケースを探す価値があるようです。
@lukepighettiそのパフォーマンスをどのように評価しますか？ 私の使用法は、スプラッシュ画像とアプリのあちこちにあるアイコンサイズのグラフィックスだけなので、派手なものは何もありません。

flutter_svgパッケージは、この種のユースケースを探す価値があるようです。

@lukepighettiそのパフォーマンスをどのように評価しますか？ 私の使用法は、スプラッシュ画像とアプリのあちこちにあるアイコンサイズのグラフィックスだけなので、派手なものは何もありません。

私はあなたのユースケースのためにそれを非常に高く評価します。 フラッターチームに社内で何かをするようにプレッシャーをかける前に、実際に試してみる必要があると思います。

@lukepighetti

彼らがフラッターチームに内部で何かをするように圧力をかける前に。

この特定の問題の本当の問題は、FlutterグラフィックエンジンのSkiaが、エンジンを呼び出してプリミティブを段階的に描画する非常に重いダーツパッケージをインポートせずに、「描画可能な」ベクトル形式を最高速度で実行するために必要なすべてを備えていることです。

人々は本当にそれを_（svgパッケージ）_試してみるべきだと思います

人々は大声で、あらゆる場所でGoogle社員にこのghの問題を呼びかけるべきだと思います。なぜなら、今では4年後、2020年のモバイルフレームワークが本当に私たちに実行を強いるべきかどうかを考えるために、否定的なPRだけがGoogleの誰かを蹴る可能性があるからです。アプリ内のすべてのメガバイトのラスターグラフィックス。

[@Hixie]

私が何かを見逃していない限り、そのようなフラッター機能の実装は、あなたが説明しているユースケースを解決するように見える@dnfieldのflutter_svgパッケージによく似ています。 その上、メンテナはコアのFlutterチームに所属しているので、その品質を確認できます。 このパッケージがhttps://github.com/flutter/pluginsにあると、気分が良くなりますか？

私が見逃しているものがある場合は、このトピックについてもっと学ぶことができるように、遠慮なく私を教育してください。

@lukepighetti

号のタイトルにある「notSVG」は、赤く、太字で、点滅させる必要があると思います。

この問題は、特にsvg形式に関するものではありません。

OP（および私）は、アセットグラフィックをコンパクトな形式（つまり、固定エンディアンのバイナリ）で表現できるように、SkiaのパスAPIを公開することを望んでいました。 Danは、flutter_svgで機能するSkiaにパッチを適用しました。これにより、svgアセットを使用できるようになりました。 それでも、アプリの実行時にxmlを解析し、エンジンを呼び出して描画します—apkにバンドルされている静的アセットについても同様です。

カスタムベクタードローアブル形式（名前をfvd ）を適切にサポートすると、デザイナー作業の解析が1回行われ、アプリのビルド時に、 fvd形式のオブジェクトがSkiaに直接スローされます。 グラフィックを多用するアプリでは、このようなアプローチはアプリのサイズに多大な影響を与え、レンダリング時間の大幅な節約になります。 [自己引用]

上記が私がこの問題をどのように見ているかを示しており、ついにそれを実行するという私の呼びかけを正当化することを願っています。
flutter_svgライブラリの一部としても。

Flutterは、競合するテクノロジーに比べてさらに別の利点があります。

価値のあることとして、flutter_svgを使用することに本質的に問題はありません。それは、パーセンテージをサポートしておらず、レンダリングしようとしたときにクラッシュするなど、非常に単純なものさえ欠けているだけです。 このコメントはflutter_svgライブラリをノックしたものではなく、flutter_svgを使用できると言っている人々に説明するためのものです。

flutter_svgは、スクリプト、HTML、SMILなどをサポートしていないにもかかわらず、非常にうまく機能しているようです。

見た目は良く、ファイルアセット、ネットワーク、または通常の文字列からSVGを構築できます。