Andere zufällige Gedanken (nicht alle von mir):

• Wir möchten wirklich vermeiden, ein Format zu unterstützen, bei dem bereits die Erwartung besteht, Funktionen zu implementieren, die nicht leistungsfähig sein werden. Zum Beispiel wird die Implementierung von SVG dazu führen, dass die Leute volle SVG-Unterstützung erwarten, einschließlich Skripting, HTML, SMIL usw.
• Wir sollten unser Format explizit sehr eng an Leistungsmerkmalen in Skia orientieren, zB drawAtlas.

Die Vektorunterstützung scheint entscheidend für ein App-Framework zu sein, das verschiedene Bildschirmgrößen und -dichten unterstützt. Andernfalls erhalten Sie Symbole, die wie folgt aussehen:

An Stelle von:

@HansMüller

Kris erwähnte dies ebenfalls: Wir könnten während der Erstellungszeit eine begrenzte SVG-Verarbeitung durchführen. Beispielsweise könnten wir MD-Symbol-Widgets basierend auf den SVG-Beschreibungen generieren. Wenn dies sorgfältig durchgeführt wird, kann dies Platz sparen und die Treue zu den ursprünglichen Designs erhöhen.

Speziell für Materialdesign-Icons sollten wir die Materialdesign-Icon-Schriftart untersuchen.

@appsforartists Für das, was es wert ist, verwenden weder Cocoa noch android.view Vektorformate für Symbole.

@abarth Überrascht mich nicht über iOS - es scheint, als hätten sie mit einem fest codierten 3,5-Zoll-Bildschirm begonnen und sich seitdem ziemlich bemüht, dieses mentale Modell / diese Einfachheit der unterstützten Auflösungen beizubehalten (siehe: Die Breite jedes iPhones ist gleich oder das ursprüngliche iPad und das iPad mini haben die gleiche Auflösung.) Ich weiß nicht viel über mobile Entwicklung, aber das ist etwas überraschend, dass Android nicht vektorbasiert ist.

In jedem Fall sollten die Symbole nicht wie im obigen Screenshot aliased aussehen, und Vektoren sind eine schöne Lösung für Auflösungsunabhängigkeit. Wie Sie implementieren, um nach hübschen Symbolen zu suchen, liegt ganz bei Ihnen. :smiley:

Wie Sie implementieren, um nach hübschen Symbolen zu suchen, liegt ganz bei Ihnen.

Wären Sie bereit, ein separates Problem zu dem Auflösungsproblem einzureichen, das Sie mit Symbolen gesehen haben? @krisgiesing hat einen auflösungsfähigen Asset-Resolver implementiert, der viele Fälle behandelt. Es wäre wertvoll, etwas über die Fälle zu erfahren, die es nicht bearbeitet.

Ich bin dabei, einige Tests für die Unterstützung der aktuellen Resolution Awareness hinzuzufügen, daher wäre jetzt ein guter Zeitpunkt, um zu verstehen, ob etwas nicht richtig funktioniert.

Es sieht so aus, als hätte das 3x ein Gerätepixelverhältnis von 2.6 , für das wir wahrscheinlich kein Asset haben.

Ich schaue mir jetzt diesen speziellen Fall an. Das Pixelverhältnis des Geräts beträgt 2,625; Wir wählen das 3,0-fache Asset, was erwartet wird. Während des Renderns scheint jedoch etwas vorzugehen, das zusätzliche Aliasing-Artefakte verursacht. Obwohl @abarth den Fall der Material Design-Symbole durch Wechseln zu einer Schriftart behoben hat, untersuche ich immer noch im Namen anderer Arten von Bild-Assets, die eine auflösungsabhängige Skalierung erfordern.

Ich werde einen weiteren Fehler öffnen, um dies zu verfolgen, da dies tangential zur Unterstützung eines Vektorformats ist.

Siehe #2337

Android unterstützt das "VectorDrawable"-Format, das nur eine gut funktionierende Teilmenge von SVG ist. Ich hoffe, Sie erwägen, dasselbe Format zu verwenden, da es bereits von der Community unterstützt wird und das Android-Team seine Leistung offenbar für angemessen hält.

VectorDrawable wird sicherlich von SVG beeinflusst, aber es ist keine Teilmenge. Außerdem verwendet es XML, was so ziemlich garantiert, dass es nicht das leistungsstärkste Vektorformat sein wird, das man sich vorstellen kann. :-)

Es war falsch, VectorDrawable als strikte Teilmenge zu beschreiben, aber es scheint immer noch ein ausgewogener Kompromiss zwischen der Sicherstellung einer guten _Render_-Performance und Benutzerfreundlichkeit zu sein. Die VectorDrawable-Spezifikation weicht in Schlüsselbereichen wie der Pfaddatensyntax häufig von der SVG-Spezifikation ab, wodurch es viel einfacher wird, SVG-Assets zu konvertieren, die viele Entwickler bereits verwenden, und VectorDrawables zu teilen, die bereits in bestehenden Android-Apps enthalten sind.

Ich kann mir nicht vorstellen, dass XML ein signifikanter Leistungsblocker ist, da es nur das Parsen betrifft. Es scheint mir, dass die _Render_-Leistung - die Art von Leistung, die Flutters Ziel von 60-fps-Apps beeinflusst - mehr von den Vektoroperationen abhängt, die Skia zeichnen muss, und nicht von einem Parsing-Schritt, der einmal durchgeführt und zwischengespeichert werden kann.

Ich möchte den Punkt nicht vertiefen, aber ich werde das Gefühl nicht los, dass die Arbeit dafür bereits getan wurde und daher nicht in den Meilenstein „nach der Veröffentlichung von 2.0“ verschoben werden muss.

Am Ende haben wir die Material Design-Schriftart für die Material Design-Icons verwendet. Mir sind keine Hindernisse bekannt, die jemanden daran hindern, dies heute mit direkten dart:ui -Aufrufen oder einem CustomPaint-Widget auf Flutter aufzubauen: https://docs.flutter.io/flutter/widgets/CustomPaint-class. html. Wir haben derzeit keine unmittelbaren Pläne, eine solche zu bauen.

$ 0,02 - sogar ruckelige Browser ( und das Konkurrenz-Framework React Native , egal, ihre Lösung ist hacky) können SVG rendern. Die Bildexportoption erfordert das Erstellen von mindestens 3 Dateien für jedes Symbol oder Kunstobjekt für mein Team. Das ist eine schlechte Praxis im Vergleich zu einer SVG-Datei, die in jeder Auflösung angezeigt werden kann.

Für den obigen Kommentar von Hixie sollten bereits bestehende Erwartungen die Implementierung eines lohnenden Features nicht verhindern. Ich hätte viel lieber eine grundlegende Unterstützung für die SVG-Anzeige (die viele Probleme für mich und mein Team löst) und finde heraus, dass erweiterte Optionen nicht verfügbar sind, als mich auf eine ständig wachsende Anzahl von PNGs zu verlassen, um der ständig wachsenden Zahl gerecht zu werden Anzahl Bildschirmauflösungen.

Ich greife darauf zurück, eine Schriftart für mein Team zu erstellen, aber das ist nicht so gut wie die native SVG-Unterstützung, da das Schriftartformat zusätzliche Formatierungen für Zeilenhöhe und Buchstabenabstand hinzufügt, die in der App angepasst werden müssen. Außerdem möchten Schriftarten mit festen Auflösungen (12px, 16px, 20px, 36px...) angezeigt werden, was ebenfalls eine Einschränkung darstellt.

Vielen Dank für das coole Flutter-Framework. :)

Ich würde jeden, der SVG-Unterstützung haben möchte, ermutigen, SVG-Unterstützung als Dart-Paket für Flutter zu implementieren.

Für Interessierte verweise ich auf https://docs.flutter.io/flutter/dart-ui/dart-ui-library.html , die Low-Level-Bibliothek zum Zeichnen.

Vom Team: Dart-Bibliothek nicht gut genug gelöst. Einfach weitergeben.

Können Sie das näher erläutern? Das gesamte Framework von Flutter ist eine Dart-Bibliothek; Alles, was wir hier implementieren, wird wahrscheinlich eine Dart-Bibliothek sein. Was sind die Voraussetzungen für „gut genug“?

Ein Beispiel: Ich habe vor einiger Zeit einen (einfachen, nicht erschöpfenden) SVG-Parser in pure-Dart implementiert:

https://github.com/matanlurey/svg

Es wäre wahrscheinlich etwas trivial zu entweder:

A. Erstellen Sie eine Laufzeit-SVG -> SvgRenderElement , die dart:ui im Hintergrund verwendet.
B. Erstellen Sie einen Build-Time-Kompilierungsschritt, der ein SVG in etwas wie folgt konvertiert:

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

@deborah-ufw Wenn Sie interessiert sind, würden wir uns gerne unterhalten, um mehr zu erfahren. Können Sie mir eine E-Mail senden?

Hallo Seth, Matanlurey und Hixie - vielen Dank für die Antwort. Ich bin wahrscheinlich nicht die richtige Person, um ausführlich zu sprechen, da es unsere leitenden Ingenieure waren, die die Dart-Plug-in-Lösung abgelehnt haben (was zur Generierung einer riesigen Bibliothek von PNGs für unsere App führte, was die meisten von uns ebenfalls zum Zucken bringt).

Den Link zu diesem Github-Issue möchte ich gerne an sie weitergeben und sie bitten, ihren Kommentar (der etwas bunter ausgefallen ist als ich weitergegeben habe) fachlich zu begründen – das werde ich tun, sobald ich fertig getippt habe.

Sie können auch direkt mit unseren Ingenieuren über http://gitter.im/flutter/flutter sowie bei Bedarf über andere unter https://flutter.io/support/ aufgeführte Kontaktmethoden chatten. :)

Ich werde das hinzufügen. Danke! :D

Ein anderer Ansatz besteht darin, so etwas wie http://svgpp.org/ auf nativer Ebene zu integrieren und das Flutter-Plug-in-System zu verwenden, um damit zu kommunizieren. Dies würde Ihnen wahrscheinlich die besten Größen-/Leistungsmerkmale für eine vollständige SVG-Unterstützung bieten, jedoch auf Kosten der Aufrechterhaltung einer Abhängigkeit.

Wie sieht es mit der Suche nach SVG-Unterstützung auf Engine-Ebene aus? Ich denke nicht, dass es vernünftig oder wünschenswert ist, eine vollständige Unterstützung des Standards zu erwarten, aber ein Teil der Attraktivität ist die Unterstützung für funktionsübergreifende Teams und vorhandene Tools.

Ich habe den Eindruck, dass Skia einige grundlegende SVG-Unterstützung bietet. Gibt es keine Möglichkeit, dies Flutter zur Verfügung zu stellen?

Soweit ich das beurteilen kann, war es nur experimentell und teilweise. Es gibt ein offenes Problem hier https://bugs.chromium.org/p/skia/issues/detail?id=5596 aber es ist über ein Jahr alt. Sie listen es auch in ihrer Roadmap auf, aber auch hier ist nicht klar, welche Priorität.

Es würde keinen Sinn machen, SVG auf Engine-Ebene zu unterstützen, weil das das SVG-Dokumentmodell, das ein Kernstück der SVG-Unterstützung ist, nicht verfügbar machen würde.

