Pikiran acak lainnya (tidak semua milikku):

• Kami benar-benar ingin menghindari mendukung format di mana ada harapan yang sudah ada sebelumnya untuk mengimplementasikan fitur yang tidak akan berkinerja baik. Misalnya, menerapkan SVG akan mengarahkan orang untuk mengharapkan dukungan SVG penuh termasuk skrip, HTML, SMIL, dll.
• Kita harus mendesain format kita secara eksplisit sangat selaras dengan fitur performa di Skia, misalnya drawAtlas.

Dukungan vektor tampaknya penting untuk kerangka kerja aplikasi yang mendukung berbagai ukuran dan kepadatan layar. Jika tidak, Anda akan mendapatkan ikon yang terlihat seperti ini:

Alih-alih ini:

@HansMuller

Kris juga menyebutkan hal ini: kami dapat melakukan beberapa pemrosesan SVG terbatas pada waktu pembuatan. Misalnya kita mungkin menghasilkan Widget ikon MD berdasarkan deskripsi SVG. Jika dilakukan dengan hati-hati yang mungkin menghemat ruang dan meningkatkan kesetiaan pada desain aslinya.

Khusus untuk ikon desain material, kita harus menyelidiki menggunakan font ikon desain material.

@appsforartists Untuk apa nilainya, baik Cocoa maupun android.view tidak menggunakan format vektor untuk ikon.

@abarth Tidak mengejutkan saya tentang iOS - sepertinya mereka mulai dengan layar 3,5" hardcoded dan telah berusaha cukup keras untuk menjaga model mental/kesederhanaan resolusi yang didukung sejak itu (lihat: lebar setiap iPhone sama, atau iPad dan iPad mini asli memiliki resolusi yang sama) Saya tidak tahu banyak tentang pengembangan seluler, tapi itu sedikit mengejutkan tentang Android yang tidak berbasis vektor.

Bagaimanapun, ikon seharusnya tidak terlihat alias seperti pada tangkapan layar di atas, dan vektor adalah solusi yang bagus untuk independensi resolusi. Bagaimana kalian memilih untuk menerapkan untuk memecahkan ikon cantik terserah Anda. :senyum:

Bagaimana kalian memilih untuk menerapkan untuk memecahkan ikon cantik terserah Anda.

Apakah Anda bersedia untuk mengajukan masalah terpisah tentang masalah resolusi yang Anda lihat dengan ikon? @krisgiesing mengimplementasikan penyelesai aset yang sadar akan resolusi yang menangani banyak kasus. Akan sangat berharga untuk mempelajari kasus-kasus yang tidak ditanganinya.

Saya sedang mencari untuk menambahkan beberapa tes untuk dukungan kesadaran resolusi saat ini, jadi sekarang akan menjadi waktu yang tepat untuk memahami jika ada sesuatu yang tidak berfungsi dengan benar.

Sepertinya 3x memiliki rasio piksel perangkat 2.6 , yang mungkin tidak kita miliki asetnya.

Saya sedang melihat kasus khusus ini sekarang. Rasio piksel perangkat adalah 2,625; kami memilih aset 3.0x, yang diharapkan. Namun, sepertinya ada sesuatu yang terjadi selama rendering yang menyebabkan semacam artefak alias tambahan. Jadi meskipun @abarth memperbaiki kasus ikon Desain Material dengan beralih ke font, saya masih menyelidiki atas nama jenis aset gambar lain yang memerlukan penskalaan yang bergantung pada resolusi.

Saya akan membuka bug lain untuk melacak ini karena ini bersinggungan dengan dukungan format vektor.

Lihat #2337

Android mendukung format "VectorDrawable" yang hanya merupakan subset SVG yang berkinerja baik. Saya harap Anda mempertimbangkan untuk menggunakan format yang sama, mengingat ia sudah memiliki beberapa dukungan komunitas dan tim Android tampaknya menganggap kinerjanya memadai.

VectorDrawable tentu saja dipengaruhi oleh SVG tetapi itu bukan subset. Juga menggunakan XML, yang cukup banyak menjamin bahwa itu tidak akan menjadi format vektor paling berkinerja yang bisa dihasilkan. :-)

Adalah salah untuk menggambarkan VectorDrawable sebagai subset yang ketat, tetapi tampaknya masih merupakan kompromi yang seimbang antara memastikan kinerja _render_ yang baik dan kemudahan penggunaan. Spesifikasi VectorDrawable sering kali mengacu pada spesifikasi SVG untuk area utama seperti sintaks data jalur, membuatnya lebih mudah untuk mengonversi aset SVG yang sudah digunakan banyak pengembang dan membagikan VectorDrawables yang sudah ada di aplikasi Android.

Saya tidak dapat membayangkan bahwa XML adalah pemblokir kinerja yang signifikan karena hanya memengaruhi penguraian. Tampaknya bagi saya bahwa kinerja _render_ - jenis kinerja yang memengaruhi tujuan Flutter untuk aplikasi 60fps - lebih bergantung pada rangkaian operasi vektor yang harus digambar Skia, bukan langkah penguraian yang dapat dilakukan sekali dan di-cache.

Saya tidak ingin menjelaskan intinya tetapi saya tidak dapat menahan perasaan bahwa pekerjaan untuk ini telah dilakukan dan oleh karena itu tidak perlu disimpan dalam tonggak "setelah rilis 2.0".

Kami akhirnya menggunakan font Desain Material untuk Ikon Desain Material. Saya tidak mengetahui adanya hambatan yang menghentikan seseorang untuk membangun ini di atas Flutter hari ini menggunakan panggilan langsung dart:ui atau widget CustomPaint: https://docs.flutter.io/flutter/widgets/CustomPaint-class. html. Kami tidak memiliki rencana segera untuk membangun seperti saat ini.

$0,02 - bahkan browser tersendat ( dan kerangka kerja pesaing React Native tidak masalah, solusi mereka adalah peretasan) dapat membuat SVG. Opsi ekspor gambar memerlukan pembuatan minimal 3 file untuk setiap ikon atau aset seni untuk tim saya. Itu praktik yang buruk dibandingkan dengan satu file SVG yang dapat ditampilkan pada resolusi apa pun.

Untuk komentar Hixie di atas, ekspektasi yang sudah ada sebelumnya tidak boleh menghambat penerapan fitur yang bermanfaat. Saya lebih suka dapat memiliki dukungan dasar untuk tampilan SVG (yang memecahkan banyak masalah bagi saya dan tim saya) dan menemukan opsi yang diperluas tidak tersedia daripada mengandalkan jumlah PNG yang terus meningkat untuk mengakomodasi yang terus meningkat jumlah resolusi layar.

Saya kembali membuat font untuk tim saya, tetapi itu tidak sebagus dukungan SVG asli karena format font menambahkan pemformatan ekstra untuk tinggi baris dan spasi huruf yang harus disesuaikan di aplikasi. Juga, font ingin ditampilkan pada resolusi tetap (12px, 16px, 20px, 36px...) yang juga membatasi.

Terima kasih atas kerangka kerja Flutter yang keren. :)

Saya akan mendorong siapa saja yang menginginkan dukungan SVG untuk mengimplementasikan dukungan SVG sebagai paket Dart untuk Flutter.

Bagi mereka yang tertarik, saya akan menunjuk ke https://docs.flutter.io/flutter/dart-ui/dart-ui-library.html yang merupakan perpustakaan tingkat rendah untuk menggambar.

Dari tim: Perpustakaan Dart bukan solusi yang cukup baik. Hanya meneruskannya.

Dapatkah Anda menguraikan itu? Seluruh framework Flutter adalah library Dart; apa pun yang kami terapkan di sini kemungkinan akan menjadi perpustakaan Dart. Apa persyaratan untuk "cukup baik"?

Contoh kasus, saya menerapkan parser SVG (sederhana, tidak lengkap) di pure-Dart beberapa waktu lalu:

https://github.com/matanlurey/svg

Kemungkinan akan agak sepele untuk:

sebuah. Buat SVG runtime -> SvgRenderElement , yang menggunakan dart:ui di bawah tenda.
B. Buat langkah kompilasi build-time yang mengubah SVG menjadi sesuatu seperti:

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

@deborah-ufw jika Anda tertarik, kami ingin mengobrol untuk mempelajari lebih lanjut. Bisakah Anda mengirimi saya email?

Hai Seth, matanlurey dan Hixie - terima kasih banyak atas tanggapannya. Saya mungkin bukan orang yang tepat untuk diajak bicara secara mendalam, karena teknisi utama kami yang menolak solusi plugin Dart (sehingga mengarah pada pembuatan perpustakaan besar png untuk aplikasi kami, yang membuat sebagian besar dari kami juga merasa ngeri).

Saya ingin memberikan tautan untuk masalah Github ini kepada mereka dan meminta mereka untuk memberikan kontribusi alasan teknis untuk komentar mereka (yang dibuat lebih berwarna daripada yang saya sampaikan) - saya akan melakukannya segera setelah saya selesai mengetik.

Mereka juga dapat mengobrol dengan teknisi kami secara langsung melalui http://gitter.im/flutter/flutter serta metode kontak lain yang tercantum https://flutter.io/support/ jika diperlukan. :)

Saya akan menambahkannya. Terima kasih! :D

Pendekatan lain adalah mengintegrasikan sesuatu seperti http://svgpp.org/ di tingkat asli dan menggunakan sistem plugin Flutter untuk berkomunikasi dengannya. Ini mungkin akan memberi Anda karakteristik ukuran/kinerja terbaik untuk dukungan SVG penuh, tetapi dengan mengorbankan mempertahankan ketergantungan.

Bagaimana dengan mencari dukungan SVG di tingkat mesin? Saya tidak berpikir masuk akal atau diinginkan untuk mengharapkan dukungan penuh dari standar, tetapi bagian dari daya tarik adalah dukungan untuk tim lintas fungsi dan alat yang ada.

Saya mendapat kesan Skia menyediakan beberapa dukungan SVG dasar. Apakah tidak ada cara untuk membuat ini tersedia untuk Flutter?

Dari apa yang saya tahu, itu hanya eksperimental dan parsial. Ada masalah yang terbuka di sini https://bugs.chromium.org/p/skia/issues/detail?id=5596 bit sudah lebih dari satu tahun. Mereka juga mencantumkannya di peta jalan mereka tetapi sekali lagi tidak jelas prioritas apa.

Tidak masuk akal untuk mendukung SVG di tingkat mesin karena itu tidak akan mengekspos model dokumen SVG, yang merupakan bagian inti dari dukungan SVG.

Jika Flutter mendukung SVG, itu akan menjadi tujuan akhirnya untuk benar-benar mendukung SVG yang sebenarnya. Ini bertentangan dengan filosofi Flutter untuk memiliki implementasi fitur yang setengah hati.