Wenn Flutter SVG unterstützt, dann mit dem letztendlichen Ziel, echtes SVG wirklich zu unterstützen. Es widerspricht Flutters Philosophie, Funktionen halbherzig zu implementieren.

Ich sehe das Offenlegen des SVG-Dokumentmodells nicht als Kernbestandteil der SVG-Unterstützung. Das wäre schön zu haben, aber kein Muss für die Anwendungsfälle, die ich im Sinn habe.

Ja, die Unterstützung auf Bibliotheksebene würde mehr Funktionen ermöglichen - aber wenn die Engine selbst in der Lage wäre, (eine signifikante Teilmenge von) SVG-Daten zu rendern, würde das vermutlich ausreichen, um das Rendern von Vektorbild-Assets zu ermöglichen, die durch diese Teilmenge von SVG definiert sind.

Dieses Problem ist eindeutig größer als das, aber ich würde gerne vorhandene SVG-Assets nehmen und sie in verschiedenen Auflösungen richtig rendern, ohne sie alle in sperrige Rasterbilder zu konvertieren.

Ja, der Import von SVG-Asset-Dateien wäre wirklich nett, aber die Spezifikation für SVG ist über 800 Seiten lang. Allerdings sollte es kein Problem sein, nur statische Dateien zum Rendern auf Skia (einer Vektorgrafikbibliothek) zu importieren. Also nehme ich es an; wie immer kann ich nur am wochenende halbtags arbeiten, also sieht man die sachen nicht gleich. Außerdem habe ich eine Menge SVG-Dateien, aber sie verwenden alle das gleiche Zeug (Icon-Sammlungen von Flaticon), daher würde ich mich über Beispiel-SVG-Dateien von Leuten freuen, die diese Funktion möchten.

Carlos.

Ich habe mich im Laufe der Zeit auch ein bisschen damit beschäftigt. Hier ist, was ich mir ausgedacht habe:

Implementierung auf Engine-Ebene

Dies erscheint aus folgenden Gründen attraktiv:

1. Theoretisch wird so etwas wie image: new AssetImage('graphics/background.svg') unterstützt, um C/C++-Code parsen zu lassen und die SVG-Daten in Skia-Rendering-Befehle zu übersetzen
2. Mindestens ein guter Kandidat da draußen, der in der Lage sein sollte, sich auf Engine-Ebene ziemlich einfach (https://github.com/svgpp/svgpp) in Skia einzuklinken
3. Die SVG-Logik von WebKit wäre großartig, scheint aber viel zu viele Abhängigkeiten zu haben
4. Ich glaube nicht, dass librsvg zu gut portieren würde (eng an Kairo gekoppelt, Übergang zu Rust als Primärsprache - müsste zumindest einen Weg finden, um zu Skia als Backend zu gelangen)

Aber es hat zumindest ein paar Schwierigkeiten:

• Texte richtig verarbeiten
• Richtiger Umgang mit CSS (wenn überhaupt? aber Hinzufügen ist keine einfache Aufgabe)
• Es ist eine Herausforderung, die Unterstützung für zusätzliche Funktionen zu erweitern (oder es Benutzern zu ermöglichen, Unterstützung für Funktionen eleganter hinzuzufügen).
• Es scheint sehr schwierig zu sein, mit Animationen umzugehen

Dart-Level-Implementierung

1. dart:ui von Flutter bietet viele der Primitiven von Skia, die SVG bereits benötigt
2. Ich vermute, dass das Text-Rendering auf dieser Ebene viel einfacher zu handhaben wäre als auf der Engine-Ebene
3. Sollte für mehr Community einfacher zu pflegen/erweitern sein
4. Sollte in der Lage sein, die direkte Interaktion mit der Parsing-Logik billiger zu handhaben (vielleicht um Ausnahmen und / oder Animationen zu behandeln?)

Hat aber ein paar Schwierigkeiten:

• Kann CSS nicht viel besser unterstützen
• Unterstützende Animationen sind möglicherweise nicht viel besser
• Wäre wahrscheinlich langsamer (aber vielleicht nicht genug, um eine Rolle zu spielen, und könnte möglicherweise durch AOT-kompilierten SVG-zu-Dart-Code ausgeglichen werden)

Testdaten

Was Beispiel-SVGs angeht, wäre es wahrscheinlich am nützlichsten zu ermitteln, welche SVGs von der 1.1-Testsuite unterstützt werden (oder, falls teilweise unterstützt, was an ihnen teilweise unterstützt wird). Diese finden Sie hier:
https://github.com/w3c/web-platform-tests/tree/master/svg/import

Oder hier mit einigen PNG-Vergleichen: https://www.w3.org/Graphics/SVG/Test/20110816/

@cbazza , auf welche Weise gedenkst du, dies zu implementieren? An diesem Punkt neige ich eher zu einer Implementierung auf Dart-Paketebene.

Außerdem denke ich, dass die Unterstützung von Symboltypen wahrscheinlich einfach mit etwas wie IconData gehandhabt werden kann. Es ist möglicherweise am besten, dies separat zu behandeln, da es wahrscheinlich nur einen einzigen Pfad pro Codepunkt unterstützen muss

Ich denke an 'Dart-Level-Implementierung' zusätzlich zu dart:ui.

2 grundlegende Anwendungsfälle:

(1) laden Sie statische Symbol-Svg-Dateien mit etwas wie Ihrem
"image: new AssetImage('graphics/background.svg')", wobei die
Datei kann aus dem Dateisystem oder über das Netzwerk stammen
dynamisch.

(2) Widget-basierte SVG-Unterstützung mit DSX (JSX-ähnliches Konstrukt)
was sehr ähnlich aussehen würde:
https://github.com/react-native-community/react-native-svg

In Bezug auf "Testdaten" benötige ich echte Dateien von Personen, die dies benötigen
Dies und nicht die w3-Testsuite. SVG-Unterstützung wäre abhängig
was dart:ui unterstützt, also wenn eine gewünschte svg-Datei enthalten ist
Sachen, die mit dart:ui nicht gemacht werden können, würde ich können
schnell herausfinden.

Carlos.

Ich denke nicht, dass wir uns für das React-Native-SVG-Modell entscheiden sollten. Ich möchte Fälle aus dem wirklichen Leben unterstützen, aber ich denke, die Abdeckung der w3-Suite würde uns eine bessere Grundlage dafür geben, was funktioniert und was nicht und wie schwierig die Implementierung wäre.)

OK, da scheint ein Missverständnis vorzuliegen...
Wenn ich (1) tue, werden Standard-SVG-Dateien verwendet, und ich werde versuchen, so viel wie möglich zu unterstützen, wenn dart:ui (Skia) angegeben ist.
Wenn ich (2) mache, d.h. Widgets erstelle, um SVG-ähnliche Konstrukte zu handhaben, sieht es dieser React-native-svg-Bibliothek sehr ähnlich. Das sind 2 ganz unterschiedliche Dinge.

@cbazza Der Anwendungsfall für SVGs in unserer App ist hauptsächlich für einfarbige SVGs, die wir als Symbole verwenden. Hier ist ein Link zu einer ZIP-Datei auf Dropbox mit einer Auswahl aktueller SVGs, die repräsentativ sind. https://www.dropbox.com/s/dp38wxc22625cvc/icons.zip?dl=0

Vielen Dank für das Interesse, hier zu helfen. Ich würde mich freuen, wenn ein SVG-Flutter-Plugin zum Leben erweckt wird!

Ich habe ein Tool geschrieben, das eine minimale Analyse einer Folge von SVG-Dateien durchführt und Dart-Dateien ausgibt, die wir später verwenden, um Symbolanimationen anzuzeigen: vitool .

Ich habe dieses Tool verwendet, um die AnimatedIcons -Daten zu erstellen. Sie können das Ergebnis überprüfen, indem Sie die manuelle Test-App ( cd dev/manual_tests; flutter run -t lib/animated_icons.dart ) ausführen.

Es ist weit davon entfernt, optimal oder vollständig zu sein, aber es funktioniert für den aktuellen Satz animierter Symbole, die wir haben, und jemand sollte sich ermächtigt fühlen, es zu forken/erweitern.

@deborah-ufw Für diese einfarbigen Symbole können Sie eine Symbolschrift erstellen und die Symbole mit dem Symbol- Widget anzeigen.

@amirh scheint nicht einfach zu sein, Farbvektorschriften zu erstellen

@amirh Wenn Sie den gesamten Thread oben gelesen haben, ist das Erstellen und Definieren einer Schriftart mit Glyphen als Symbolen eine zusätzliche Reihe von Schritten, die ausgeführt werden müssen, da SVG nicht unterstützt wird. Die SVG-Unterstützung ist viel effizienter als eine Schriftart. Außerdem hat zoechi Recht - jede Vektorgrafik, die mehrere Farben hat, ist fast unmöglich in eine Schriftart zu verwandeln.

Entschuldigung - ich habe mir die Beispielsymbole angesehen und dachte, dass Sie nur einfarbige Symbole benötigen.

@deborah-ufw, vielen Dank für die Dateien, genau das, wonach ich gesucht habe und bereits Sachen gefunden habe, die meine Dateien nicht haben.

@amirh , ja ich habe deine tolle Arbeit schon gesehen ;)

Haben wir endlich eine direkte Möglichkeit, ein SVG- oder Vektor-Asset-XML in das Bild für Flattern einzufügen?

@Hixie : Bitte bedenken Sie (erneut), dass dies für native mobile Teams mit mehreren Plattformen ein echter Schmerzpunkt ist, aber dass nur eine teilweise, relativ einfache SVG-Unterstützung erforderlich ist, um dies zu lösen. Gegenüber den Betreuern des SVG-Standards könnte dies als halbherzig angesehen werden, aber Flutter ist für mobile Entwickler, nicht für allgemeine Standardautoren. Flutter würde die Herzen der Mobilentwickler erobern, wenn es ihre sehr realen Schmerzen lindert, wenn auch nur auf pragmatische Weise.

Bitte bedenken Sie auch, dass trotz dieses seit langem bestehenden Bedarfs der Community-Support-Ansatz keine praktikablen Lösungen für den Flutter-Konkurrenten Xamarin hervorgebracht hat (nach meiner 5-jährigen Xamarin-Erfahrung können Bibliotheken keine Design-Tool-Exporte verarbeiten, sind zu begrenzt, nicht stabil, kostenpflichtig und/oder Closed Source).

Aus diesem Grund bin ich nicht optimistisch, dass die Flutter-Community erfolgreich sein wird, wo die Xamarin-Community gescheitert ist. Das schätze ich als praktisch ein. teilweise Unterstützung für SVG-Symbole ist etwas, das das Flutter-Team liefern könnte, indem es vorhandene Skia-Primitive verwendet.

Dies würde gut zum Flutter-Ziel passen : Mobile Entwickler in die Lage versetzen, schöne, leistungsstarke UX in Rekordzeit zu liefern. Es würde die Produktivität, Genauigkeit und Leistung verbessern (ein SVG wird viel schneller geladen als all diese PNGs; Symbol-SVGs haben normalerweise bescheidene Rechenkosten, da eine Anforderung an visuelle Klarheit ziemlich oft zu einer Form von bescheidener Komplexität führt).

Der Kernbedarf besteht in einem produktiven Workflow von häufig verwendeten kreativen Designer-Tools (wie Adobe) bis hin zu skalierbaren nativen App-Icons.

Der aktuelle PNG-Ansatz ist sehr verschwenderisch in Bezug auf Produktivität und App-Größe; Es ist einfach so primitiv, jedes Symbol in bis zu 9 festen Bitmaps (6 Android, 3 iOS) zu generieren und zu versenden, die dann zur Laufzeit nachbearbeitet werden. Das Problem nimmt stetig zu, wenn Auflösungen in Größe und Variation zunehmen.
Es sticht in der ansonsten erfreulichen, innovativen und produktiven Flutter-Entwicklererfahrung als wunder Daumen heraus. Ich denke, Flutter hat hier eine echte Chance, die Herzen und Köpfe der Entwickler zu gewinnen,

Auch @dnfield die oben erwähnten SVG-Funktionen , die als Hindernisse für die Implementierung in Flutter erwähnt werden, sind meiner Erfahrung nach entweder nicht relevant oder selten genug, dass das Zurückgreifen auf PNGs für diese Design-Assets eine kleine Unannehmlichkeit ist.
Egal: CSS, HTML, SMIL, Dokumentenmodell, Scripting
Animation, Text: selten genug, um dafür auf andere Technologien zurückzugreifen

Ich hoffe, die Länge dieses Kommentars vermittelt, wie viel Wert eine Lösung haben würde. Ht!

@VincentH-Net Ich bin 100% bei dir, weil ich den Schmerz auch spüre!!! Bitte senden Sie mir einige Ihrer SVG-Dateien. Vielleicht hatte Xamarin Probleme, SVG-Unterstützung bereitzustellen, da es an einer Vektorgrafik-Engine mangelte, die damit umgehen könnte; Dies ist bei Flutter mit Skia nicht der Fall, daher bin ich sehr optimistisch, dass es eine Community-Lösung geben wird.

FWIW, Xamarin bietet auch Skia in SkiaSharp an. SVG kann selbst bei minimaler Implementierung schwierig sein.

Aber @cbazza , ich wäre sehr an einer Zusammenarbeit mit Ihnen interessiert

Und an der Animationsfront denke ich, dass die Aktivierung von Lottie viele Anwendungsfälle erfüllen würde (und wahrscheinlich mit besseren Werkzeugen für Designer).

@dnfield Ich denke, diese Lottie-Animationen können leicht als Flutter-Widgets nachgebaut werden

@dnfield , ausgezeichnet, Sie könnten der Low-Level-Typ sein, der Änderungen auf der Engine-Ebene handhabt, während ich die Arbeit auf der oberen Ebene am Widget erledige (asynchrones SVG-Parsing, 'Bild'-Konstruktion, die zwischengespeichert und beim Rendern von Aktualisierungen an die Leinwand gesendet werden kann usw.).
Ja, die Arbeit mit Lottie wäre großartig für den Designer/Entwickler-Workflow.
@zoechi , warum etwas mit Widgets von Hand neu erstellen, wenn Sie einfach ein funktionierendes Lottie-Widget importieren können, das alles für Sie erledigt? Allerdings würde mein vorheriges Ziel (2) oben gut mit Widget-Animationen funktionieren (daher möchte ich es auch tun).

@zoechi - das Ziel wäre es, Designern zu ermöglichen, solche Dinge zu erstellen und sie mit minimalem Aufwand für den Entwickler zu rendern. Ein sekundäres Ziel wäre es, sie als Ressourcen zur Laufzeit laden zu können, anstatt eine Vorkompilierung zu erfordern.

Dasselbe gilt für SVG – ja, ein Entwickler könnte sicherlich SVG-Vektordaten in Dart konvertieren, aber idealerweise können Sie einfach eine Vektorzeichnungsressource (SVG oder nicht) einbinden und zur Laufzeit rendern.

Mit anderen Worten, ich möchte meinem Designer sagen können, dass er ein Vektor-Asset einmal erstellen und es in meiner Flutter-Anwendung mit minimalen Änderungen verwenden kann (und ohne dass der Designer es fünfmal in verschiedene Rasterformate exportieren muss, die am Ende stehen ungültig, sobald Apple oder Samsung ihr nächstes Telefon herausbringen).

verschiedene Rasterformate

Ja, das fühlt sich an wie im letzten Jahrzehnt

https://github.com/luberda-molinet/FFImageLoading Könnte einen Blick wert sein, verwendet Skia zum Rendern von SVG für Xamarin

@escamoteur

Danke, das sieht wirklich gut aus, es fehlt nur, dass es nicht asynchron ist ;)

Ich verwende seit kurzem nur Vektor-Drawables in Android-Anwendungen und sehe keine merklichen Leistungseinbußen. Die Symbole sind scharf und die App-Größe ist viel kleiner. Es ist auch viel einfacher und schneller, verschiedene Bilder zu testen. Diese @2 , @3 , @4 , @5 ,.... Lösung sieht in einem so modernen Framework wie Flutter wie ein großer Schritt zurück aus.
Ich verstehe nicht, warum Sie nicht einfach zu dem Team gehen können, das für Android-Vektor-Drawables verantwortlich ist, und ihre Ideen oder Implementierung (wenn möglich) zur Lösung dieses Problems verwenden können.

Ich habe hier mit einigen SVGs herumgespielt, die auf eine Leinwand gezeichnet wurden. path -Elemente sind wahrscheinlich am schwierigsten zu implementieren, aber es gibt eine Skia-API, die wirklich helfen würde, wenn sie offengelegt würde. Ich habe damit experimentiert, es in der Engine freizulegen und werde eine PR öffnen, sobald ich etwas mehr Zeit hatte, es zu verfeinern.

Die grobe Idee wäre etwas, das es uns ermöglicht, ein dart:ui Path aus einer SVG-Datenzeichenfolge zu erstellen, indem wir dazu die bereits vorhandene Skia-API verwenden. Vorgeschlagene Methode ist static Path Path.parseFromSvgData(String svgData) -> Path

Das lässt immer noch etwas Arbeit, um die verschiedenen Transformationen/Striche/Füllungen zu analysieren, die angewendet werden können. Ich denke, wir können eine gute Menge davon aus der Arbeit von @amirh ausleihen (ich habe nicht seine gesamte Pfadparsing-Logik ausgeliehen, weil es so aussah, als hätte sie Einschränkungen, die SkParsePath nicht hat, und wie SkParsePath effizienter sein sollte, da es nur erfordern wird ein Roundtrip zur nativen Seite, um den Pfad zu zeichnen, anstatt Roundtrips für jeden Zeichenbefehl). Ich habe @matanlurey aus ähnlichen Gründen auch nicht verwendet.

Siehe https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart , https://github.com/dnfield/flutter_svg (das derzeit die beiden SVGs rendern kann die in diesem Projekt zu einer Leinwand enthalten sind) und https://github.com/dnfield/engine/tree/path_svg (das derzeit auch meine PathMeasure/PathMetrics-bezogene Arbeit für Lottie enthält).

Hallo @dnfield ,

Hier ist meine Meinung zu Ihrer ersten Implementierung. Lassen Sie mich nur sagen, dass was auch immer ich sagen werde, keinen Einfluss auf Ihren Enthusiasmus und Ihren Programmierfortschritt haben sollte. Je mehr Sie tun, desto besser, weil wir es später immer noch verwenden können.

Das Problem, das ich habe, ist architektonisch und hier ist der Grund. Damit die Benutzeroberfläche mit 60 Frames/Sek. reagiert, muss jeder Frame nur etwa 16 ms laufen, bevor die Benutzeroberfläche blockiert wird. Nehmen wir also an, die Hälfte wird von Flutter verwendet, um das zu tun, was 8 ms für unseren SVG-Parser übrig lässt, und es gibt keine Möglichkeit, in diesem Zeitraum eine SVG-Datei zu parsen und ein Bild zu generieren, egal wie leistungsfähig Ihr Telefon/Tablet ist. Am besten zielen Sie also auf langsame Geräte ab und haben asynchronen Code, der dies mit mehreren Frames tun kann, aber der Schlüssel ist, dass jeder Frame nur bis zu 8 ms laufen kann und dann zurückkehren und den nächsten Frame aufnehmen muss.

Sie können das XML also nicht mit dart:xml parsen, da es nicht asynchron ist, es wird blockiert, bis die gesamte Datei geparst ist. Auch das Generieren des Bildes sollte asynchron sein, da Sie nicht alles in 8 ms erledigen können. Es macht jedoch keinen Sinn, den Code vorzeitig zu optimieren, also schreiben Sie den besten Code, der gelesen werden kann. Ich habe einen Plan, der funktionieren wird, aber es wird einige Zeit dauern, also möchte ich, dass Sie so weitermachen, wie Sie sind, weil ich Ihre Arbeit jederzeit nehmen und später verwenden kann. Mein Design fügt sich in die aktuelle Bildladefunktion (AssetImage & NetworkImage) ein und der Benutzer muss nur eine „.svg“ anstelle von „.png“ angeben.

Carlos.

@cbazza nur eine Idee: Das Parsen könnte in einem Isolat erfolgen. Ich denke, es wurde einige Arbeit geleistet, um mit Nachrichtenkanälen von anderen Isolaten als dem UI-Isolat kommunizieren zu können und Daten zwischen Isolaten per Referenz weiterzugeben, anstatt sie zu kopieren (obwohl ich mir über Status oder Fortschritt nicht sicher bin).

@cbazza - danke. Ich glaube nicht, dass dart_xml die beste Lösung dafür ist, aber es funktioniert und ermöglicht einige Fortschritte in der Zeichnungslogik (und ich wollte dies nicht vollständig blockieren, während ich daran arbeite, einen asynchronen XML-Parser zu implementieren). Ich habe auch begonnen, mich mit der Implementierung ImageProvider zu befassen, aber ich denke, das kann ein Implementierungsdetail sein, das wir vor den Benutzern verbergen können.

Ich bin in keiner Weise auf diese API festgelegt. Aber wir können zumindest mit dem Zeichnen von SVGs beginnen und wahrscheinlich einfache auf anständigen Telefonen unterstützen.

Beabsichtigen Sie, an der XML/SVG-Lese-/Parsing-API zu arbeiten?

@zoechi - wir könnten mit einem Streaming-Reader-Modell immer noch eine viel bessere Speichernutzung und wahrscheinlich eine bessere Parsing-Zeit erreichen.

@zoechi ja, ich habe mir Isolate angesehen, aber Sie können nur primitive Werte (Null, Num, Bool, Double, String) und Listen und Karten und keine Objekte und/oder Objektbäume übergeben, daher schien die asynchrone Route besser zu sein. Eine weitere interessante Sache beim Herausfinden des asynchronen XML-Parsings ist, dass die Konzepte für jede asynchrone Baumverarbeitung gelten würden, wie zum Beispiel das Widget oder der Elementbaum. Dies würde zum Beispiel eine asynchrone Abstimmung wie in React's Fiber ermöglichen :)

@dnfield Ja, ich arbeite an einem asynchronen XML/SVG-Parser/Prozessor.

Ich frage mich nur, ob das Rendern von SVG mithilfe einer Webansicht eine Option sein kann.

Zu schwer für einfache Schaltflächen und ich bin mir nicht sicher, ob die Webansicht 60 Frames / Sek.-Änderungen verarbeiten kann. Nehmen wir an, wir verschieben das Symbol oder skalieren es zum Beispiel.