Saya tidak melihat mengekspos model dokumen SVG sebagai bagian inti dari dukungan SVG. Itu akan menyenangkan untuk dimiliki tetapi tidak harus dimiliki untuk kasus penggunaan yang ada dalam pikiran saya.

Ya, dukungan tingkat perpustakaan akan mengaktifkan lebih banyak fitur - tetapi jika mesin itu sendiri mampu merender (subset signifikan dari) data SVG, itu mungkin cukup untuk memungkinkan rendering aset gambar vektor yang ditentukan oleh subset SVG tersebut.

Masalah ini jelas lebih besar dari itu, tetapi saya akan dengan senang hati mengambil aset SVG yang ada dan merendernya dengan benar pada resolusi yang berbeda tanpa mengubah semuanya menjadi gambar raster yang besar.

Ya, impor file aset SVG akan sangat bagus tetapi spesifikasi untuk SVG lebih dari 800 halaman. Karena itu, hanya mengimpor file statis untuk dirender di Skia (yang merupakan perpustakaan grafik vektor) seharusnya tidak menjadi masalah. Jadi saya menerimanya; seperti biasa saya hanya bisa melakukan pekerjaan paruh waktu di akhir pekan sehingga Anda tidak akan segera melihat barang-barang. Saya juga memiliki banyak file SVG tetapi semuanya menggunakan hal yang sama (koleksi ikon dari flaticon) jadi saya akan menghargai contoh file SVG dari orang-orang yang menginginkan fitur ini.

Carlos.

Saya telah memimpikan ini sedikit dari waktu ke waktu juga. Inilah yang saya dapatkan:

Implementasi Tingkat Mesin

Ini tampaknya menarik karena alasan berikut:

1. Secara teori mendukung sesuatu seperti image: new AssetImage('graphics/background.svg') untuk memiliki beberapa penguraian kode C/C++ dan menerjemahkan data SVG ke perintah rendering Skia
2. Setidaknya satu kandidat bagus di luar sana yang harus dapat terhubung ke Skia dengan cukup mudah (https://github.com/svgpp/svgpp) di tingkat mesin
3. Logika SVG WebKit akan luar biasa tetapi tampaknya memiliki terlalu banyak ketergantungan
4. Saya tidak berpikir librsvg akan porting terlalu baik (terpasang erat ke Kairo, transisi ke Rust sebagai bahasa utama - perlu mencari cara untuk sampai ke Skia sebagai backend setidaknya)

Tetapi setidaknya memiliki beberapa kesulitan:

• Menangani teks dengan benar
• Menangani CSS dengan benar (jika ada? tetapi menambahkannya bukanlah tugas yang mudah)
• Memperluas dukungan untuk fitur tambahan (atau memungkinkan pengguna menambahkan dukungan untuk fitur dengan lebih anggun) merupakan tantangan.
• Sepertinya sangat sulit untuk menangani animasi

Implementasi tingkat dart

1. dart:ui Flutter menawarkan banyak primitif dari Skia yang sudah dibutuhkan SVG
2. Saya menduga rendering teks akan jauh lebih mudah ditangani pada level ini daripada di level mesin
3. Seharusnya lebih mudah bagi lebih banyak komunitas untuk mempertahankan/memperluas
4. Harus dapat menangani interaksi langsung dengan logika parsing dengan lebih murah (mungkin untuk menangani pengecualian dan/atau animasi?)

Tetapi memiliki beberapa kesulitan:

• Mungkin tidak mendukung CSS dengan lebih baik
• Mungkin tidak melakukan animasi pendukung yang jauh lebih baik
• Kemungkinan akan lebih lambat (tetapi mungkin tidak cukup penting, dan berpotensi diimbangi oleh AOT yang dikompilasi SVG ke kode Dart)

data uji

Sejauh sampel SVG pergi, mungkin akan sangat berguna untuk mengidentifikasi SVG apa yang didukung dari test suite 1.1 (atau, jika didukung sebagian, bagaimana dengan mereka yang didukung sebagian). Itu dapat ditemukan di sini:
https://github.com/w3c/web-platform-tests/tree/master/svg/import

Atau di sini dengan beberapa perbandingan PNG: https://www.w3.org/Graphics/SVG/Test/20110816/

@cbazza , cara mana yang Anda pikirkan untuk menerapkan ini? Pada titik ini, saya lebih condong ke implementasi tingkat paket Dart.

Juga, saya pikir dukungan jenis ikon mungkin mudah ditangani dengan sesuatu seperti IconData. Mungkin lebih baik untuk memperlakukannya secara terpisah, karena kemungkinan hanya perlu mendukung satu jalur per codepoint

Saya sedang memikirkan 'Implementasi level Dart' di atas dart:ui.

2 kasus penggunaan dasar:

(1) memuat file svg ikon statis dengan sesuatu seperti . Anda
"image: new AssetImage('graphics/background.svg')", di mana
file bisa berasal dari sistem file atau melalui jaringan
secara dinamis.

(2) Dukungan svg berbasis widget dengan DSX (konstruksi seperti JSX)
yang akan terlihat sangat mirip dengan:
https://github.com/react-native-community/react-native-svg

Mengenai 'Data uji' saya membutuhkan file asli dari orang yang membutuhkan
ini dan bukan suite uji w3. Dukungan SVG akan tergantung
atas apa yang dart:ui dukung jadi jika file svg yang diubah berisi
hal-hal yang tidak dapat dilakukan dengan dart:ui , saya akan dapat
cari tahu dengan cepat.

Carlos.

Saya tidak berpikir kita harus menggunakan model SVG asli yang bereaksi. Saya ingin mendukung kasus kehidupan nyata, sedikit saya pikir mencakup w3 suite akan memberi kita dasar yang lebih baik tentang apa yang berhasil dan apa yang tidak dan betapa sulitnya menerapkannya)

Oke, sepertinya ada beberapa kesalahpahaman ...
Ketika saya melakukannya (1) itu akan membutuhkan file SVG standar dan saya akan mencoba untuk mendukung sebanyak yang dapat diberikan dart:ui (Skia).
Ketika saya melakukannya (2), yaitu membuat widget untuk menangani konstruksi seperti SVG, itu akan terlihat sangat mirip dengan perpustakaan react-native-svg itu. Ini adalah 2 hal yang sangat berbeda.

@cbazza kasus penggunaan untuk svgs di aplikasi kami terutama untuk svgs satu warna yang kami gunakan sebagai ikon. Berikut ini tautan ke file zip di Dropbox dengan pilihan svg terbaru yang representatif. https://www.dropbox.com/s/dp38wxc22625cvc/icons.zip?dl=0

Terima kasih atas minat membantu di sini, saya akan senang melihat plugin SVG Flutter menjadi hidup!

Saya menulis alat yang melakukan penguraian minimal dari urutan file agak-SVG dan membuang file Dart yang nanti kita gunakan untuk menampilkan animasi ikon: vitool .

Saya menggunakan alat ini untuk membuat data AnimatedIcons , Anda dapat memeriksa hasilnya dengan menjalankan aplikasi uji manual ( cd dev/manual_tests; flutter run -t lib/animated_icons.dart ).

Ini jauh dari optimal atau lengkap, tetapi berfungsi untuk kumpulan ikon animasi yang kami miliki saat ini, dan seseorang harus merasa diberdayakan untuk melakukan fork/memperluasnya.

@deborah-ufw untuk ikon satu warna ini, sesuatu yang dapat Anda lakukan adalah membuat font ikon, dan menampilkan ikon menggunakan widget Ikon .

@amirh sepertinya tidak mudah untuk membuat font vektor warna

@amirh jika Anda membaca seluruh utas di atas, membuat dan mendefinisikan font dengan mesin terbang sebagai ikon adalah serangkaian langkah tambahan yang harus diambil karena SVG tidak didukung. Dukungan SVG jauh lebih efisien daripada font. Juga, zoechi benar - seni vektor apa pun yang memiliki beberapa warna hampir tidak mungkin dibuat menjadi font.

Maaf - Saya melihat ikon sampel dan berpikir bahwa Anda hanya membutuhkan ikon satu warna.

@deborah-ufw, terima kasih atas file-filenya, persis seperti yang saya cari dan sudah menemukan hal-hal yang tidak dimiliki file saya.

@amirh , ya saya sudah melihat karya hebat Anda ;)

Apakah kita akhirnya memiliki cara langsung untuk mendapatkan svg atau aset vektor xml ke dalam gambar untuk flutter

@Hixie : tolong (kembali) pertimbangkan bahwa untuk tim seluler asli multi-platform ini adalah titik sakit yang nyata, tetapi hanya sebagian, dukungan SVG yang relatif sederhana diperlukan untuk menyelesaikan ini. Terhadap pengelola standar SVG, ini bisa dianggap setengah hati, tetapi Flutter adalah untuk pengembang seluler, bukan untuk pembuat standar umum. Flutter akan memenangkan hati para pengembang seluler jika itu mengurangi rasa sakit mereka yang sebenarnya, meskipun hanya dengan cara yang pragmatis.

Harap pertimbangkan juga bahwa terlepas dari kebutuhan yang sudah lama ada ini, pendekatan dukungan komunitas telah gagal menghasilkan solusi yang dapat diterapkan di pesaing Flutter Xamarin (dalam pengalaman Xamarin saya selama 5 tahun - lib tidak dapat menangani ekspor alat desain, terlalu terbatas, tidak stabil, berbayar dan/atau sumber tertutup).

Karena itu saya tidak optimis bahwa komunitas Flutter akan berhasil di mana komunitas Xamarin gagal. Saya memperkirakan bahwa praktis. dukungan parsial untuk ikon SVG adalah sesuatu yang dapat diberikan oleh tim Flutter, menggunakan primitif Skia yang ada.

Ini akan sesuai dengan tujuan Flutter : memungkinkan developer seluler menghadirkan UX yang indah dan berkinerja tinggi dalam waktu singkat . Ini akan meningkatkan produktivitas, kesetiaan, dan kinerja (SVG memuat jauh lebih cepat daripada semua PNG itu; ikon SVG biasanya memiliki biaya komputasi yang sederhana karena persyaratan untuk kejelasan visual cukup sering mengarah ke bentuk kompleksitas sederhana).

Kebutuhan inti adalah alur kerja yang produktif dari alat desainer kreatif yang umum digunakan (seperti Adobe) hingga ikon aplikasi asli yang dapat diskalakan.

Pendekatan PNG saat ini sangat boros dalam hal produktivitas dan ukuran aplikasi; sangat primitif untuk menghasilkan dan mengirimkan setiap ikon dalam hingga 9 bitmap tetap (6 Android, 3 iOS) yang kemudian diproses setelah waktu proses. Masalahnya meningkat terus sebagai resolusi meningkat dalam ukuran dan variasi.
Itu menonjol sebagai jempol yang sakit dalam pengalaman pengembang Flutter yang inovatif dan produktif yang menyenangkan. Saya pikir Flutter memiliki peluang nyata untuk memenangkan hati & pikiran para pengembang di sini,

Juga @dnfield , fitur SVG yang disebutkan di atas yang disebutkan sebagai hambatan untuk penerapan di Flutter menurut pengalaman saya tidak relevan atau cukup langka sehingga kembali ke PNG untuk aset desain tersebut merupakan ketidaknyamanan kecil.
Tidak peduli: CSS, HTML, SMIL, Model Dokumen, skrip
Animasi, Teks: cukup langka untuk kembali ke teknologi lain untuk itu

Saya harap panjangnya komentar ini menyampaikan berapa banyak nilai yang akan dimiliki sebuah solusi. Ht!

@VincentH-Net Saya 100% dengan Anda karena saya merasakan sakit juga !!! Kirimkan saya beberapa file SVG Anda. Mungkin Xamarin kesulitan untuk memberikan dukungan SVG karena kurangnya mesin grafis vektor yang dapat menanganinya; ini tidak berlaku untuk Flutter dengan Skia jadi saya sangat optimis bahwa solusi komunitas akan terjadi.

FWIW, Xamarin juga memiliki Skia yang tersedia di SkiaSharp. SVG bisa rumit bahkan untuk implementasi minimal.

Tapi @cbazza saya akan sangat tertarik untuk berkolaborasi dengan Anda dalam hal ini

Dan di bagian animasi, saya pikir mengaktifkan Lottie akan memuaskan banyak kasus penggunaan (dan mungkin melakukannya dengan perkakas yang lebih baik untuk desainer).

@dnfield Saya pikir animasi Lottie ini dapat dengan mudah dibangun kembali sebagai widget Flutter

@dnfield , luar biasa Anda bisa menjadi orang tingkat rendah yang menangani perubahan di tingkat mesin sementara saya melakukan pekerjaan tingkat atas pada widget (penguraian async svg, konstruksi 'gambar' yang dapat di-cache dan dikirim ke kanvas pada pembaruan rendering, dll).
ya, Lottie bekerja akan sangat bagus untuk alur kerja desainer/pengembang.
@zoechi mengapa membangun kembali sesuatu dengan tangan dengan widget ketika Anda cukup mengimpor widget Lottie yang berfungsi yang menangani semuanya untuk Anda? Setelah mengatakan bahwa tujuan saya sebelumnya (2) di atas akan bekerja dengan baik dengan animasi widget (karenanya saya ingin melakukannya juga).

@zoechi - tujuannya adalah untuk memungkinkan desainer membuat hal-hal seperti itu dan merendernya dengan sedikit usaha dari pihak pengembang. Tujuan sekundernya adalah mengaktifkan pemuatannya sebagai sumber daya saat runtime, daripada mengharuskan prakompilasi.

Hal yang sama berlaku untuk SVG - ya, pengembang tentu saja dapat mengonversi data vektor SVG ke Dart, tetapi idealnya Anda dapat menyertakan sumber daya gambar vektor (SVG atau tidak) dan merendernya saat runtime.

Dengan kata lain, saya ingin dapat memberi tahu desainer saya untuk membuat aset vektor satu kali dan dapat menggunakannya di aplikasi Flutter saya dengan modifikasi minimal (dan tanpa meminta desainer mengekspornya 5 kali dalam berbagai format raster yang akan berakhir menjadi tidak valid segera setelah Apple atau Samsung merilis ponsel mereka berikutnya).

berbagai format raster

ya, itu terasa seperti dekade sebelumnya

https://github.com/luberda-molinet/FFImageLoading Mungkin layak untuk dilihat, menggunakan Skia untuk merender SVG untuk Xamarin

@escamoteur

Terima kasih, itu terlihat sangat bagus, satu-satunya hal yang hilang adalah tidak asinkron;)

Saya hanya menggunakan drawable vektor di aplikasi Android baru-baru ini, dan saya tidak melihat penalti kinerja yang nyata. Ikon tajam dan ukuran aplikasi jauh lebih kecil. Ini juga jauh lebih mudah dan lebih cepat untuk menguji gambar yang berbeda. Solusi @2 , @3 , @4 , @5 ,.... ini terlihat seperti langkah mundur yang besar dalam kerangka kerja modern seperti Flutter.
Saya tidak mengerti mengapa Anda tidak bisa pergi ke tim yang bertanggung jawab atas drawable vektor Android, dan menggunakan ide atau implementasi mereka (jika mungkin) untuk memecahkan masalah itu.

Saya telah bermain-main dengan beberapa SVG yang digambar di atas kanvas di sini. Elemen path mungkin yang paling sulit untuk diterapkan, tetapi ada API Skia yang akan sangat membantu jika diekspos. Saya telah bereksperimen dengan mengeksposnya di mesin dan akan membuka PR setelah saya memiliki sedikit lebih banyak waktu untuk memperbaikinya.

Ide kasarnya adalah sesuatu yang memungkinkan kita untuk membuat dart:ui Path dari string data SVG, menggunakan API Skia yang sudah ada untuk melakukannya. Metode yang diusulkan adalah static Path Path.parseFromSvgData(String svgData) -> Path

Itu masih menyisakan beberapa pekerjaan untuk menguraikan berbagai transformasi/goresan/pengisian yang dapat diterapkan. Saya pikir kita dapat meminjam cukup banyak dari pekerjaan yang dilakukan @amirh (saya tidak meminjam semua logika penguraian jalurnya karena sepertinya itu mungkin memiliki kendala yang tidak dimiliki SkParsePath dan seperti SkParsePath harus lebih efisien karena hanya membutuhkan satu perjalanan pulang pergi ke sisi asli untuk menggambar jalan daripada perjalanan pulang pergi untuk setiap perintah menggambar). Saya juga akhirnya tidak menggunakan @matanlurey karena alasan yang sama.

Lihat https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart , https://github.com/dnfield/flutter_svg (yang saat ini mampu merender dua SVG disertakan dalam proyek itu ke kanvas), dan https://github.com/dnfield/engine/tree/path_svg (yang saat ini juga termasuk pekerjaan terkait PathMeasure/PathMetrics saya untuk Lottie).

Hai @dnfield ,

Inilah pendapat saya tentang implementasi awal Anda. Izinkan saya mengatakan bahwa apa pun yang akan saya katakan seharusnya tidak membuat perbedaan pada antusiasme dan kemajuan pengkodean Anda. Semakin banyak Anda melakukan semakin baik karena kami selalu dapat menggunakannya nanti.

Masalah yang saya miliki adalah arsitektur dan inilah alasannya. Agar UI responsif pada 60 frame/dtk, setiap frame hanya memiliki ~16 md untuk dijalankan sebelum memblokir UI. Jadi mari kita asumsikan setengah digunakan oleh Flutter untuk melakukan hal itu, yang menyisakan 8 ms untuk parser SVG kami dan tidak ada cara untuk mengurai file SVG dan menghasilkan gambar dalam periode itu tidak peduli seberapa kuat ponsel/tablet yang Anda miliki. Jadi, hal terbaik yang harus dilakukan adalah menargetkan perangkat yang lambat dan memiliki kode async yang dapat melakukan ini menggunakan banyak bingkai tetapi kuncinya adalah setiap bingkai hanya dapat berjalan hingga 8 ms dan kemudian harus kembali dan mengambil bingkai berikutnya.

Jadi Anda tidak dapat mengurai XML menggunakan dart:xml karena tidak asinkron, itu akan memblokir hingga seluruh file diuraikan. Juga menghasilkan gambar harus asinkron karena Anda tidak dapat melakukan semuanya dalam 8 ms. Tidak ada gunanya mengoptimalkan kode sebelum waktunya, jadi tulislah kode terbaik yang dapat dibaca. Saya punya rencana yang akan berhasil tetapi itu akan memakan waktu, jadi saya ingin Anda terus seperti apa adanya karena saya selalu dapat mengambil pekerjaan Anda dan menggunakannya nanti. Desain saya dihubungkan ke fungsi pemuatan gambar saat ini (AssetImage & NetworkImage) dan pengguna hanya perlu menentukan '.svg' alih-alih '.png'.

Carlos.

@cbazza hanya sebuah ide: Parsing dapat dilakukan secara terpisah. Saya pikir ada beberapa pekerjaan yang dilakukan untuk dapat berkomunikasi dengan saluran pesan dari isolat selain isolat UI dan untuk meneruskan data antar isolat dengan referensi alih-alih menyalin (meskipun tidak yakin tentang status atau kemajuan)

@cbazza - terima kasih. Saya tidak berpikir bahwa dart_xml adalah solusi terbaik untuk ini, tetapi ini berfungsi dan memungkinkan beberapa kemajuan di sekitar logika menggambar (dan saya tidak ingin memblokir ini sepenuhnya saat bekerja untuk mengimplementasikan parser XML async). Saya juga mulai melihat implementasi ImageProvider , tetapi saya pikir itu bisa menjadi detail implementasi yang dapat kami samarkan dari pengguna.

Saya sama sekali tidak mengatur API ini. Tapi setidaknya kita bisa mulai menggambar SVG, dan mungkin mendukung yang sederhana di ponsel yang layak.

Apakah Anda berniat untuk bekerja pada XML/SVG membaca/parsing API?

@zoechi - kami masih dapat mencapai penggunaan memori yang jauh lebih baik dan mungkin waktu penguraian yang lebih baik dengan model pembaca streaming.

@zoechi ya saya melihat isolat tetapi Anda hanya dapat melewati nilai primitif (null, num, bool, double, String) dan daftar dan peta, dan bukan objek dan/atau pohon objek, jadi rute async tampak lebih baik. Hal menarik lainnya tentang mencari tahu penguraian xml async adalah bahwa konsep tersebut akan berlaku untuk pemrosesan pohon async apa pun, seperti misalnya widget atau pohon elemen. Ini akan memungkinkan rekonsiliasi async misalnya seperti di React's Fiber :)

@dnfield ya saya sedang mengerjakan async xml/svg parser/prosesor.

hanya ingin tahu, merender SVG menggunakan tampilan web bisa menjadi pilihan?

Terlalu berat untuk tombol sederhana dan saya tidak yakin tampilan web akan mampu menangani perubahan 60 frame/detik. Maksud saya, katakanlah kita memindahkan ikon atau menskalakannya misalnya.