Ich bin kein iOS-Entwickler, daher sehe ich jetzt, dass auch iOS 11 Vektor-Assets unterstützt . Es ist kein SVG, sondern PDF. Ist es einfacher, PDF-Vektor-Assets zu unterstützen?

Nein. Quartz hat viele historische Verbindungen zu PDF für sein internes Rendering-System, was es einfacher macht, dies auf einem iOS-Gerät zu tun. Skia ist kein PDF-Renderer, und das Dateiformat würde (IMO) zu einer Menge Unklarheiten darüber führen, was unterstützt wird und was nicht (mit nicht so guten Tools, um dies zu beheben).

PDF ist komplizierter als SVG und die PDF/X-Teilmenge (die für Vektorgrafiken verwendet wird) ist für den Druck konzipiert. Ich würde jedoch gerne PDF-Rendering-Unterstützung auf Flutter sehen, aber für uns bleiben wir bei SVG.

Ich wäre mit einer bloßen VectorDrawable-Teilmenge von SVG (Punkt, Linie, Kurve, Füllung, Bewegung) zufrieden. Flutter ermöglicht RAD und zielt darauf ab, wirklich plattformübergreifend zu sein (mit kommendem Desktop), aber jetzt kann es nicht. Sowohl Android- als auch Apple-Plattformen sind auf 60"+ 4HD-Bildschirmen vorhanden. Dort sind Vektorgrafiken ein Muss.

PS Entschuldigung, aber ohne VG wird Ihre (Flatter-Team-)Arbeit verschwinden, da Kotlin auf vielen Plattformen, einschließlich iOS, nativ funktioniert. Sicher, Kotlin ist noch in der Beta-Phase, aber Flutter ist es auch. :(

@ohir Erklären Sie bitte, wie Sie eine plattformübergreifende Ansicht (einzelner Code) schreiben würden, die sowohl auf iOS als auch auf Android mit nativem Kotlin funktioniert. Es sei denn, Sie beabsichtigen, eine Kotlin-Version der reagierenden nativen Widget-Abstraktion zu erstellen?

Unterschätzen wir nicht, was die Kotlin-Ureinwohner tun werden, denn die Möglichkeiten sind endlos. Ich bin durch meine Experimente zu Flutter gekommen, indem ich mit Cocos2d-x so etwas wie Flutter erstellt habe. Sie könnten das auch verwenden und / oder React Native und / oder Flutter, da alles Open Source und für die Kreuzbestäubung verfügbar ist :)

Ja, stimme voll und ganz zu, die Liebe zu Kotlin und die Akzeptanz von Entwicklern ist riesig und die plattformübergreifende Kompilierung macht die Möglichkeiten endlos. Aber der Vergleich zwischen Flutter-Beta und nativer Kotlin-Beta für mobile Cross-Plattformen ist heute sinnlos.
Jedenfalls vom Thema abweichend.

@lukaspili Bisher gibt es anko für Android. Seine DSL-Layouts könnten auch mit apko , linko und winko*, die im jeweiligen Plattform-Unterbaum enthalten sind, intakt funktionieren. Aber das ist OT für das Thema Flutter VG. [* existiert noch nicht].

Danke für all die leidenschaftlichen Gespräche! Wir möchten uns in dieser Ausgabe weiterhin auf die Anwendungsfälle und Anforderungen für Vektorformate und APIs konzentrieren. Vielen Dank im Voraus, dass Sie beim Thema bleiben! :)

Was halten die Leute davon, dies in ein Problem für die Unterstützung von SVG aufzuteilen und dieses für ein TBD-Flatter-Vektorformat beizubehalten?

Das würde für mich Sinn machen; Die ursprüngliche Ausgabe ist als eine Art Flutter-spezifisches Vektorformat formuliert.

@cbazza Hurra für die SVG-ähnliche Unterstützung. Ich habe eine Reihe von Nicht-Icon-SVGs, mit denen ich im Grunde die gesamte Benutzeroberfläche einer App zeichne. Wie soll ich sie dir schicken?

Ich würde gerne versuchen, ins Flattern zu wechseln, aber das Generieren von Zillionen PNGs wird die App-Größe ernsthaft aufblähen und hässlich aussehen.

Ja, bitte senden Sie mir eine URL, um die Dateien anzusehen.

An dieser Stelle verfolge ich also an dieser Front einen Flatbuffer-basierten Ansatz. Ich arbeite an der Definition eines Flatbuffer-Schemas, das Befehle zum Vektorzeichnen erfassen kann - mehr oder weniger so, wie Skia Pfade erfasst.

Ich könnte sehen, dass dies semi-interoperabel mit SVG ist (z. B. ein SVG -> Flatbuffer-Konvertierungstool oder Android Vector Drawable XML -> Flatbuffer, das viele SVG-Anwendungsfälle abdecken könnte) und viele der Leistungseinbußen vermeiden, die wir haben würde mit SVG konfrontiert (Mangel an Streaming-XML-Parsing, muss SVG-Pfaddaten parsen und dann Stück für Stück an native senden). Ich war auch in der Lage, kleinere Binärdateien als das SVG-Format zu erstellen (obwohl abzuwarten bleibt, wie gut das skalieren wird).

Es sollte auch möglich sein, in den Konvertierungstools im Vorfeld mehr Klarheit darüber zu schaffen, welche Funktionen in einem bestimmten SVG nicht unterstützt werden (z. B. „Fremde Elemente werden von diesem Format nicht unterstützt“).

Das Flatbuffer-Parsing-Bit könnte in Dart oder C++ ausgeführt werden - das einzige in Dart ist, dass es immer noch schön wäre, Befehle an Skia zu übertragen, um Pfade zu erstellen und auf Canvas zu zeichnen.

Es gibt eine möglicherweise viel einfachere Lösung, die darin besteht, eine Kompilierzeit-Analyse und einen Digest von SVG-zu-Skia-Knotenoperationen durchzuführen ... dies würde die Laufzeitanalyse von SVG insgesamt eliminieren und das Caching von Zwischenpuffern im beibehaltenen Modus ermöglichen

@sandrobilbeisi du meinst wie https://github.com/amirh/flutter/commit/69de4bbf3177d9766a386c55b27a12619da43a05 ?

das ist bemerkenswert ... und es gibt auch vitool https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart

aber ich dachte eher an einen Build-Schritt wie den, den Xcode mit SVG-Assets für iOS-Ergebnisse verwendet

@sandrobilbeisi meinst du das Erstellen von Bitmaps aus SVGs während der Kompilierzeit?

Übrigens speichert das Xamarin-Paket ffimageloading die gerenderten Bitmaps zwischen, sodass nur ein Mal gerendert wird. Es speichert auch Netzwerkbilder und skalierte Bilder, was es sehr schnell macht

nicht bitmap , sondern Skia, das ursprünglich eine Vektorgrafik-Engine für < canvas > ist
https://skia.org/ (ps wurde vor einem Dutzend Jahren von Google übernommen: http://www.satine.org/archives/2007/03/05/the-skia-source-code-dilemma/)

Sie meinen, SVG in ein Skia-Bildformat umzuwandeln?

ja

@cbazza- Link zu SVG-Testdateien: https://github.com/slingshotapp/artwork

Gibt es eine Möglichkeit, vitool auf Projektebene auszuführen? Ich kann die generierte Datei erstellen, aber sie benötigt Zugriff auf viele private Klassen, die mich daran hindern, die .g.dart zu meinem Projekt hinzuzufügen.

Bezugnehmend auf das Tool unter <flutter>/dev/tools/vitool : #dart bin/main.dart --asset-name=_$hello --output=here.g.dart ./test_assets/horizontal_bar_relative.svg

@emilieroberts Danke, aber diese Dateien sind nicht im SVG-Format, sondern im benutzerdefinierten Android-Vektorformat, das SVG sehr ähnlich ist.

@cbazza oops, in der Tat - die meisten SVGs sind jetzt da oben :)

@cbazza können Sie klarstellen, was Sie mit benutzerdefiniertem Android-Vektor meinen? Sie haben ein <svg -Tag, im Gegensatz zu Android-Vektor-Drawables.

Was auch immer mit vitool im Moment gemacht wird, ist erstaunlich, aber ich konnte nirgendwo eine Spur von Dokumentation finden. Ich kann ein Beispiel mit AnimatedIcons.arrow_menu schreiben, aber ich würde auch gerne wissen, was dazu von Assets aus einem externen Flatter-SDK erforderlich wäre.

@fmatosqg Sie haben Recht, der Code, der zum Ausführen von Animationen verwendet wird, die von vitool generiert werden, ist für das Framework privat. Der Grund dafür ist, dass es noch offene Fragen dazu gibt, was ein gutes Vektorformat für Flutter wäre (wie in dieser Ausgabe verfolgt), und ich wollte eine öffentliche API vermeiden, die ein bestimmtes Format unterstützt (da diese sich auf dieses Format festlegen, wenn wir wollen keine Breaking Changes in der Zukunft).
Die aktuelle API-Oberfläche für AnimatedIcon ermöglicht es uns, von vitool generierte Dateien intern im Framework zu verwenden und dennoch die zugrunde liegende Implementierung und das Vektorformat zu ersetzen, ohne einen Client zu beschädigen.

Wenn Sie Dateien mit vitool generieren und in Ihrem Projekt verwenden möchten, können Sie dies tun, indem Sie den Code von packages/flutter/lib/src/material/animated_icons kopieren und ihn als Teil Ihres Projekts einfügen (dies garantiert auch, dass Ihr Projekt nicht abbricht, wenn wir ändern die Maschinen, die von AnimatedIcon verwendet werden).

Wir entschuldigen uns für die Unannehmlichkeiten und hoffen, dass wir bald eine bessere Lösung finden.

Ich mag diese Idee, besonders wenn https://github.com/flutter/flutter/issues/13834 weitergeht. Ich glaube, so etwas sollte nicht Teil eines monolithischen SDK sein, aber nicht besonders besorgt, wenn es sich um ein offizielles oder Community-Paket handelt.

Es gibt ein kompaktes Format für eine Teilmenge von SVG , das von jemandem bei Big G für Shiny (Go-Desktop-Framework) geprägt wurde. Seine binäre Darstellung und kann die Standardgröße des Android-Launcher-Symbols unter 100 Byte bringen. Wie oben im Thread - und IMSO - erwähnt, sollte das Zeichnen von Vektoren Skias Pflicht sein, wobei Flutter eine möglichst kompakte Darstellung zur Verfügung stellt. Es ist die Werkzeugpflicht, res/ svg-Dateien in das interne Format zu kompilieren.
[ @amirh Re: offene Fragen zu einem guten Vektorformat ]

Also FWIW, in flutter_svg habe ich den Code so formuliert, dass das ganze Zeichnen wirklich von Zwischenobjekten gemacht wird. Die SVG-bezogene Arbeit besteht im Wesentlichen darin, SVG diesen Objekten zuzuordnen. Es gibt noch einiges zu tun, um dieses Zwischenformat vollständig zu stabilisieren (zum Beispiel habe ich mit der Textunterstützung begonnen, aber es ist im Moment sehr schlecht).