Saya bukan pengembang iOS, jadi saya melihat sekarang bahwa iOS 11 juga memiliki dukungan untuk aset vektor . Ini bukan SVG, tapi PDF. Apakah lebih mudah untuk mendukung aset vektor PDF?

Tidak. Quartz memiliki banyak ikatan historis dengan PDF untuk sistem rendering internalnya, yang membuatnya lebih mudah untuk melakukannya di perangkat iOS. Skia bukan perender PDF, dan format file akan (IMO) memperkenalkan banyak ambiguitas tentang apa yang didukung dan apa yang tidak (dengan alat yang tidak sebagus untuk memperbaikinya tersedia).

PDF lebih rumit daripada SVG dan subset PDF/X (yang digunakan untuk aset vektor) dirancang untuk dicetak. Saya ingin melihat dukungan rendering PDF di Flutter, tetapi bagi kami, mari tetap berpegang pada SVG.

Saya akan senang dengan subset VectorDrawable belaka dari svg (titik, garis, kurva, isi, pindahkan). Flutter memungkinkan untuk RAD dan bertujuan untuk benar-benar multiplatform (dengan desktop datang) tetapi sekarang tidak bisa. Baik platform Android dan Apple hadir di layar 60"+ 4HD. Grafik vektor adalah suatu keharusan.

PS Maaf, tetapi tanpa VG pekerjaan Anda (tim yang berdebar-debar) akan hilang setelah Kotlin bekerja secara native di banyak platform termasuk iOS. Tentu Kotlin asli masih dalam versi beta tetapi begitu juga Flutter. :(

@ohir Tolong jelaskan bagaimana Anda akan menulis tampilan lintas platform (kode tunggal) yang berfungsi baik di iOS dan Android dengan asli Kotlin. Kecuali jika Anda bermaksud membuat versi kotlin dari abstraksi widget asli reaksi?

Jangan meremehkan apa yang akan dilakukan penduduk asli Kotlin karena kemungkinannya tidak terbatas. Saya mendapatkan Flutter dari eksperimen saya membuat sesuatu seperti Flutter menggunakan Cocos2d-x. Mereka dapat menggunakannya juga dan/atau React Native dan/atau Flutter karena semuanya bersumber terbuka dan tersedia untuk penyerbukan silang :)

Ya sangat setuju, cinta dan adopsi kotlin dari pengembang sangat besar dan kompilasi lintas platform membuat kemungkinan tidak terbatas. Tetapi perbandingan antara Flutter beta dan beta asli Kotlin untuk lintas platform seluler saat ini tidak ada gunanya.
Pokoknya melenceng dari topik.

@lukaspili Sejauh ini ada anko untuk Android. Tata letaknya DSL dapat bekerja secara utuh juga dengan apko , linko dan winko* yang disertakan dalam subpohon platform masing-masing. Tapi ini OT untuk masalah Flutter VG. [* belum ada].

Terima kasih untuk semua percakapan yang penuh gairah! Kami ingin agar masalah ini tetap terfokus pada kasus penggunaan dan persyaratan untuk format vektor dan API. Terima kasih sebelumnya untuk tetap pada topik! :)

Apa pendapat orang tentang membagi ini menjadi masalah untuk mendukung SVG dan menyimpan yang ini untuk beberapa format vektor flutter TBD?

Itu masuk akal bagi saya; masalah aslinya diutarakan sebagai format vektor khusus Flutter.

@cbazza Hore untuk dukungan seperti svg. Saya memiliki banyak svg non-ikon yang pada dasarnya saya gunakan untuk menggambar seluruh UI aplikasi. Bagaimana saya harus mengirimkannya kepada Anda?

Ingin mencoba pindah ke flutter tetapi menghasilkan satu miliar png akan sangat mengasapi ukuran aplikasi dan terlihat jelek.

ya, tolong kirimkan saya URL untuk melihat file.

Jadi pada titik ini, di bagian depan ini, saya mengejar pendekatan berbasis Flatbuffer. Saya sedang bekerja untuk mendefinisikan skema Flatbuffer yang dapat menangkap perintah menggambar vektor - kurang lebih cara Skia menangkap jalur.

Saya bisa melihat ini semi-interoperable dengan SVG (misalnya memiliki SVG -> alat konversi Flatbuffer, atau Android Vector Drawable XML -> Flatbuffer, yang dapat mencakup banyak kasus penggunaan SVG), dan menghindari banyak hit kinerja yang kami akan menghadapi SVG (kurangnya parsing XML streaming, perlu mengurai data jalur SVG dan kemudian mengirimkannya ke asli sedikit demi sedikit). Saya juga dapat menghasilkan file biner yang lebih kecil daripada format SVG (walaupun masih harus dilihat seberapa baik skalanya).

Mungkin juga untuk memberikan kejelasan lebih lanjut di perangkat konversi tentang fitur apa yang tidak didukung dalam SVG tertentu (misalnya "Elemen Asing tidak didukung oleh format ini").

Bit parsing Flatbuffer dapat dilakukan di Dart atau C++ - satu hal di dart adalah masih bagus untuk memiliki beberapa cara untuk mengelompokkan perintah ke Skia untuk membangun jalur dan menggambar di atas Kanvas.

ada solusi yang berpotensi jauh lebih sederhana yaitu melakukan penguraian waktu kompilasi dan intisari operasi simpul SVG ke Skia ... ini akan menghilangkan penguraian runtime SVG sama sekali dan memungkinkan penyimpanan mode caching dari buffer perantara

@sandrobilbeisi maksud Anda seperti https://github.com/amirh/flutter/commit/69de4bbf3177d9766a386c55b27a12619da43a05 ?

itu penting ... dan ada juga vitool https://github.com/flutter/flutter/blob/master/dev/tools/vitool/lib/vitool.dart

tapi saya lebih berpikir sebagai langkah pembuatan seperti yang digunakan Xcode dengan aset SVG untuk kiriman iOS

@sandrobilbeisi maksud Anda membuat bitmap dari svgs selama waktu kompilasi?

BTW paket Xamarin ffimageloading menyimpan bitmap yang dirender sehingga hanya satu kali rendering. Itu juga menyimpan gambar jaringan dan mengubah ukuran gambar yang membuatnya sangat cepat

bukan bitmap , tetapi Skia yang awalnya merupakan mesin grafis vektor untuk < canvas >
https://skia.org/ ( id diakuisisi oleh Google belasan tahun yang lalu : http://www.satine.org/archives/2007/03/05/the-skia-source-code-dilemma/ )

Maksud Anda mengubah svg menjadi format gambar skia?

Ya

@cbazza tautan ke file uji SVG: https://github.com/slingshotapp/artwork

Apakah ada cara untuk menjalankan vitool di tingkat proyek? Saya dapat membuat file yang dihasilkan tetapi memerlukan akses ke banyak kelas privat yang mencegah saya menambahkan .g.dart ke proyek saya.

Mengacu pada alat di <flutter>/dev/tools/vitool : #dart bin/main.dart --asset-name=_$hello --output=here.g.dart ./test_assets/horizontal_bar_relative.svg

@emilieroberts Terima kasih tetapi file-file itu tidak dalam format SVG melainkan pada format vektor Android khusus yang sangat mirip dengan SVG.

@cbazza oops, memang - sebagian besar svg ada di sana sekarang :)

@cbazza dapatkah Anda menjelaskan apa yang Anda maksud dengan vektor Android khusus? Mereka memiliki tag <svg , tidak seperti drawable vektor Android.

Apa pun yang dilakukan dengan vitool saat ini luar biasa, tetapi saya tidak dapat menemukan jejak dokumentasi di mana pun. Saya dapat menulis contoh dengan AnimatedIcons.arrow_menu , tetapi saya juga ingin tahu apa yang diperlukan untuk melakukannya dari aset dari luar flutter SDK.

@fmatosqg Anda benar, kode yang digunakan untuk menjalankan animasi yang dihasilkan oleh vitool bersifat pribadi untuk kerangka kerja. Alasannya adalah masih ada pertanyaan terbuka seputar format vektor yang baik untuk Flutter (seperti yang dilacak dalam masalah ini), dan saya ingin menghindari API publik yang mendukung format tertentu (karena itu akan dikomit ke format itu jika kami tidak ingin merusak perubahan di masa depan).
Permukaan API saat ini untuk AnimatedIcon memungkinkan kita untuk menggunakan file yang dihasilkan oleh vitool secara internal dalam kerangka kerja, dan masih dapat menggantikan implementasi yang mendasari dan format vektor tanpa merusak klien apa pun.

Jika Anda ingin membuat file dengan vitool dan menggunakannya dalam proyek Anda, Anda dapat melakukannya dengan menyalin kode dari packages/flutter/lib/src/material/animated_icons dan memasukkannya sebagai bagian dari proyek Anda (ini juga menjamin bahwa proyek Anda tidak akan rusak jika kami mengubah mesin yang digunakan oleh AnimatedIcon).

Mohon maaf atas ketidaknyamanannya dan semoga kami segera mendapatkan solusi yang lebih baik.

Saya suka ide ini, khususnya jika https://github.com/flutter/flutter/issues/13834 maju. Saya percaya hal seperti itu seharusnya tidak menjadi bagian dari SDK monolitik, tetapi tidak terlalu peduli apakah itu paket resmi atau komunitas.

Ada format ringkas untuk subset svg yang diciptakan untuk Shiny (Go desktop framework) oleh seseorang di G besar. Representasi binernya dan dapat membawa ukuran ikon peluncur Android default di bawah 100 byte. Seperti yang dinyatakan di atas dalam utas - dan IMSO - menggambar vektor harus menjadi tugas Skia, dengan Flutter melewati representasi paling ringkas yang tersedia. Ini adalah tugas perkakas untuk mengkompilasi file res/ svg ke format internal.
[ @amirh Re: buka pertanyaan seputar apa yang akan menjadi format vektor yang baik ]

Jadi FWIW, di flutter_svg saya telah merumuskan kode sedemikian rupa sehingga semua gambar benar-benar dilakukan oleh objek perantara. Pekerjaan terkait SVG pada dasarnya memetakan SVG ke objek tersebut. Masih ada pekerjaan yang harus dilakukan untuk mendapatkan format perantara yang sepenuhnya stabil (misalnya, saya sudah mulai dengan dukungan teks tetapi sangat buruk sekarang).

Saya telah mulai mem-porting dukungan untuk Android Vector Drawables ke dalam kerangka kerja (dikurangi dukungan untuk referensi warna dan gaya eksternal, dll., dan belum mendukung jalur klip atau mungkin beberapa fitur lainnya). Seharusnya sangat mungkin untuk mendukung Shiny dengan cara ini juga, atau format lainnya. Saya suka bekerja melalui SVG untuk itu pada saat ini karena membantu mencakup banyak kasus menarik untuk didukung, jadi itulah fokus utama saya untuk saat ini.

Setelah membaca utas ini -- dan yang panjang tentang dukungan JSX -- saya tidak dapat menahan diri untuk berpikir bahwa ada masalah tata kelola. Tim Flutter berisiko ditarik ke ribuan arah yang berbeda karena tuntutan pengembang untuk apa yang _mereka_ rasakan penting. Mungkin Flutter harus melembagakan proyek "inkubator", seperti Apache. Fitur yang diminta diimplementasikan oleh plugin, dengan cara sumber terbuka, mungkin dengan kontribusi dari tim Flutter itu sendiri. Jika plugin mencapai dukungan, kemanjuran, dan popularitas yang memadai, mereka menjadi kandidat untuk dimasukkan dalam kerangka kerja inti Flutter.

Saya merasa ini akan membuat pengembang yang paling vokal menempatkan "kode di mana ada mulut" daripada menggunakan pukulan dada dan alis yang ditampilkan di sini, dan akan membuat tim Flutter lebih bebas untuk berkonsentrasi pada teknik inti.

Saya dengan hormat tidak setuju. Jika Anda melihat pencapaian seperti bucket5, Anda akan tahu apa yang sedang dikerjakan tim dan jika Anda pergi ke bucket6, Anda tahu apa yang mereka anggap sebagai prioritas. Anda juga dapat mengetahui apa yang menurut mereka tidak mendesak jika Anda melihat tonggak sejarah lainnya di kemudian hari.

Juga alasan untuk menambahkan sesuatu ke inti flutter harus lebih dari "Saya dapat melakukan plugin dan berfungsi untuk semua orang dan semua orang menginginkannya". Itulah alasan untuk membuat plugin, tetapi tidak cukup untuk ditambahkan ke repo ini atau repo flutter lainnya.

Contoh hal-hal yang tidak boleh menjadi plugin: hal-hal yang ditambahkan @dnfield ke mesin agar dia dapat mengambil manfaat dan menggunakan plugin yang dia miliki. Plugin semacam itu tidak akan memiliki kesempatan untuk melakukan semua fitur yang dilakukannya jika tidak ditambahkan ke mesin.

Menjadi vokal itu penting, tetapi tidak akan pernah menjamin bahwa itu akan berhasil. Menempatkan kode di mana mulut juga penting tetapi masih belum cukup. Proyek ini memiliki banyak transparansi dan mereka dengan jelas mendengarkan apa yang dikatakan pengembang, tetapi ini bukan demokrasi dan tidak berarti suara rakyat akan menang tanpa alasan tentang konsekuensinya.

Ya, jangan khawatir bahwa pengembang yang mengerjakan kerangka kerja Flutter akan terganggu oleh diskusi tentang bug. :-) Kami membaca diskusi, dan kami sangat peduli dengan pendapat semua orang, tetapi pada akhirnya kami memiliki prinsip panduan yang jelas dan kami tidak akan hanya bereaksi terhadap suara yang paling keras. Kami melakukan analisis pasar yang cermat untuk menentukan apa yang menjadi perhatian masyarakat secara keseluruhan.

Percakapan menarik yang meninggalkan saya dengan pertanyaan sederhana. Bagaimana tim Flutter menyarankan agar kami beralih dari fase desain (SVG) ke grafik vektor di Flutter?

@lukepighetti Anda dapat mencoba https://github.com/dnfield/flutter_svg dan periksa seberapa jauh perjalanan Anda.

Secara pribadi saya tidak senang dengan solusi yang ditawarkan untuk file SVG di Flutter. Saya menggunakan paket flutter_svg dan saya tidak menyukainya.

Dukungan SVG perlu didukung secara asli menurut saya di perpustakaan standar. Jika kita akan mulai menggunakan Flutter di layar yang lebih besar seperti aplikasi desktop dan situs web, ini adalah suatu keharusan.

@socialmammoth dapatkah Anda menjelaskan kekurangan apa yang Anda lihat?

Satu hal yang telah saya pertimbangkan untuk sementara waktu adalah apakah mendukung format .skp (SKIAPICT) akan bermanfaat. Saya pikir ada alasan bagus untuk tidak melakukan ini secara langsung - formatnya tidak dijamin stabil dari versi ke versi Skia yang besar.

Namun, ia memang memiliki beberapa properti yang menarik - khususnya, Chrome/Chromium memungkinkan untuk menghasilkan SKP (mungkin SVG yang dirender), dan kemungkinan besar kami telah mendukung sebagian besar atau semua perintah menggambar Skia yang diperlukan untuk benar-benar membuat sebagian besar SKP.

Saya telah merencanakan untuk membuat solusi tipe kode-gen untuk plugin SVG, sehingga Anda dapat menghasilkan kode Dart/Flutter dari SVG. Saya pikir pada titik ini mungkin akan lebih menarik untuk menyelidiki proses pembuatan SKP ke Dart - beberapa kode yang ditulis untuk Flutter SVG dapat dipindahkan ke kerangka kerja (mis. RawPicture dan infrastruktur terkait, yang kira-kira sesuai dengan RawImage ), dan kami dapat menghubungkan sesuatu yang akan mengambil output dari SKP (mungkin dihasilkan dari SVG seperti yang dirender oleh Chrome, yang merupakan standar emas untuk rendering SVG). Seharusnya dimungkinkan untuk membuat perkakas yang akan menggunakan SVG, memanggil Chromium tanpa kepala untuk merendernya ke SKP, dan kemudian mengubah SKP menjadi beberapa file Dart yang dapat dirender Flutter saat runtime.

Satu area besar yang tidak dipecahkan adalah memuat grafik vektor secara dinamis saat runtime (mis SvgPicture.network ), tetapi saya tertarik dengan umpan balik tentang apakah ini masih akan menjadi solusi yang bermanfaat/dapat diterima bahkan dengan batasan itu.

Saya juga mengatakan ini dengan keyakinan bahwa, pada titik ini, kami tidak akan pernah mendapatkan dukungan "asli" untuk SVG di Flutter. Ini sebagian karena SVG sendiri memiliki banyak bagasi (XML, CSS, kemampuan untuk mengambil aset eksternal) yang tidak sepele untuk diterapkan di luar browser/perangkat lunak rendering HTML dan akan menambahkan banyak pengasapan ke perangkat lunak yang kami coba untuk bersandar. Itu juga sebagian karena sangat mungkin untuk menerapkan sedikit SVG tanpa membuat perubahan besar pada kerangka kerja - meskipun beberapa hal ( filterEffect s dan textPath s khususnya sekarang) mungkin akan manfaat dari beberapa tweak lagi ke mesin.

Saya pikir dapat memuat SVG langsung dari jaringan adalah keuntungan besar meskipun itu berarti kami hanya mendukung sebagian dari fungsi format.

Memiliki format vektor khusus Flutter terdengar seperti apa yang dilakukan Android dengan VectorDrawables, yang meskipun berfungsi dengan baik, itu juga berarti bahwa tidak dapat memanfaatkan banyak alat yang sudah ada untuk SVG. Itu juga membuatnya canggung untuk mengulangi desain karena semua konversi format.

Saya ingin melihat Flutter mendukung SVG secara asli karena itulah yang diharapkan oleh pengembang front-end dari kerangka kerja mereka di tahun 2018. Saya ingin pengembang front-end menemukan Flutter dapat diakses, karena saya ingin ekosistem tumbuh.

@dnfield

format .skp (SKIAPICT).

IMHO pendekatan yang menarik. Tapi kemudian alat Flutter (setidaknya di AS) perlu menangani konversi dengan mulus. Desainer agak terbiasa dengan pembatasan yang diberlakukan oleh impor vector-drawable Android saat ini, jadi mereka pasti akan dapat menangani serangkaian hal yang harus dan tidak boleh dilakukan.

Untuk pengembang biasa, manual harus membaca: " Letakkan gambar svg Anda di sini, beri anotasi di sini, gunakan sesuka hati. Jika svg Anda tidak mematuhi subset SVG yang didukung (lihat di sini) kompiler atau penganalisis ( flutter analyze ) akan memberi tahu Anda apa yang salah di svg Anda ". Atau semacam itu.

@dnfield

dapatkan Chrome/Chromium untuk dihasilkan

Baik untuk PoC dan pengujian, tetapi solusi nyata IMHO mungkin tidak memerlukan ketergantungan yang begitu besar - dan yang sulit untuk skrip sebagai langkah tengah CI. Tentu saja pada versi beta dan kemudian sebagai 'cara sulit' kedua mungkin tidak masalah -- mis. untuk mendapatkan gambar animasi yang mudah yang memungkinkan skPicture. Saya mungkin salah. sebagai desainer biasanya memiliki ember besar dengan browser di bawah penutup laptop mereka. Meskipun demikian, ingatlah bahwa karya seni sering bermutasi. Tidak hanya pada tahap pembuatan prototipe tetapi juga saat waktu peluncuran semakin dekat dan para pengembang sedang demam berburu serangga.

[Yaitu. Kami membutuhkan alat flutter yang menangani impor svg konforman atau kami membutuhkan cara di mana kromium sepenuhnya ada di tangan desainer. Bukan milik pengembang.]

PS. Cara paket launcher_icons mungkin dilakukan di awal: flutter packages pub run flutter_svg_to_skp:main -i path/to/svgs -o path/to/skps .

-- 2 . saya

@cachapa

dapat memuat SVG langsung dari jaringan

Ini adalah pekerjaan untuk paket besar terpisah yang akan menangani validasi dan solusi
sekitar kemungkinan ketidakcocokan dan kebiasaan produser.
Pertama, dapatkan mesin untuk menggambar format vektor yang disediakan pengembang yang pasti akan digunakan oleh paket "Muat SVG dari jaringan". :)

Untuk memperjelas @cachapa dan @ohir - flutter_svg _already_ mendukung pemuatan SVG melalui jaringan ( SvgPicture.network ). Namun, paket itu tidak akan pernah mendukung keseluruhan spesifikasi SVG - tujuannya sebenarnya hanya untuk mendukung spesifikasi yang cukup untuk membuat sebagian besar SVG. Itu sudah melakukan itu, dengan pengecualian utama pada saat ini adalah fliterEffect s (jadi tidak ada blur, filter warna, dll.) dan banyak dukungan terkait teks - tetapi ada beberapa lainnya ( marker s tidak didukung, tipe tertentu dari referensi xlink:href masih tidak didukung). Ada juga beberapa masalah yang sengaja tidak saya dukung, seperti spesifikasi lengkap CSS, skrip, dan interaktivitas.