Ich habe damit begonnen, die Unterstützung für Android Vector Drawables in das Framework zu portieren (abzüglich der Unterstützung für externe Farb- und Stilreferenzen usw. und noch keine Unterstützung für Clip-Pfade oder wahrscheinlich einige andere Funktionen). Es sollte durchaus möglich sein, Shiny auch auf diese Weise zu unterstützen, oder wirklich jedes andere Format. Ich arbeite an dieser Stelle gerne mit SVG, weil es hilft, viele interessante Fälle abzudecken, die unterstützt werden müssen, also ist das jetzt mein Hauptaugenmerk.

Nachdem ich diesen Thread gelesen habe – und einen langen über die JSX-Unterstützung – kann ich nicht anders, als zu glauben, dass es ein Governance-Problem gibt. Das Flutter-Team riskiert, in tausend verschiedene Richtungen gezogen zu werden, da die Entwickler lautstark danach streben, was _sie_ für wichtig halten. Vielleicht sollte Flutter "Inkubator"-Projekte wie Apache einführen. Angeforderte Funktionen werden durch Plugins auf Open-Source-Art implementiert, möglicherweise mit Beiträgen des Flutter-Teams selbst. Wenn die Plugins eine ausreichende Unterstützung, Wirksamkeit und Popularität erreichen, werden sie zu Kandidaten für die Aufnahme in das zentrale Flutter-Framework.

Ich denke, dies würde es den lautesten Entwicklern ermöglichen, ihren „Code dort zu platzieren, wo der Mund ist“, anstatt auf die hier gezeigten Brust- und Stirnklopfen zurückzugreifen, und dem Flutter-Team mehr Freiheit geben, sich auf die Kerntechnik zu konzentrieren.

Ich widerspreche respektvoll. Wenn Sie sich die Meilensteine ​​wie Bucket5 ansehen, wissen Sie, woran das Team arbeitet, und wenn Sie zu Bucket6 gehen, wissen Sie, was sie als Priorität betrachten. Sie können auch wissen, was sie nicht für dringend halten, wenn Sie sich andere Meilensteine ​​in der Zukunft ansehen.

Auch der Grund, etwas zum Flatterkern hinzuzufügen, sollte mehr sein als "Ich kann ein Plugin machen und es funktioniert für alle und jeder will es". Das ist ein Grund, ein Plugin zu erstellen, aber nicht genug, um zu diesem Repo oder anderen Flutter-Repos hinzugefügt zu werden.

Ein Beispiel für Dinge, die keine Plugins sein sollten: Dinge, die @dnfield der Engine hinzugefügt hat, damit er von dem Plugin, das er besitzt, profitieren und es verwenden kann. Ein solches Plugin hätte keine Chance, alle Funktionen zu nutzen, wenn es nicht zur Engine hinzugefügt würde.

Lautstark zu sein ist wichtig, garantiert aber nie, dass es durchgeht. Es ist auch wichtig, den Code dort zu platzieren, wo der Mund ist, aber immer noch nicht genug. Dieses Projekt hat viel Transparenz und sie hören genau zu, was die Entwickler sagen, aber es ist keine Demokratie und bedeutet nicht, dass die Volksabstimmung gewinnen wird, ohne über die Konsequenzen nachzudenken.

Ja, bitte machen Sie sich keine Sorgen, dass die Entwickler, die an Flutters Framework arbeiten, durch Diskussionen über Fehler abgelenkt werden. :-) Wir lesen die Diskussionen und interessieren uns sehr für die Meinung aller, aber am Ende des Tages haben wir klare Leitprinzipien und werden nicht nur auf die lautesten Stimmen reagieren. Wir führen sorgfältige Marktanalysen durch, um festzustellen, was die Community als Ganzes interessiert.

Interessantes Gespräch, das mich mit einer einfachen Frage zurücklässt. Wie empfiehlt das Flutter-Team den Übergang von der Designphase (SVG) zu Vektorgrafiken in Flutter?

@lukepighetti Sie können https://github.com/dnfield/flutter_svg ausprobieren und prüfen, wie weit Sie damit kommen.

Ich persönlich bin mit der angebotenen Lösung für SVG-Dateien in Flutter nicht zufrieden. Ich habe das flatter_svg-Paket verwendet und bin damit nicht zufrieden.

Die SVG-Unterstützung muss meiner Meinung nach in der Standardbibliothek nativ unterstützt werden. Wenn wir Flutter auf größeren Bildschirmen wie Desktop-Apps und Websites verwenden möchten, ist dies ein Muss.

@socialmammoth kannst du näher erläutern, welche Mängel du siehst?

Eine Sache, über die ich eine Weile nachgedacht habe, ist, ob es sich lohnen würde, das .skp-Format (SKIAPICT) zu unterstützen. Ich denke, es gibt gute Gründe, dies nicht direkt zu tun - das Format ist nicht garantiert stabil von Version zu Version von Skia, da es die große ist.

Es hat jedoch einige interessante Eigenschaften – insbesondere ist es möglich, Chrome/Chromium dazu zu bringen, ein SKP (vielleicht ein gerendertes SVG) zu generieren, und es ist sehr wahrscheinlich, dass wir bereits die meisten oder alle Skia-Zeichenbefehle unterstützen, die tatsächlich erforderlich sind machen die überwiegende Mehrheit der SKPs.

Ich habe geplant, eine Code-Gen-Lösung für das SVG-Plugin zu erstellen, damit Sie Dart/Flutter-Code aus einem SVG generieren können. Ich denke, an dieser Stelle wäre es wahrscheinlich interessanter, einen SKP-zu-Dart-Build-Prozess zu untersuchen - ein Teil des für Flutter SVG geschriebenen Codes könnte auf das Framework portiert werden (z. B. die RawPicture und die zugehörige Infrastruktur, die entspricht in etwa einem RawImage ), und wir könnten etwas verkabeln, das die Ausgabe eines SKP übernehmen würde (vielleicht generiert aus einem SVG, wie es von Chrome gerendert wird, was ohnehin so ziemlich der Goldstandard für das SVG-Rendering ist). Es sollte möglich sein, Tools zu erstellen, die ein SVG nehmen, Headless Chromium aufrufen, um es in ein SKP zu rendern, und dann das SKP in einige Dart-Dateien umwandeln, die Flutter zur Laufzeit rendern könnte.

Ein großer Bereich, den dies nicht löst, ist das dynamische Laden einer Vektorgrafik zur Laufzeit (z. B. SvgPicture.network ), aber ich bin an Feedback interessiert, ob dies trotz dieser Einschränkung immer noch eine lohnende/akzeptable Lösung wäre.

Ich sage dies auch in der Überzeugung, dass wir zu diesem Zeitpunkt niemals "native" Unterstützung für SVG in Flutter bekommen werden. Dies liegt zum Teil daran, dass SVG selbst viel Ballast hat (XML, CSS, die Fähigkeit, externe Assets abzurufen), die außerhalb einer Browser-/HTML-Rendering-Software nicht trivial zu implementieren sind und die Software, die wir ausprobieren, stark aufblähen würden sich herunterlehnen. Das liegt zum Teil auch daran, dass es durchaus möglich ist, ziemlich viel SVG zu implementieren, ohne große Änderungen am Framework vorzunehmen - obwohl einige Dinge (im Moment insbesondere filterEffect s und textPath s) wahrscheinlich werden Profitieren Sie von einigen weiteren Optimierungen am Motor.

Ich denke, dass die Möglichkeit, SVGs direkt aus dem Netzwerk zu laden, ein großer Vorteil ist, auch wenn dies bedeutet, dass wir nur einen Teil der Funktionalität des Formats unterstützen.

Ein Flutter-spezifisches vektorielles Format klingt wie das, was Android mit VectorDrawables macht, was zwar gut funktioniert, aber auch bedeutet, dass viele der Tools, die bereits für SVG vorhanden sind, nicht genutzt werden können. Es macht es auch umständlich, Designs wegen all der Formatkonvertierungen zu iterieren.

Ich würde gerne sehen, dass Flutter SVGs nativ unterstützt, denn das erwarten Frontend-Entwickler von ihren Frameworks im Jahr 2018. Ich möchte, dass Frontend-Entwickler Flutter zugänglich finden, weil ich möchte, dass das Ökosystem wächst.

@dnfeld

.skp (SKIAPICT)-Format.

IMHO interessanter Ansatz. Aber dann müssen Flutter-Werkzeuge (zumindest in AS) die Konvertierung nahtlos bewältigen. Designer sind in gewisser Weise an Einschränkungen gewöhnt, die durch die vektorzeichnenden Importe des aktuellen Android auferlegt werden, sodass sie sicherlich in der Lage sein werden, mit anderen Geboten und Verboten umzugehen.

Für den gelegentlichen Entwickler sollte das Handbuch lauten: " Legen Sie Ihre SVG-Zeichnungen hier ab, kommentieren Sie sie hier, verwenden Sie sie nach Belieben. Wenn Ihre SVG-Datei die unterstützte SVG-Untergruppe (siehe hier) nicht einhält, wird der Compiler oder Analysator ( flutter analyze ) dies mitteilen Sie, was in Ihrem SVG falsch ist ". Oder etwas ähnliches.

@dnfeld

Holen Sie sich Chrome/Chromium zum Generieren

Gut für PoC und Tests, aber eine echte Lösung erfordert meiner Meinung nach möglicherweise keine so große Abhängigkeit – und eine, die als CI-Mittelschritt schwer zu skripten ist. Natürlich in der Beta und dann als zweiter "harter Weg" könnte es ok sein -- zB. um eine einfache animierte Zeichnung zu erhalten, die skPicture ermöglicht. Ich kann mich irren. denn Designer haben normalerweise einen großen Eimer mit Browsern unter ihrer Laptopklappe. Beachten Sie jedoch, dass Kunstwerke häufig mutieren. Nicht nur in der Prototyping-Phase, sondern auch wenn die Startzeit näher rückt und die Entwickler im Bug-Hunting-Fieber sind.

[Dh. Wir brauchen entweder ein Flutter-Tool, das sich mit dem konformen SVG-Import befasst, oder wir brauchen einen Weg, bei dem Chrom vollständig in den Händen des Designers liegt. Nicht vom Entwickler.]

PS. Der launcher_icons -Paketweg könnte beim Start reichen: flutter packages pub run flutter_svg_to_skp:main -i path/to/svgs -o path/to/skps .

-- meine ¢2

@cachapa

SVGs direkt aus dem Netzwerk laden zu können

Dies ist eine Arbeit für ein separates großes Paket, das sich mit Validierung und Problemumgehungen befasst
um mögliche Inkompatibilitäten und Eigenheiten des Herstellers.
Holen Sie sich zuerst die Engine, um das vom Entwickler bereitgestellte Vektorformat zu zeichnen, das das Paket "SVG aus dem Netzwerk laden" sicherlich verwenden wird. :)

Nur um das klarzustellen @cachapa und @ohir - flutter_svg _already_ unterstützt das Laden einer SVG über das Netzwerk ( SvgPicture.network ). Dieses Paket wird jedoch niemals die gesamte SVG-Spezifikation unterstützen - das Ziel ist wirklich nur, genug von der Spezifikation zu unterstützen, um die meisten SVGs zu rendern. Das tut es bereits, mit den wichtigsten Ausnahmen an diesem Punkt sind fliterEffect s (also keine Unschärfen, Farbfilter usw.) und eine Menge textbezogener Unterstützung - aber es gibt einige andere ( marker s werden nicht unterstützt, bestimmte Arten von xlink:href Referenzen werden immer noch nicht unterstützt). Es gibt auch einige Probleme, die ich absichtlich nicht unterstütze, wie die vollständige CSS-Spezifikation, Skripterstellung und Interaktivität.