@lukepighetti Saya pikir harapan itu hanya benar-benar ada dengan pengembang ujung depan berbasis web. Qt mendukung SVG, tetapi hanya sebagian terbatas. GNOME mendukung sedikit lebih banyak dengan librsvg, tetapi sekali lagi itu memiliki beberapa masalah (dan sangat sulit untuk digunakan di luar lingkungan Linux). Saya senang melihat apa yang terjadi dengan resvg, tetapi saya tidak tahu perpustakaan GUI apa pun yang mengintegrasikannya.

@dnfield Saya tidak ingin mengkritik pekerjaan Anda karena Anda melakukan pekerjaan dengan baik dan saya sangat berterima kasih untuk itu. Saya hanya kecewa warna tidak berfungsi seperti yang diharapkan. Saya harus memilih warna saya sendiri, saya bukan seniman, saya juga buta warna.

Flutter perlu mendukung SVG dengan cara yang sama seperti yang dilakukan browser modern. Ini adalah suatu keharusan. Kita harus dapat menggunakan aset yang disalin atau diimpor langsung dari halaman web tanpa modifikasi.

Terus terang terima kasih Tuhan setidaknya ada paket, tapi kami membutuhkan warna, kami membutuhkan efek, jika kinerja menjadi masalah daripada menjadikannya opsional bagi orang untuk mematikan fitur tidak memaksa mereka untuk mengaktifkan fitur.

Kami membutuhkan dukungan spesifikasi penuh untuk SVG. Saya setuju dengan @lukepighetti . Dengan Hummingbird, ini adalah suatu keharusan, atau pengembang web akan menertawakan Flutter dan memberikan umpan yang sulit.

Bahkan @yjbanov menyebutkannya dalam artikelnya di sini: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8

Karena @dnfield menyebutkan 'resvg', @SocialMammoth mungkin flutter_svg juga harus ditujukan untuk dukungan 'SVG statis' alih-alih dukungan svg lengkap:
http://www.w3.org/TR/SVG11/feature#SVG -statis,
yang menurut saya harus membuat semua orang bahagia.

Bahkan Chrome tidak mendukung semua fitur SVG dan terutama rendering teks kanan-ke-kiri bermasalah (tanpa kemajuan dalam beberapa tahun terakhir). Dengan kata lain, menurut saya dukungan penuh SVG tidak realistis. SVG-statis tampaknya menjadi bagian yang masuk akal. Di flutter_svg saya melewatkan teks hadling (termasuk teks di jalur), filter dan masker. Akan menyenangkan memiliki dukungan di Flutter untuk membangun sesuatu seperti ini https://drifted.in/horologium-app/

@SocialMammoth

Flutter perlu mendukung SVG dengan cara yang sama seperti yang dilakukan browser modern

Tidak. Aplikasi Flutter harus ramping. Masalah ini bukan tentang paket maha kuasa untuk menangani semua SVG, ini secara eksplisit mengatakan "mendukung format yang dapat digambar untuk vektor" (tidak mendukung SVG ). Tujuannya, seperti yang saya pahami, sejauh ini adalah untuk menyingkirkan semua aplikasi flutter dari aset bitmap sebanyak mungkin. Dan itu di level mesin. @dnfield melakukan pekerjaan dengan baik melalui sebuah paket. Sekarang saatnya untuk mendapatkan beberapa grafik vektor yang tersedia dari Dart tanpa menggelembungkan mesin flutter (skia) atau aplikasi itu sendiri . Penggunaan .skp tampaknya merupakan pilihan yang baik untuk tujuan itu. Ini sudah memungkinkan lebih dari yang dapat digambar vektor Android dan sudah ada di mesin. Desainer akan mengakomodasi set fiturnya.

@ohir saya kira kita tidak setuju. Kerangka kerja front-end yang tidak mendukung file SVG adalah lelucon yang buruk.

Yah, saya tidak berpikir flutter MEMBUTUHKAN svg berguna, tetapi itu akan menyenangkan. Dan jika bukan svg, dari beberapa format yang mudah diperoleh dari aplikasi grafis vektor khas Anda.

Pada dasarnya SVG adalah format vektor standar untuk digunakan di sini, tetapi kami tidak mungkin mengharapkan dukungan untuk setiap fitur SVG. Tujuannya selalu untuk mendukung minimum untuk mengimpor aset vektor dari aplikasi grafis vektor biasa. Aplikasi grafik vektor mana yang dapat membaca & menulis .skp ?

Pengujian saya apakah format vektor cukup tersedia di mana-mana adalah apakah tersedia di Adobe Illustrator, Affinity Designer, dan Inkscape. Sejauh yang saya tahu bahwa cukup banyak meninggalkan SVG. Dan saya setuju bahwa kita tidak membutuhkan setiap fitur SVG. Hanya goresan dan isian jalur dasar saja yang baik-baik saja.

Saya tidak bisa mengatakan ini dengan otoritas tetapi saya menduga akan lebih mudah untuk mengimplementasikan subset SVG daripada meyakinkan aplikasi grafik vektor untuk mendukung .skp ?

@lukepighetti : Ide Dan adalah menggunakan format internal mesin. Inti dari solusi ini adalah membuat SVG dikonversi ke format yang dimengerti mesin. Tidak masalah jika Inkscape mengetahui format ini selama ada konverter yang layak.

Saya ragu kemarin, tetapi hari ini, setelah sedikit riset, menurut saya otomatisasi chrome didukung dengan baik. Jika chrome tanpa kepala dapat digunakan dengan proxy rendering , itu juga dapat dibuat sebagai konverter svg->skp . Agak berat, tapi terjangkau. Buah gantung rendah memang, @dnfield :).

Semuanya cocok dengan tujuan yang ditetapkan oleh @Hixie hampir tiga tahun lalu.

@dnfield tolong perbaiki saya jika saya salah.
Saya berasumsi bahwa .skp pada dasarnya adalah format biner untuk Gambar Skia.

Mengingat dart:ui juga memiliki pembungkus untuk Gambar Skia yang dapat dihasilkan dari tanah Dart, bukankah isi gambar-gambar ini berisi kemampuan Skia yang berbeda? Pada dasarnya yang dari Chrome akan menggunakan semua fungsi Skia, sedangkan yang dari dart:ui tidak (dibatasi oleh apa yang disediakan melalui mesin Flutter)? Agak aneh untuk argumen 'kinerja', bukan? Mesin Flutter & dart:ui menghapus semua Skia yang dianggap lambat (tanpa menunjukkan angka kinerja) tetapi kemudian Anda dapat menggunakan semua itu jika masuk melalui file .skp yang dihasilkan Chrome?

Hal lain, ketika menggunakan .skp bagaimana Anda menentukan warna ikon, jika misalnya ikon menggunakan 2 warna atau lebih?

Bagaimana dengan argumen lama bahwa dengan menggunakan Dart di Flutter Anda memiliki kendali atas setiap piksel? Bagi saya paket flutter_svg yang mendukung 'svg static' adalah cara yang harus dilakukan karena akan memungkinkan inovasi masa depan di tanah Dart. Dengan melewati Dart dan membiarkan C++ menanganinya, sepertinya Dart tidak bisa meretasnya.

Skia tampaknya mendukung SVG. Mengapa Flutter tidak memberikan dukungan SVG secara langsung?

Dari apa yang saya tahu, tim Flutter ingin menjaga ukuran paket Skia sekecil mungkin. Saya tidak tahu bahwa Skia mendukung SVG, tetapi jika ya, itu adalah buah yang menggantung rendah. Sebagai catatan, ada masalah lain dalam menambahkan dukungan Lottie untuk Flutter karena Skia mendukungnya.

Skia tidak mendukung pengimporan gambar dari SVG, tetapi memiliki beberapa dukungan eksperimental untuk membuat SVG (yang tidak begitu berguna di sini).

Dan ya, ukuran paket menjadi perhatian.

Silakan jika Anda ingin meminta dukungan SVG, lihat: https://github.com/flutter/flutter/issues/15501

Bug ini secara khusus tentang mendukung grafik vektor tanpa mendukung SVG.

Untuk orang-orang yang tertarik dengan format grafik vektor, saya ingin tahu tentang kasus penggunaan Anda.

Saya menyadari hal ini sejauh ini:

• Ikon. Gambar statis yang mungkin perlu diwarnai ulang secara dinamis (mis. berwarna abu-abu saat dinonaktifkan), dan mungkin perlu memiliki berbagai tingkat detail bergantung pada ukuran render target. Tidak mungkin memiliki teks.

• Ikon animasi: Dua ikon seperti dijelaskan di atas, dan deskripsi tentang cara bertransisi dengan mulus dari satu ke yang lain.

• Latar Belakang: Gambar yang mungkin jauh lebih besar dari layar, mungkin ditampilkan dengan paralaks; umumnya adegan sederhana dengan bentuk, gradien, dan bayangan, tidak mungkin memiliki teks.

Apakah ada kasus penggunaan lain yang memotivasi kebutuhan Anda akan grafik vektor? Tolong jelaskan mereka di sini. Terima kasih.

Mendukung beberapa resolusi dengan satu grafik, terutama dengan kompatibilitas ke depan untuk layar resolusi lebih tinggi

Aplikasi saya pada dasarnya adalah pendamping konferensi. Saya ingin menyertakan peta hotel, dengan kemampuan untuk menggeser dan memperbesar. Menggunakan raster resolusi tinggi tidak praktis karena alasan ukuran dan kinerja; grafik vektor sempurna.

Saat ini saya menggunakan tampilan web PDF tertanam, yang sangat merepotkan dan hanya berfungsi online (meskipun saya mungkin bisa mengatasinya jika harus).

• Kenop kustom 'terlihat mirip nyata' praktis tidak dapat dicapai tanpa grafik vektor. Terutama yang berputar, miring atau geser leleh .

Untuk menambah apa yang dikatakan Dan: hanya 1kB sumber vektor dapat menghasilkan detail halus, gambar halus baik di tablet 7" maupun di TV 4HD 105". Kasus terbaru dari aplikasi Kios kasir untuk layar 10 atau 14" (menghadap kasir) dan 5 atau 7" (menghadap pelanggan). Kumpulan semua 5000+ gambar vektor barang berukuran kurang dari 5MB. Hanya subset 'sayuran' (~ 150) yang dikonversi ke png untuk dua layar yang digunakan lebih dari 30MB. Kumpulan inventaris lengkap mungkin berakhir dalam kisaran GBytes.

PS Hal besar berikutnya adalah memiliki grafik vektor dengan area sentuh yang ditentukan, misalnya, melalui isian yang dipilih. Ini akan menghemat ribuan baris kode untuk seluruh kelas antarmuka yang sebagian besar statis tetapi kaya detail.
Seperti dalam Manual Operator Mesin interaktif.

Selain mimpi - biarkan desainer kami menggunakan gambar vektor sederhana terlebih dahulu :)

Terima kasih atas responnya sejauh ini. Sangat membantu.

@ohir Bisakah Anda menguraikan "memutar, miring atau meleleh"?

Solusi saya untuk ini yang sebenarnya sangat saya senangi adalah menggunakan paket path_parsing (https://pub.dev/packages/path_parsing) untuk menghasilkan perintah menggambar kanvas dari string jalur SVG dan kemudian menggunakannya untuk membuat widget CustomPainter yang menggambarnya. Untuk bentuk SVG lain selain jalur (persegi panjang, lingkaran, dll.) Saya hanya menerjemahkannya secara manual ke dalam perintah menggambar yang sedikit membosankan tetapi tidak terlalu sulit.

Ini bekerja sangat baik untuk ikon vektor sederhana dan memungkinkan Anda menggunakan widget yang sama dengan ukuran dan warna berbeda di seluruh aplikasi.

Berikut kodenya: https://Gist.github.com/jpotterm/7b30739e0af722baf97a397d9841d908

Ini bisa sangat berguna jika ada alat baris perintah flutter resmi yang menguraikan file SVG dan menghasilkan perintah menggambar kanvas yang akan menghasilkan hasil yang serupa.

@Hixie
Misalnya. https://dribbble.com/shots/1083175-Air-conditioning-controller#
Kenop putar tengah dan pengukur di sekitarnya dapat digambar dengan cermat dengan Canvas API saat ini tetapi juga dapat memuat 2Kb (xml svg) kemudian sekitar 300-500B drawable. Jika grafik vektor dan transformasi affine dasar dari level Skia diekspos melalui beberapa antarmuka 'grafik vektor', kenop ini dapat dibuat hidup hanya dengan menerapkan isian ke segmen pengukur dan memutar jalur lingkaran kecil indikator.

Lebih penting adalah bahwa seluruh kenop ini, dengan warna dan detail lainnya akan digambar persis seperti yang direncanakan desainer - karena itu akan menjadi semua karyanya yang disematkan. Antarmuka gambar Vektor + isi + gradien + desainer yang baik mungkin terlihat seperti: https://www.artua.com/app-design-deckadance/
Transformasi affine di pihak pengembang akan membuat desain seperti itu responsif dan bersemangat.
Adapun transformasi miring, dan geser: dapat misalnya. digunakan untuk memodelkan perpindahan tuas kontrol.
(Pergeseran kata "meleleh" kemungkinan disebabkan oleh hantu Salvadore Dali;)

/keluar topik/

@jpotterm
Ini bisa sangat berguna jika ada alat baris perintah flutter resmi yang menguraikan file SVG dan menghasilkan perintah menggambar kanvas yang akan menghasilkan hasil yang serupa.

Saya telah menghasilkan sesuatu yang serupa. Generator kode yang mencari Anotasi dan, mengambil PathData SVG yang ditentukan dan menghasilkan pengambil yang mengembalikan objek Path. Jika orang mau, saya bisa membersihkannya dan membukanya.

Aplikasi yang saya sumbangkan sangat cocok untuk grafik vektor. Ini memiliki ratusan grafik seni garis hitam & putih kecil yang membangun UI. Ini dapat diwarnai dan diubah ukurannya.

Melakukan ini dalam berbagai warna pada semua kepadatan yang berbeda akan sangat buruk untuk dilakukan, tidak berkelanjutan, dan membuat paket terakhir menjadi raksasa. Gambar-gambar ini berasal dari grafik yang digambar tangan.

Terima kasih semuanya atas tanggapan Anda. Komentar yang sangat membantu.

Untuk orang-orang yang tertarik dengan format grafik vektor, saya ingin tahu tentang kasus penggunaan Anda.

Kasus penggunaan lain pada dasarnya adalah apa pun yang membutuhkan grafik dinamis:

• grafik
• memuat bar
• menggambar
• dll

Saya sebenarnya sangat terkejut Flutter tidak mendukung itu karena Skia memiliki dukungan untuk subset SVG (bagian yang berguna juga).

Saya ingin menggunakan SVG untuk seni. Tablet PNG layar penuh berkualitas dapat berukuran 2mb atau lebih, sedangkan SVG yang setara dapat berukuran 5-10kb. Tambahkan beberapa layar, dan kita berbicara 20mb ke paket, bukan 100kb.

Untuk grafik terprogram, saya adalah penggemar berat CustomPaint jadi saya tidak akan pernah menggunakan SVG untuk hal-hal seperti bagan, memuat bilah, menggambar, dll. Bagi mereka yang peduli dengan CustomPaint API, secara mental sangat mirip dengan HTML Canvas API. Dan ya, walaupun saya setuju bahwa menulis sesuatu di CustomPaint itu mahal, apa yang Anda dapatkan pada akhirnya sangat kokoh dan dirender dengan sangat cepat dan sangat indah.

Jika Anda akan mendukung SVG, maka Anda harus mendukung semua fitur SVG, seperti gradien, goresan, dan lainnya. Ini tidak dilakukan di proyek Android dan itu menimbulkan beberapa tanda peringatan bagi pengembang, karena hampir semua pengembang lainnya. platform mendukung SVG dan vektor. Ini dasar-dasar grafis, lakukan dengan benar!

@harounhajem silakan lihat https://github.com/flutter/flutter/issues/15501 untuk topik itu, serta https://github.com/dnfield/flutter_svg

@PierBover untuk grafik secara khusus, harap pertimbangkan https://pub.dev/packages/charts_flutter

Saya baru saja melompat ke Flutter. Saya melakukan refactoring aplikasi pribadi dari Ionic 3 ke Ionic 4 dan itu (sekali lagi) sangat berbeda dan membutuhkan aplikasi dari awal.
Jadi saya memutuskan untuk pindah ke Flutter dan mencobanya. Seperti yang saya katakan, saya telah menyelesaikan dan menjalankan aplikasi ini dan ini mencakup banyak grafik dan ikon yang telah saya siapkan di aplikasi saya. Saya bukan seorang desainer dan saya harus membayar untuk desain ini.
Saya mengerti saya bukan satu-satunya dalam situasi ini, ingin menggunakan kembali aset SVG-nya.

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

(tidak yakin mengapa ini tidak ditutup)

Karena masalah sebenarnya—mendukung format sumber daya dapat digambar untuk vektor selain SVG—tidak terpecahkan?

oh, salahku @jonahgreenthal. Saya datang ke sini mencari dukungan SVG dan melihat bahwa komentar ketiga meminta hal yang sama

Uber telah melakukan ini untuk iOS: https://github.com/uber/cyborg
Akan menarik untuk melihat sesuatu seperti itu di Flutter.

Ada pembaruan tentang ini?

@dnfield yang berfungsi dengan baik menampilkan svg sebagai widget baru tetapi tidak berfungsi dengan properti AssetImage . Saya perlu menampilkannya menggunakan widget CircleAvatar

@Hixie ada juga kasus penggunaan di mana ikon svg harus memiliki banyak warna karena membantu pengguna memahami arti ikon. Jadi saya harap solusinya akan mencakup kemampuan untuk menyesuaikan warna tema juga.

Saat ini, beberapa orang menyarankan untuk mengonversi SVG menjadi font dan menggunakannya dengan cara yang sama seperti yang dilakukan paket ikon namun kami tidak dapat memiliki banyak warna dalam ikon dalam kasus ini.

4 tahun berbagai komentar tanpa solusi yang berguna. Singkatnya - tidak, tidak, mungkin. Tidak, tidak direncanakan.

Bisakah kita setidaknya tahu mengapa ini begitu bermasalah/sulit?

Flutter_svg memiliki dukungan yang layak untuk SVG dalam flutter. Rive juga mendukung format berbasis vektor untuk flutter.

Masalah ini adalah tentang membuat format berbasis vektor baru. Itu butuh waktu :)

@dnfield ada beberapa widget dengan properti latar belakang yang tidak bisa kami lewati svgs. Apakah ada cara untuk mengarsipkan ini?

tolong tambahkan dukungan svg yang tepat alih-alih membuat format baru. Svg adalah standar de facto.

Setiap kali saya membuat aplikasi, biasanya ada situs web terkait, dan situs web menggunakan svg, dan mereka menggunakan svgs animasi yang indah, yang ringan dan indah pada resolusi apa pun.
Sangat masuk akal untuk hanya menggunakan kembali animasi svgs di Flutter sehingga konsistensi dapat dicapai dengan benar alih-alih membuat gambar dan animasi diimplementasikan kembali!

SVG sudah ada, berfungsi, dan tersedia secara luas, digunakan dan didukung di tempat lain. Fokus pada itu yang kita butuhkan.

Masalah ini adalah tentang membuat format berbasis vektor baru

Jadi maksud Anda, masalah ini tentang menemukan kembali roda, bukan? Saya setuju dengan @d-silveira - lebih baik tambahkan bawaan, dukungan yang tepat untuk svg, kami tidak memerlukan format berbasis vektor baru.

Ya, ini tentang menciptakan roda yang lebih baik. SVG sudah didukung di Flutter menggunakan flutter_svg.

Lebih baik dapat mengimpor svg dan memprosesnya secara internal, baik pada waktu pembuatan atau pembuatan kode secara otomatis selama impor. Mirip dengan Android asli - Anda dapat mengimpor svg dan definisi jalur Android xml akan dihasilkan dari sumber svg. Impor ke proyek Flutter dapat menghasilkan kode panah untuk digunakan kembali untuk menggambar aset vektor.

@Hixie bagus untuk membuat segalanya lebih baik, saya tidak akan membahas itu, tetapi bagaimana kami dapat mendukung beberapa widget yang hanya mengizinkan gambar non svg untuk sementara? (misalnya yang dengan properti latar belakang)

Itu akan menjadi permintaan fitur untuk flutter_svg.

@Hixie Flutter SVG dapat membuat gambar di sana, tetapi alangkah baiknya jika kerangka kerja lebih toleran dalam mengambil gambar daripada gambar dalam beberapa kasus. Diarsipkan https://github.com/flutter/flutter/issues/49712

flutter_svg

Mengapa demikian? Ini sama sekali tidak terkait dengan paket flutter_svg :

CircleAvatar(
  backgroundImage: MySVGImage(),
)