@lukepighetti Ich denke, diese Erwartung besteht wirklich nur bei webbasierten Frontend-Entwicklern. Qt unterstützt SVG, aber nur eine begrenzte Teilmenge. GNOME unterstützt etwas mehr mit librsvg, aber auch das hat einige Probleme (und es ist wirklich schwierig, es außerhalb von Linux-Umgebungen zu verwenden). Ich bin gespannt, was mit resvg passiert, aber ich kenne keine GUI-Bibliothek, die es integriert.

@dnfield Ich möchte Ihre Arbeit nicht kritisieren, da Sie großartige Arbeit geleistet haben, und ich danke Ihnen sehr dafür. Ich bin nur enttäuscht, dass die Farbe nicht wie erwartet funktioniert. Ich musste mir meine eigene Farbe aussuchen, ich bin kein Künstler, ich bin auch farbenblind.

Flutter muss SVGs genauso unterstützen wie moderne Browser. Es ist ein Muss. Wir müssen in der Lage sein, direkt von einer Webseite kopierte oder importierte Assets ohne Änderung zu verwenden.

Ehrlich gesagt, Gott sei Dank gibt es zumindest ein Paket, aber wir brauchen Farbe, wir brauchen Effekte, wenn die Leistung ein Problem ist, dann machen Sie es den Leuten optional, Features auszuschalten, und zwingen Sie sie nicht, Features einzuschalten.

Wir brauchen volle Spezifikationsunterstützung für SVGs. Ich stimme @lukepighetti zu. Bei Hummingbird ist dies ein Muss, oder Webentwickler werden Flutter auslachen und ihm einen harten Pass geben.

Sogar @yjbanov erwähnt es in seinem Artikel hier: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8

Da @dnfield 'resvg' erwähnte, sollte @SocialMammoth vielleicht auch auf die Unterstützung von 'SVG static' anstelle von vollständiger SVG-Unterstützung abzielen:
http://www.w3.org/TR/SVG11/feature#SVG -statisch,
was meiner Meinung nach alle glücklich machen sollte.

Sogar Chrome unterstützt nicht alle SVG-Funktionen und insbesondere das Rendern von Text von rechts nach links ist fehlerhaft (ohne Fortschritte in den letzten Jahren). Mit anderen Worten, ich glaube nicht, dass die volle SVG-Unterstützung realistisch ist. SVG-static scheint eine vernünftige Teilmenge zu sein. In flutter_svg vermisse ich Text-Hadling (inkl. Text auf Pfad), Filter und Masken. Es wäre schön, Unterstützung in Flutter zu haben, um so etwas zu bauen https://drifted.in/horologium-app/

@SocialMammoth

Flutter muss SVGs genauso unterstützen wie moderne Browser

Nein. Flutter-Apps müssen schlank sein. Bei diesem Problem geht es nicht um ein allmächtiges Paket, das mit allen SVG-Dateien fertig wird, es heißt ausdrücklich "unterstützt ein Vektor-Zeichenformat" ( unterstützt kein SVG ). Das Ziel, so wie ich es verstehe, ist bisher, alle Flatter-Apps so weit wie möglich von Bitmap-Assets zu befreien. Und das auf Motorebene. @dnfield hat über ein Paket großartige Arbeit geleistet. Jetzt ist es an der Zeit, nur einige Vektorgrafiken von Dart verfügbar zu machen, ohne die Flutter (Skia)-Engine oder die App selbst aufzublähen . Die Verwendung .skp scheint eine gute Wahl für dieses Ziel zu sein. Es ermöglicht bereits mehr als das Vektorzeichnen von Android und ist bereits in der Engine enthalten. Designer werden sich an den Funktionsumfang anpassen.

@ohir Ich denke, wir sind uns dann nicht einig. Ein Front-End-Framework, das keine SVG-Dateien unterstützt, ist wirklich ein schlechter Witz.

Nun, ich glaube nicht, dass Flutter SVG nützlich sein muss, aber es wäre schön. Und wenn nicht SVG, dann ein Format, das Sie leicht von Ihrer typischen Vektorgrafikanwendung erhalten können.

Grundsätzlich ist SVG das hier zu verwendende Standard-Vektorformat, aber wir können unmöglich erwarten, dass alle Funktionen von SVG unterstützt werden. Das Ziel war immer, das Minimum zu unterstützen, um Vektor-Assets aus typischen Vektorgrafik-Anwendungen zu importieren. Welche Vektorgrafik-Anwendungen können .skp lesen und schreiben?

Mein Test, ob ein Vektorformat allgegenwärtig genug ist, ist, ob es in Adobe Illustrator, Affinity Designer und Inkscape verfügbar ist. Soweit ich weiß, bleibt SVG so ziemlich übrig. Und ich stimme zu, dass wir nicht jede SVG-Funktion brauchen. Nur einfache Pfadstriche und -füllungen sind in Ordnung.

Ich kann das nicht mit Autorität sagen, aber ich vermute, es wäre einfacher, eine Teilmenge von SVG zu implementieren, als Vektorgrafiken davon zu überzeugen, .skp zu unterstützen.

@lukepighetti : Dans Idee ist es, das interne Format der Engine zu verwenden. Der Kern dieser Lösung besteht darin, SVG in das Format zu konvertieren, das die Engine versteht. Es spielt keine Rolle, ob Inkscape dieses Format kennt, solange es einen brauchbaren Konverter gibt.

Ich war gestern im Zweifel, aber heute, nach ein wenig Recherche, scheint mir, dass die Chrome-Automatisierung gut unterstützt wird. Wenn Headless Chrome mit einem Rendering-Proxy verwendet werden kann, kann es auch zu einem svg->skp -Konverter gemacht werden. Etwas schwer, aber bezahlbar. Tief hängende Früchte in der Tat, @dnfield :).

Das alles passt gut zu den Zielen, die @Hixie vor fast drei Jahren gesetzt hat.

@dnfield bitte korrigiere mich, wenn ich falsch liege.
Ich gehe davon aus, dass .skp im Grunde das Binärformat für ein Skia-Bild ist.

Da dart:ui auch einen Wrapper für Skia Picture hat, der von Dart Land generiert werden kann, werden die Inhalte dieser Bilder nicht verschiedene Skia-Fähigkeiten enthalten? Grundsätzlich wird der von Chrome alle Skia-Funktionen verwenden, während der von dart:ui dies nicht tut (begrenzt durch das, was über die Flutter-Engine verfügbar gemacht wurde)? Irgendwie seltsam für das Argument „Leistung“, nicht wahr? Flutter engine & dart:ui entfernt alles von Skia, das als langsam eingestuft wurde (ohne Leistungszahlen anzuzeigen), aber dann können Sie all das verwenden, wenn es über die von Chrome generierte .skp -Datei eingeht?

Eine andere Sache, wenn Sie .skp verwenden, wie würden Sie die Farben eines Symbols angeben, wenn das Symbol beispielsweise 2 oder mehr Farben verwendet?

Wie wäre es mit dem alten Argument, dass Sie durch die Verwendung von Dart in Flutter die Kontrolle über jedes Pixel haben? Für mich ist das flutter_svg -Paket, das 'svg static' unterstützt, der richtige Weg, weil es zukünftige Innovationen im Dart-Land ermöglichen wird. Indem Dart umgangen und C++ einfach damit behandelt wird, scheint es, als könnte Dart es nicht hacken.

Skia scheint SVG zu unterstützen. Warum bietet Flutter keine direkte SVG-Unterstützung?

Soweit ich das beurteilen kann, möchte das Flutter-Team die Skia-Paketgröße so klein wie möglich halten. Ich wusste nicht, dass Skia SVG unterstützt, aber wenn es das tut, ist das eine schwache Frucht. Als Hinweis gibt es ein weiteres Problem beim Hinzufügen von Lottie-Unterstützung für Flutter, da Skia dies unterstützt.

Skia unterstützt das Importieren von Zeichnungen aus SVG nicht, bietet jedoch experimentelle Unterstützung zum Erstellen von SVGs (was hier nicht so nützlich ist).

Und ja, die Verpackungsgröße ist ein Problem.

Bitte, wenn Sie nach SVG-Unterstützung fragen möchten, siehe: https://github.com/flutter/flutter/issues/15501

Bei diesem Fehler geht es speziell um die Unterstützung von Vektorgrafiken ohne Unterstützung von SVG.

Für Leute, die an einem Vektorgrafikformat interessiert sind, bin ich neugierig auf Ihre Anwendungsfälle.

Diese sind mir bisher bekannt:

• Symbole. Statische Bilder, die möglicherweise dynamisch neu eingefärbt werden müssen (z. B. ausgegraut, wenn deaktiviert) und je nach Rendergröße des Ziels unterschiedliche Detailstufen aufweisen müssen. Es ist unwahrscheinlich, dass Text vorhanden ist.

• Animierte Symbole: Zwei Symbole wie oben beschrieben und eine Beschreibung, wie man nahtlos von einem zum anderen übergeht.

• Kulissen: Bilder, die viel größer sein können als der Bildschirm, möglicherweise mit Parallaxe; im Allgemeinen einfache Szenen mit Formen, Farbverläufen und Schatten, die wahrscheinlich keinen Text enthalten.

Gibt es andere Anwendungsfälle, die Ihren Bedarf an Vektorgrafiken begründen? Bitte beschreiben Sie diese hier. Danke.

Unterstützung mehrerer Auflösungen mit einer einzigen Grafik, insbesondere mit Vorwärtskompatibilität für Bildschirme mit höherer Auflösung

Meine App ist im Grunde ein Begleiter zu einer Konferenz. Ich möchte Karten des Hotels mit der Möglichkeit zum Schwenken und Zoomen einfügen. Die Verwendung eines hochauflösenden Rasters ist aus Größen- und Leistungsgründen nicht praktikabel; Vektorgrafiken sind perfekt.

Im Moment verwende ich eine eingebettete PDF-Webansicht, die sehr unpraktisch ist und nur online funktioniert (obwohl ich das wahrscheinlich umgehen könnte, wenn ich müsste).

• Kundenspezifische „echt aussehende“ Knöpfe sind ohne Vektorgrafiken praktisch unerreichbar. Besonders solche, die sich drehen, schräg stellen oder scheren .

Um das zu ergänzen, was Dan gesagt hat: Nur 1 KB Vektorquelle kann feine Details und ein flüssiges Bild sowohl auf einem 7-Zoll-Tablet als auch auf einem 105-Zoll-4HD-Fernseher erzeugen. Aktueller Fall aus der Kassen-Kiosk-App für 10- oder 14-Zoll-Bildschirme (zum Kassierer) und 5- oder 7-Zoll-Bildschirme (zum Kunden). Der Satz aller über 5000 Vektorzeichnungen von Leckereien war weniger als 5 MB groß. Nur die Teilmenge "Gemüse" (~ 150) davon, die für genau zwei verwendete Bildschirme in PNGs konvertiert wurde, war über 30 MB groß. Der vollständige Inventarsatz kann im GByte-Bereich enden.