@Hixie flutter_svg hanya akan berfungsi untuk beberapa kasus. Biarkan saya memberi Anda contoh praktis: Saya perlu menggunakan REST API yang di beberapa titik akhirnya mengembalikan url gambar. Gambar dibuat oleh pengguna di backoffice, oleh karena itu beberapa di antaranya adalah png, beberapa jpg dan beberapa svg. Backoffice tidak menyertakan ekstensi file di url, dan tidak mendukung HEAD, jadi kami tidak memiliki cara untuk mengetahui jenis gambar sebelumnya.
Perilaku flutter yang diharapkan adalah menerima url di image.network dan menanganinya, alih-alih memaksa saya melompati lingkaran untuk menebak jenis gambarnya, dan jika itu svg beralih ke flutter_svg.
Semua ini bahkan tidak memperhitungkan fakta bahwa flutter_svg bukanlah pengganti drop-in untuk gambar dalam setiap kasus! :P

SVG secara umum hanya akan berfungsi untuk beberapa kasus penggunaan juga. :-)

Masalah khusus ini adalah tentang memiliki format grafik vektor non-SVG. Jika Anda memiliki persyaratan yang berbeda, saya sarankan untuk mengajukannya sebagai masalah terpisah.

Dari pembahasan sebelumnya, beberapa pertimbangan penting adalah:

• Kami tidak ingin dukungan penuh SVG. Ada terlalu banyak spesifikasi yang mahal, kelas berat, dan/atau menduplikasi apa yang sudah kita miliki di Flutter.
• Kami harus menekankan dalam format yang kami dukung bahwa operasi tersebut efektif/efisien/dioptimalkan di mesin grafis kami (Skia).
• Kami mungkin ingin memproses format pada waktu build daripada mendukung interpreter run-time penuh.

Jadi bagaimana seseorang membuat format vektor baru untuk gambar yang dioptimalkan untuk flutter? Berdasarkan di atas saya pikir itulah yang disarankan ...

Mungkin orang-orang di Rive dapat mengumpulkan beberapa perpustakaan konversi SVG. Mereka sudah memiliki mesin vektor berpemilik (dan open source) untuk Flutter. @luigi-rosso

Mengapa tidak menambahkan dukungan untuk mengimpor svg ke proyek Flutter. Dan konversikan ke kode panah/vektor baru yang dapat digambar, dll. Perhatikan bahwa situasi yang sama terjadi pada Android asli, itu sebabnya kami tidak menggunakan svg secara langsung (yang saya setuju tidak masuk akal) dan mengimpor ke proyek sebagai gantinya, svg dihilangkan dari tidak didukung dan tidak diperlukan fungsionalitas dan diubah menjadi definisi jalur Android.

Bukankah itu ide yang bagus untuk Flutter?

@giaur500 Masalah ini bukan tentang itu. Jika Anda memiliki saran khusus tentang SVG, harap ajukan masalah terpisah.

Agar adil, banyak komentar dalam masalah ini yang membahas SVG dan Flutter.

mengikuti

SVG sangat cocok untuk antarmuka pengguna tingkat piksel yang hebat. Benar-benar yang terbaik sejauh ini untuk piksel hebat.

@lukepighetti Ya. Sayangnya, semuanya di luar topik dan memilikinya di sini tidak akan menghasilkan peningkatan apa pun pada Flutter.

Dari pembahasan sebelumnya, beberapa pertimbangan penting adalah:

• Kami tidak ingin dukungan SVG penuh. Ada terlalu banyak spesifikasi yang mahal, kelas berat, dan/atau menduplikasi apa yang sudah kita miliki di Flutter.
• Kami harus menekankan dalam format yang kami dukung bahwa operasi tersebut efektif/efisien/dioptimalkan di mesin grafis kami (Skia).
• Kami mungkin ingin memproses format pada waktu build daripada mendukung interpreter run-time penuh.

Alat waktu pembuatan akan sangat bagus, mengambil vektor dan merender semua kepadatan layar, dan menambahkan aset sebagai gambar. Apples iOS melakukan ini dengan ikon PDF.

Lebih baik dapat mengimpor svg dan memprosesnya secara internal, baik pada waktu pembuatan atau pembuatan kode secara otomatis selama impor. Mirip dengan Android asli - Anda dapat mengimpor svg dan definisi jalur Android xml akan dihasilkan dari sumber svg. Impor ke proyek Flutter dapat menghasilkan kode panah untuk digunakan kembali untuk menggambar aset vektor.

saya suka itu

@giaur500 Masalah ini bukan tentang itu. Jika Anda memiliki saran khusus tentang SVG, harap ajukan masalah terpisah.

Masalah baru telah dibuat: https://github.com/flutter/flutter/issues/63752

Jadi apa keadaan ini?
Apakah ada niat sama sekali untuk mendukung sesuatu yang mirip dengan VectorDrawable, atau bahkan VectorDrawable sendiri untuk mereka yang ada di Android?

Sebagai pengembang yang mempertimbangkan untuk mengadopsi ekosistem, saya akan mengatakan ini adalah poin kuat yang meyakinkan saya untuk tetap asli..

Saya tidak pernah mencobanya sendiri, tetapi flutter svg lib dulu memiliki dukungan untuk at
fitur utama yang paling tidak dapat digambar untuk vektor seperti jalur.

Pada Sabtu, 15 Agustus 2020, 19:46 n00bmind, [email protected] menulis:

Jadi apa keadaan ini?
Apakah ada niat sama sekali untuk mendukung sesuatu yang mirip dengan
VectorDrawable, atau bahkan VectorDrawable sendiri untuk mereka yang menggunakan Android?

Sebagai pengembang yang mempertimbangkan untuk mengadopsi ekosistem, saya akan mengatakan ini adalah
poin kuat yang meyakinkan saya untuk tetap asli..

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/flutter/flutter/issues/1831#issuecomment-674375846 ,
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/ABI4Y4LWYSYEIWI3RRSSCK3SAZKO5ANCNFSM4B3FXMMQ
.

Saya kira negara bukan apa-apa. Tidak ada kesimpulan di sini dari utas ini dan juga ide saya untuk mengembangkan sesuatu yang mirip dengan drawable vektor asli segera ditutup.

Apakah ada alasan mengapa paket flutter svg tidak berfungsi untuk Anda? Kami menggunakannya dengan sukses besar di salah satu aplikasi kami. Saya tidak pernah menggunakan Vector Drawable jadi saya tidak yakin bagaimana perbandingannya dengan SVG.

Tampaknya paket flutter_svg layak untuk dilihat untuk kasus penggunaan semacam ini..
@lukepighetti bagaimana Anda menilai kinerjanya? Penggunaan saya hanya berupa gambar percikan dan beberapa grafik berukuran ikon di sana-sini di aplikasi, jadi tidak ada yang mewah.

Tampaknya paket flutter_svg layak untuk dilihat untuk kasus penggunaan semacam ini..

@lukepighetti bagaimana Anda menilai kinerjanya? Penggunaan saya hanya berupa gambar percikan dan beberapa grafik berukuran ikon di sana-sini di aplikasi, jadi tidak ada yang mewah.

Saya akan menilai itu sangat tinggi untuk kasus penggunaan Anda. Saya pikir orang-orang harus benar-benar mencobanya sebelum mereka menekan tim flutter untuk melakukan sesuatu secara internal.

@lukepighetti

sebelum mereka menekan tim flutter untuk melakukan sesuatu secara internal.

Masalah nyata dengan masalah khusus ini adalah bahwa Skia the flutter graphics engine memiliki semua yang diperlukan untuk membuat format vektor "dapat digambar" berjalan pada kecepatan tertinggi tanpa mengimpor paket dart yang cukup berat yang memanggil engine untuk menggambar primitif langkah demi langkah.

Saya pikir orang harus benar-benar mencobanya _(paket SVG)_ mencoba

Saya pikir orang-orang harus dengan lantang dan di setiap tempat memanggil Googler untuk masalah besar ini, karena sekarang — setelah empat tahun — hanya PR negatif yang dapat menendang seseorang di Google untuk memikirkan apakah kerangka kerja seluler di tahun 2020 harus benar-benar memaksa kita untuk membawa semua megabita grafik raster dalam aplikasi kami.

[@Hixie]

Kecuali saya melewatkan sesuatu, implementasi untuk fitur flutter seperti itu akan sangat mirip dengan paket flutter_svg @dnfield yang tampaknya menyelesaikan kasus penggunaan yang Anda gambarkan. Selain itu, pengelola berada di tim inti Flutter sehingga kami dapat memastikan kualitasnya. Apakah Anda akan merasa lebih baik jika paket ini ada di https://github.com/flutter/plugins ?

Jika ada sesuatu yang saya lewatkan, jangan ragu untuk mendidik saya sehingga saya dapat mempelajari lebih lanjut tentang topik ini.

@lukepighetti

Saya pikir "bukan SVG" dalam judul masalah harus dibuat merah, tebal, dan berkedip.

Masalah ini secara khusus bukan tentang format svg.

OP (dan saya) memiliki harapan untuk mengekspos api jalur Skia sehingga grafik aset dapat direpresentasikan dalam bentuk yang ringkas - yaitu biner dari endianess tetap. Dan bahkan melakukan patch ke Skia yang berfungsi untuk flutter_svg, yang pada gilirannya sekarang memungkinkan kita untuk menggunakan aset svg. Meskipun kami masih mem-parsing xml saat aplikasi dijalankan dan menggambar dengan memanggil mesin — juga untuk aset statis yang dibundel dalam apk.

Dengan dukungan yang tepat untuk format dapat digambar untuk vektor kustom (sebut saja fvd ), penguraian karya desainer akan terjadi sekali — pada waktu pembuatan aplikasi, kemudian objek dalam format fvd akan dilemparkan langsung ke Skia. Dalam aplikasi grafis-berat pendekatan seperti itu akan memiliki efek yang sangat besar pada ukuran aplikasi dan penghematan nyata pada waktu rendering. [ mengutip diri sendiri ]

Saya harap di atas menunjukkan bagaimana saya melihat masalah ini dan membenarkan panggilan saya untuk menyelesaikannya pada akhirnya.
Bahkan sebagai bagian dari perpustakaan flutter_svg.

Flutter layak memiliki keunggulan lain dibandingkan teknologi pesaing.

Untuk apa nilainya, tidak ada yang salah dengan menggunakan flutter_svg, hanya saja itu kurang bahkan beberapa hal yang sangat sederhana, misalnya tidak mendukung persentase dan langsung crash ketika mencoba untuk membuat mereka. Komentar ini bukan ketukan pada perpustakaan flutter_svg, itu hanya untuk menjelaskan kepada orang-orang yang mengatakan bahwa kami hanya dapat menggunakan flutter_svg.

flutter_svg tampaknya berfungsi dengan sangat baik meskipun tidak mendukung skrip, HTML, SMIL dll.

itu terlihat bagus dan kita dapat membangun SVG dari aset file, jaringan atau string biasa.