PS Die nächste große Sache wäre, Vektorgrafiken mit Touch-Regionen zu haben, die zB über eine ausgewählte Füllung definiert werden. Das hätte Tausende Codezeilen für die ganze Klasse von meist statischen, aber detailreichen Interfaces eingespart.
Wie in interaktiven Maschinenbedienhandbüchern.

Träume beiseite - lassen Sie unsere Designer einfach zuerst einfache Vektorzeichnungen verwenden :)

Danke für das bisherige Feedback. Sehr hilfreich.

@ohir Kannst du näher auf "Drehen, Neigen oder Schmelzen" eingehen?

Meine Problemumgehung dafür, mit der ich eigentlich sehr zufrieden bin, besteht darin, das Paket path_parsing (https://pub.dev/packages/path_parsing) zu verwenden, um Zeichenbefehle für die Leinwand aus einer SVG-Pfadzeichenfolge zu generieren und diese dann zu verwenden um ein CustomPainter -Widget zu erstellen, das es zeichnet. Für andere SVG-Formen außer Pfaden (Rechteck, Kreis usw.) übersetze ich sie einfach manuell in Zeichenbefehle, was etwas mühsam, aber nicht zu schwer ist.

Dies funktioniert sehr gut für einfache Vektorsymbole und ermöglicht es Ihnen, dasselbe Widget mit unterschiedlichen Größen und Farben in der gesamten App zu verwenden.

Hier ist der Code: https://gist.github.com/jpotterm/7b30739e0af722baf97a397d9841d908

Es könnte wirklich nützlich sein, wenn es ein offizielles Flutter-Befehlszeilentool gäbe, das eine SVG-Datei analysiert und Zeichenbefehle für die Leinwand erzeugt, die ein ähnliches Ergebnis erzielen würden.

@Hixie
Z.B. https://dribbble.com/shots/1083175-Air-conditioning-controller#
Der zentrale Drehknopf und die ihn umgebende Anzeige können mit der aktuellen Canvas-API akribisch gezeichnet werden, aber es kann auch in 2 KB (xml svg) passen, dann ca. 300-500 B zeichbar. Wurden Vektorgrafiken und rudimentäre affine Transformationen aus dem Skia-Level über eine „Vektorgrafik“-Schnittstelle bereitgestellt, konnte dieser Knopf zum Leben erweckt werden, indem einfach Füllungen auf die Anzeigesegmente angewendet und ein Pfad des kleinen Kreises der Anzeige gedreht wurde.

Wichtiger ist, dass dieser ganze Knauf mit Farben und anderen Details genau so gezeichnet wird, wie der Designer es geplant hat – denn es wäre ihre ganze Arbeit nur eingebettet. Die Schnittstelle von Vektorzeichnungen + Füllung + Farbverläufe + guter Designer kann folgendermaßen aussehen: https://www.artua.com/app-design-deckadance/
Affine Transformationen seitens des Entwicklers machen ein solches Design ansprechend und lebendig.
Was Skew- und Shear-Transformationen betrifft: kann zB. verwendet werden, um Schalthebelschaltungen zu modellieren.
("Melt"-Wortverschiebung, die wahrscheinlich von Salvadore Dalis Geist verursacht wurde;)

/off-topic/

@jpotterm
Es könnte wirklich nützlich sein, wenn es ein offizielles Flutter-Befehlszeilentool gäbe, das eine SVG-Datei analysiert und Zeichenbefehle für die Leinwand erzeugt, die ein ähnliches Ergebnis erzielen würden.

Ich habe etwas ähnliches produziert. Codegenerator, der nach einer Anmerkung sucht und die angegebenen SVG-PathData nimmt und einen Getter generiert, der ein Path-Objekt zurückgibt. Wenn die Leute wollen, könnte ich es bereinigen und es als Open Source öffnen.

Die App , an der ich mitarbeite, ist perfekt für Vektorgrafiken geeignet. Es hat Hunderte von kleinen Schwarz-Weiß-Strichgrafiken, die die Benutzeroberfläche aufbauen. Diese können getönt und in der Größe verändert werden.

Dies in mehreren Farben bei allen unterschiedlichen Dichten zu tun, wäre schrecklich, nicht nachhaltig und würde das endgültige Paket zu einem Riesen machen. Diese Bilder stammen aus handgezeichneten Grafiken.

Vielen Dank an alle für Ihr Feedback. Sehr hilfreiche Kommentare.

Für Leute, die an einem Vektorgrafikformat interessiert sind, bin ich neugierig auf Ihre Anwendungsfälle.

Ein weiterer Anwendungsfall ist im Grunde alles, was dynamische Grafiken benötigt:

• Diagramme
• Ladebalken
• Zeichnung
• etc

Ich bin eigentlich sehr überrascht, dass Flutter das nicht unterstützt, da Skia eine Untergruppe von SVG unterstützt (die nützlichen Teile sowieso).

Ich möchte SVGs für Kunst verwenden. Ein hochwertiges Vollbild-Tablet-PNG kann 2 MB oder mehr groß sein, während das entsprechende SVG 5-10 KB groß sein kann. Fügen Sie ein paar Bildschirme hinzu, und wir sprechen von 20 MB zum Paket anstelle von 100 KB.

Für programmatische Grafiken bin ich ein großer Fan von CustomPaint, daher würde ich SVG niemals für Dinge wie Diagramme, Ladebalken, Zeichnungen usw. verwenden. Und ja, obwohl ich zustimme, dass es teuer ist, Dinge in CustomPaint zu schreiben, ist das, was Sie am Ende bekommen, absolut solide und wird sehr schnell und sehr schön gerendert.

Wenn Sie SVG unterstützen, müssen Sie alle SVG-Funktionen wie Farbverläufe, Striche und mehr unterstützen. Dies wurde im Android-Projekt nicht durchgeführt, und das wirft einige Warnungen für Entwickler auf, da fast alle anderen dev. Plattformen unterstützen SVG und Vektoren. Es sind die Grundlagen der Grafik, machen Sie es richtig!

@harounhajem siehe https://github.com/flutter/flutter/issues/15501 für dieses Thema sowie https://github.com/dnfield/flutter_svg

@PierBover speziell für Diagramme beachten Sie bitte https://pub.dev/packages/charts_flutter

Ich bin gerade in Flutter gesprungen. Ich habe eine persönliche App von Ionic 3 auf Ionic 4 umgestaltet und es war (wieder) völlig anders und erforderte eine App von Grund auf neu.
Also beschloss ich, zu Flutter zu wechseln und es auszuprobieren. Wie gesagt, ich hatte diese App fertig und funktionierte, und dazu gehören viele Grafiken und Symbole, die ich für meine App bereit hatte. Ich bin kein Designer und muss für diese Designs bezahlen.
Ich verstehe, dass ich nicht der Einzige in dieser Situation bin, der seine SVG-Assets wiederverwenden möchte.

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

(Ich bin mir nicht sicher, warum das dann nicht geschlossen ist)

Weil das eigentliche Problem – Unterstützung eines anderen zeichenbaren Vektorformats als SVG – nicht gelöst ist?

Oh, meine Schuld @jonahgreenthal. Ich bin hierher gekommen, um nach SVG-Unterstützung zu suchen, und habe gesehen, dass der dritte Kommentar nach demselben gefragt hat

Uber hat dies für iOS getan: https://github.com/uber/cyborg
Es wäre interessant, so etwas in Flutter zu sehen.

Irgendwelche Updates dazu?

@dnfield , das gut funktioniert hat, um ein SVG als neues Widget anzuzeigen, aber es funktioniert nicht mit der Eigenschaft AssetImage . Ich muss es mit einem CircleAvatar -Widget anzeigen

@Hixie Es gibt auch einen Anwendungsfall, bei dem das SVG-Symbol mehrere Farben haben muss, da dies dem Benutzer hilft, die Bedeutung des Symbols zu verstehen. Ich hoffe also, dass die Lösung auch die Möglichkeit bietet, die Designfarbe anzupassen.

Derzeit schlagen einige Leute vor, SVG in eine Schriftart umzuwandeln und sie auf die gleiche Weise wie das Symbolpaket zu verwenden. In diesem Fall können wir jedoch nicht mehrere Farben im Symbol haben.

4 Jahre diverse Kommentare ohne brauchbare Lösung. Kurz gesagt - nein, nicht möglich. Nein, nicht geplant.

Können wir wenigstens wissen, warum das so problematisch/schwierig ist?

Flutter_svg bietet gute Unterstützung für SVG in Flutter. Rive unterstützt auch ein vektorbasiertes Format für Flattern.

In dieser Ausgabe geht es um die Erstellung eines neuen vektorbasierten Formats. Das braucht Zeit :)

@dnfield Es gibt einige Widgets mit Hintergrundeigenschaften, die wir nicht an SVGs weitergeben können. Gibt es eine Möglichkeit das zu archivieren?

Bitte fügen Sie die richtige SVG-Unterstützung hinzu, anstatt ein neues Format zu erstellen. SVG ist der De-facto-Standard.

Immer wenn ich eine App erstelle, gibt es normalerweise eine zugehörige Website, und Websites verwenden SVG, und sie verwenden wunderschön animierte SVGs, die bei jeder Auflösung leicht und schön sind.
Es wäre wirklich sinnvoll, diese animierten SVGs einfach in Flutter wiederzuverwenden, damit die Konsistenz richtig erreicht werden kann, anstatt Bilder und Animationen neu implementieren zu lassen!

SVG existiert bereits, funktioniert und wird überall sonst überall verwendet und unterstützt. Konzentrieren Sie sich darauf, was wir brauchen.

In dieser Ausgabe geht es um die Erstellung eines neuen vektorbasierten Formats

Sie meinen also, in dieser Ausgabe geht es darum, das Rad neu zu erfinden, richtig? Ich stimme @d-silveira zu - besser eingebaut, richtige Unterstützung für SVG, wir brauchen kein neues vektorbasiertes Format.

Ja, es geht darum, ein besseres Rad zu erfinden. SVG wird bereits in Flutter mit flutter_svg unterstützt.

Es ist besser, SVG importieren und intern verarbeiten zu können, entweder zur Erstellungszeit oder während des Imports automatisch Code zu generieren. Ähnlich wie bei nativem Android – Sie können SVG importieren, und die XML-Datei für die Android-Pfaddefinition wird aus Quell-Svg generiert. Der Import in das Flutter-Projekt könnte Dart-Code generieren, der zum Zeichnen von Vektorobjekten wiederverwendet werden kann.

@Hixie ist gut, um die Dinge zu verbessern, ich werde das nicht diskutieren, aber wie können wir einige Widgets unterstützen, die in der Zwischenzeit nur Nicht-SVG-Bilder zulassen? (zum Beispiel die mit Hintergrundeigenschaften)

Das wäre eine Feature-Anfrage für flatter_svg.

@Hixie Flutter SVG könnte dort ein Bild erstellen, aber es wäre schön, wenn das Framework in einigen Fällen toleranter wäre, Bilder statt Bilder aufzunehmen. Abgelegt unter https://github.com/flutter/flutter/issues/49712

flatter_svg

Warum ist das so? Dies hat überhaupt nichts mit dem Paket flutter_svg zu tun:

CircleAvatar(
  backgroundImage: MySVGImage(),
)

@Hixie flatter_svg funktioniert nur in einigen Fällen. Lassen Sie mich Ihnen ein praktisches Beispiel geben: Ich muss eine REST-API verwenden, die an einigen Endpunkten Bild-URLs zurückgibt. Die Bilder werden vom Benutzer in einem Backoffice erstellt, daher sind einige von ihnen PNG, einige JPG und einige SVG. Das Backoffice schließt die Dateierweiterung nicht in die URL ein und unterstützt HEAD nicht, daher haben wir keine Möglichkeit, den Bildtyp im Voraus zu kennen.
Das erwartete Verhalten von Flutter wäre, die URL in image.network zu empfangen und damit umzugehen, anstatt mich zu zwingen, durch Reifen zu springen, um zu erraten, um welche Art von Bild es sich handelt, und wenn es sich um ein SVG handelt, wechseln Sie zu flutter_svg.
All dies berücksichtigt nicht einmal die Tatsache, dass das flutter_svg nicht in jedem Fall ein Drop-In-Ersatz für das Bild ist! :P

SVG wird im Allgemeinen auch nur für einige Anwendungsfälle funktionieren. :-)

Bei diesem speziellen Problem geht es um ein Nicht-SVG-Vektorgrafikformat. Wenn Sie eine andere Anforderung haben, empfehle ich, diese als separate Ausgabe einzureichen.

Einige wichtige Überlegungen aus früheren Diskussionen sind:

• Wir wollen keine volle SVG-Unterstützung. Es gibt zu viel in der Spezifikation, das teuer, schwer und/oder dupliziert, was wir bereits in Flutter haben.
• Wir sollten in unserem unterstützten Format betonen, dass diese Operationen in unserer Grafik-Engine (Skia) effektiv/effizient/optimiert sind.
• Möglicherweise möchten wir das Format zur Erstellungszeit verarbeiten, anstatt einen vollständigen Laufzeitinterpreter zu unterstützen.

Wie geht man also vor, um ein neues Vektorformat für flatteroptimierte Bilder zu erstellen? Basierend auf oben denke ich, dass das vorgeschlagen wird ...

Vielleicht können die Jungs von Rive eine SVG-Konvertierungsbibliothek zusammenstellen. Sie haben bereits eine proprietäre (und Open-Source-) Vektor-Engine für Flutter. @luigi-rosso

Warum nicht den Import von SVG in das Flutter-Projekt unterstützen? Und konvertieren Sie in Dart-Code/neuen Vektor, der gezeichnet werden kann usw. Beachten Sie, dass die gleiche Situation auf nativem Android vorliegt. Deshalb verwenden wir SVG nicht direkt (was meiner Meinung nach nicht viel Sinn macht) und importieren stattdessen in das Projekt, SVG wird entfernt von nicht unterstützte und nicht benötigte Funktionalitäten und in Android-Pfaddefinition konvertiert.

Ist das nicht eine gute Idee für Flutter?

@giaur500 In dieser Ausgabe geht es nicht darum. Wenn Sie einen Vorschlag speziell zu SVG haben, reichen Sie bitte ein separates Problem ein.

Um fair zu sein, diskutieren viele der Kommentare in dieser Ausgabe SVG und Flutter.

Folgen

SVG ist perfekt für eine großartige Benutzeroberfläche auf Pixelebene. Eigentlich das Beste bisher für tolle Pixel.

@lukepighetti Ja. Sie sind leider alle off-topic und sie hier zu haben wird zu keiner Verbesserung von Flutter führen.

Einige wichtige Überlegungen aus früheren Diskussionen sind:

• Wir wollen keine volle SVG-Unterstützung. Es gibt zu viel in der Spezifikation, das teuer, schwer und/oder dupliziert, was wir bereits in Flutter haben.
• Wir sollten in unserem unterstützten Format betonen, dass diese Operationen in unserer Grafik-Engine (Skia) effektiv/effizient/optimiert sind.
• Möglicherweise möchten wir das Format zur Erstellungszeit verarbeiten, anstatt einen vollständigen Laufzeitinterpreter zu unterstützen.

Ein Build-Time-Tool wäre großartig, nehmen Sie den Vektor und rendern Sie alle Bildschirmdichten und fügen Sie die Assets als Bilder hinzu. Apples iOS macht das mit PDF-Icons.

Es ist besser, SVG importieren und intern verarbeiten zu können, entweder zur Erstellungszeit oder während des Imports automatisch Code zu generieren. Ähnlich wie bei nativem Android – Sie können SVG importieren, und die XML-Datei für die Android-Pfaddefinition wird aus Quell-Svg generiert. Der Import in das Flutter-Projekt könnte Dart-Code generieren, der zum Zeichnen von Vektorobjekten wiederverwendet werden kann.

ich mag das

@giaur500 In dieser Ausgabe geht es nicht darum. Wenn Sie einen Vorschlag speziell zu SVG haben, reichen Sie bitte ein separates Problem ein.

Neues Problem wurde erstellt: https://github.com/flutter/flutter/issues/63752

Also, was ist der Stand davon?
Gibt es überhaupt die Absicht, etwas Ähnliches wie VectorDrawable oder sogar VectorDrawable selbst für Android zu unterstützen?

Als Entwickler, der erwägt, das Ökosystem zu übernehmen, würde ich sagen, dass dies eine Stärke ist, die mich davon überzeugen würde, nativ zu bleiben.

Ich habe es nie selbst ausprobiert, aber flatter svg lib hatte früher Unterstützung für at
am wenigsten wichtige Merkmale von Vektoren, die wie Pfade gezeichnet werden können.

Am Sa, 15. August 2020, 19:46 Uhr schrieb n00bmind, [email protected] :

Also, was ist der Stand davon?
Gibt es überhaupt die Absicht, etwas Ähnliches zu unterstützen?
VectorDrawable oder sogar VectorDrawable selbst für diejenigen auf Android?

Als Entwickler, der erwägt, das Ökosystem zu übernehmen, würde ich sagen, dass dies eine ist
starker Punkt, der mich davon überzeugen würde, ein Eingeborener zu bleiben.

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/flutter/flutter/issues/1831#issuecomment-674375846 ,
oder abbestellen
https://github.com/notifications/unsubscribe-auth/ABI4Y4LWYSYEIWI3RRSSCK3SAZKO5ANCNFSM4B3FXMMQ
.

Ich denke, Staat ist nichts. Aus diesem Thread ergibt sich hier kein Fazit und auch meine Idee, etwas ähnliches wie Native Vector Drawable zu entwickeln, schloss sich sofort.

Gibt es einen Grund, warum das Flatter-Svg-Paket für Sie nicht funktioniert? Wir verwenden es mit großem Erfolg in einer unserer Apps. Ich habe Vector Drawable noch nie verwendet, daher bin ich mir nicht sicher, wie es mit SVG verglichen wird.

Es scheint, dass das flatter_svg-Paket einen Blick für diese Art von Anwendungsfall wert ist.
@lukepighetti wie würdest du seine leistung bewerten? Meine Verwendung wäre nur ein Splash-Bild und ein paar Grafiken in Symbolgröße hier und da in der App, also nichts Besonderes.

Es scheint, dass das flatter_svg-Paket einen Blick für diese Art von Anwendungsfall wert ist.

@lukepighetti wie würdest du seine leistung bewerten? Meine Verwendung wäre nur ein Splash-Bild und ein paar Grafiken in Symbolgröße hier und da in der App, also nichts Besonderes.

Ich würde es für Ihren Anwendungsfall sehr hoch einstufen. Ich denke, die Leute sollten es wirklich versuchen, bevor sie Druck auf das Flutter-Team ausüben, etwas intern zu tun.

@lukepighetti

bevor sie das Flutter-Team unter Druck setzen, intern etwas zu unternehmen.

Ein echtes Problem bei diesem speziellen Problem ist, dass Skia, die Flattergrafik-Engine, alles hat, was nötig ist, um ein "zeichenbares" Vektorformat mit der höchsten Geschwindigkeit laufen zu lassen, ohne ein ziemlich schweres Dart-Paket zu importieren, das die Engine aufruft, um Primitive Schritt für Schritt zu zeichnen.

Ich denke, die Leute sollten es _(svg-Paket)_ wirklich versuchen

Ich denke, dass die Leute Googler laut und an allen möglichen Orten zu diesem gh-Thema aufrufen sollten, denn jetzt – nach vier Jahren – kann nur negative PR jemanden bei Google dazu bringen, darüber nachzudenken, ob mobile Rahmenbedingungen im Jahr 2020 uns wirklich zum Tragen zwingen sollten all die Megabytes an Rastergrafiken in unseren Apps.

[@Hixie]

Sofern mir nichts fehlt, würde die Implementierung für eine solche Flutter-Funktion dem flutter_svg -Paket von @dnfield sehr ähnlich sehen, das den von Ihnen beschriebenen Anwendungsfall zu lösen scheint. Darüber hinaus gehört der Betreuer zum Flutter-Kernteam, sodass wir uns seiner Qualität sicher sein können. Würden Sie sich besser fühlen, wenn dieses Paket in https://github.com/flutter/plugins wäre?

Wenn ich etwas vermisse, können Sie mich gerne weiterbilden, damit ich mehr über dieses Thema erfahren kann.

@lukepighetti

Ich denke, dass "not SVG" im Titel der Ausgabe rot, fett und blinkend sein sollte.

In dieser Ausgabe geht es ausdrücklich nicht um das SVG-Format.

OP (und ich) hatten gehofft, Skias Pfad-API offenzulegen, damit die Asset-Grafiken in kompakter Form dargestellt werden können - dh binär mit festem Endianess. Dan hat sogar einen Patch für Skia erstellt, der für flutter_svg funktioniert, was uns wiederum erlaubt, SVG-Assets zu verwenden. Obwohl wir XML immer noch zur Laufzeit der App parsen und durch Aufrufen der Engine zeichnen – auch für die statischen Assets, die in der APK gebündelt sind.

Mit der richtigen Unterstützung für das benutzerdefinierte zeichenbare Vektorformat (nennen wir es fvd ) würde das Parsen der Designerarbeit einmal erfolgen – zur Zeit des App-Builds würde das Objekt im fvd -Format direkt an Skia geworfen. In grafiklastigen Apps hätte ein solcher Ansatz enorme Auswirkungen auf die App-Größe und spürbare Einsparungen bei der Renderzeit. [ mit Selbstzitierung ]

Ich hoffe, das Obige zeigt, wie ich dieses Problem sehe, und rechtfertigt meinen Aufruf, es endlich zu erledigen.
Sogar als Teil der flutter_svg-Bibliothek.

Flutter verdient einen weiteren Vorteil gegenüber konkurrierenden Technologien.

Für das, was es wert ist, ist nichts falsch daran, flutter_svg zu verwenden, es ist nur so, dass es sogar einige sehr einfache Dinge vermissen lässt, z. B. unterstützt es keine Prozentsätze und stürzt direkt ab, wenn versucht wird, sie zu rendern. Dieser Kommentar ist kein Klopfen an der flutter_svg-Bibliothek, er soll nur Leuten erklären, die sagen, dass wir einfach flutter_svg verwenden können.

flutter_svg scheint sehr gut zu funktionieren, obwohl Scripting, HTML, SMIL usw. nicht unterstützt werden.

Es sieht gut aus und wir können SVG aus Datei-Assets, Netzwerk oder gewöhnlichen Strings erstellen.