SVG dalam SwiftUI: Tambahkan Aset dan Kendalikan Warnanya

Untuk SVG statis yang disertakan bersama aplikasi SwiftUI, letakkan artwork dalam katalog aset Xcode dan muat gambar berdasarkan nama asetnya. Kemudian tentukan apakah gambar harus mempertahankan warna asli atau menjadi siluet berwarna tint. Apple menambahkan aset gambar SVG dalam Xcode 12; catatan rilis-nya mengidentifikasi pelestarian vektor untuk deployment target iOS 13, iPadOS 13, dan macOS 10.15 atau yang lebih baru.

Alur kerja katalog itu berbeda dari mengunduh file SVG saat aplikasi berjalan. Alur kerja juga berbeda dari membuat SF Symbol khusus. Pilih jalur penyerahan sebelum mengubah artwork atau menambahkan paket renderer.

Pilih jalur untuk gambar khusus ini

SVG adalah file sumber. Cara aplikasi Anda menerima dan menggunakannya menentukan langkah berikutnya.

Panduan ini menggunakan jalur pertama. Cangkir kecil dua warna membuat dua kesalahan terpisah mudah ditemukan: hilangnya warna uap koral dan terisinya gagang terbuka. Keduanya tidak membutuhkan ilustrasi rumit untuk didiagnosis.

Panduan persiapan kit UI membahas pekerjaan lebih luas untuk membuat kumpulan konsisten. Di sini, pertanyaannya adalah bagaimana satu SVG yang diterima mencapai Image SwiftUI.

Siapkan sumber kecil dengan pemeriksaan yang terlihat

Simpan contoh orisinal ini sebagai CupMark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <path d="M12 26H43V45Q43 54 34 54H21Q12 54 12 45Z"
    fill="#147D73"/>
  <path d="M43 30H48Q55 30 55 37Q55 44 48 44H43"
    fill="none" stroke="#147D73" stroke-width="5"/>
  <path d="M24 19Q18 14 25 8M35 19Q29 14 36 8"
    fill="none" stroke="#EB8067" stroke-width="4" stroke-linecap="round"/>
</svg>

Cangkir berwarna hijau kebiruan, dua stroke uap berwarna koral, dan area di dalam gagang kosong. Pertahankan ketiga properti itu dalam daftar peninjauan Anda. SVG tidak berisi teks, gambar eksternal, filter, atau skrip, sehingga menyediakan file awal ringkas untuk eksperimen katalog.

Untuk artwork Anda sendiri, periksa sumber sebelum impor. Canvas kosong berlebihan membuat ikon terlihat kecil meskipun view-nya memiliki dimensi yang benar. Persegi panjang latar belakang putih menjadi bagian siluet template. Foto tertanam tetap merupakan jenis konten berbeda dari path di sekitarnya; pemeriksaan raster tertanam membantu membedakannya.

Simpan master yang dapat diedit di luar salinan penyerahan aplikasi. Jika ikon berisi tulisan, tentukan strategi font atau outline dalam master; lihat alur kerja perubahan font SVG. Mengubah gaya teks SwiftUI bukan pengganti pemeriksaan tulisan di dalam gambar.

Tambahkan sebagai image set biasa

Buka katalog aset aplikasi, biasanya Assets.xcassets. Tambahkan image set baru dan beri nama CupMark. Seret SVG ke image well yang sesuai. Panduan katalog aset Apple menjelaskan pembuatan set, pengimporan sumber daya, dan penyediaan variasi melalui Attributes inspector.

Gunakan image set untuk contoh ini. Jangan memilih alur kerja symbol-image hanya karena sumber berakhiran .svg.

Setelah impor, periksa pratinjau katalog dan diagnostik build. Pastikan katalog termasuk dalam target aplikasi yang akan menggunakannya. Jika penyiapan aset berisi variasi platform atau tampilan, pastikan gambar yang dimaksudkan ada dalam konfigurasi relevan alih-alih menganggap pratinjau mewakili setiap konfigurasi.

Nama CupMark adalah nama sumber daya gambar yang digunakan di bawah. Nama itu bukan URL unduhan atau path ke SVG asli dalam folder desain. Initializer Image Apple mencari sumber daya berdasarkan nama dalam bundle; defaultnya adalah main bundle. Jika gambar Anda berada dalam bundle sumber daya lain, berikan bundle tersebut secara sengaja.

Pertahankan perbedaan nama file dan nama aset dalam catatan penyerahan. Rekan tim dapat mengganti nama asset set tanpa mengubah nama file desain asli, dan kode harus mengikuti nama sumber daya yang benar-benar dimuatnya.

Bandingkan rendering original dan template

Gunakan view ini setelah menambahkan image set CupMark:

import SwiftUI
 
struct CupComparison: View {
    var body: some View {
        HStack(spacing: 24) {
            Image("CupMark")
                .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .accessibilityLabel("Cup with rising steam")
 
            Image("CupMark")
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .foregroundStyle(Color.blue)
                .accessibilityLabel("Cup with rising steam")
        }
        .padding()
    }
}

Instans kiri secara eksplisit meminta rendering original. Instans kanan meminta rendering template dan menyediakan biru sebagai foreground style. Dokumentasi rendering template Apple mendefinisikan mode template sebagai piksel tidak transparan yang mengambil warna foreground. Ini adalah perlakuan siluet, bukan perintah untuk mewarnai ulang hanya satu path SVG.

Untuk cangkir, itu berarti versi kanan seharusnya memiliki uap biru dan cangkir biru. Perbedaan koral/hijau kebiruan sengaja hilang. Bukaan gagang seharusnya tetap kosong. Jika aplikasi membutuhkan uap berubah secara mandiri dari cangkir, pilih struktur penyerahan yang mengekspos bagian itu secara terpisah alih-alih mengharapkan satu gambar template menyediakan gaya per path.

Modifier juga membuat keputusan ukuran eksplisit. resizable() mengaktifkan perilaku perubahan ukuran gambar, dan scaledToFit() mempertahankan rasio aspeknya di dalam frame 48 poin. Frame view dan canvas artwork sendiri merupakan batas terpisah: ruang kosong tambahan di dalam SVG masih menjadi bagian sumber.

Ini adalah contoh terdokumentasi untuk dicoba dalam proyek Anda, bukan laporan pengujian rendering native. Periksa aplikasi hasil build sebenarnya, termasuk ukuran terkecil yang direncanakan untuk penggunaan lambang. Pratinjau 48 poin yang jelas tidak membuktikan bahwa kedua stroke uap akan tetap berguna pada 16 poin.

Diagnosiskan hasil yang terlihat sebelum mengubah file

Gambar hilang, warna berubah, dan siluet buruk pada ukuran kecil membutuhkan perbaikan berbeda.

Ubah satu lapisan setiap kali. Jika sumber sudah memiliki bukaan yang benar, membangun ulang hasil penelusuran tidak akan memperbaiki nama aset yang salah eja. Jika pencarian berhasil tetapi mode template menghapus perbedaan warna, menambahkan lebih banyak warna ke SVG tidak akan mengubah mode rendering yang dipilih.

Untuk ikon di samping teks terlihat, tinjau nama aksesibelnya dalam konteks kontrol lengkap. Contoh menyediakan deskripsi untuk setiap gambar perbandingan. Pengulangan dekoratif di samping kontrol yang sudah bernama mungkin membutuhkan perlakuan aksesibilitas berbeda; jangan menerapkan label view perbandingan secara mekanis pada setiap penempatan.

Pisahkan keputusan SVG runtime dan SF Symbols

Gambar katalog bernama bukan API untuk mengambil dan mengurai XML SVG sembarang. Jika file tiba setelah aplikasi di-build, pilih renderer yang secara eksplisit menangani input itu. Sebagai contoh, README proyek SVGView menjelaskan parser dan renderer SVG yang ditulis dalam SwiftUI. Evaluasi fitur SVG yang benar-benar digunakan file Anda; tujuan dukungan luas paket bukan bukti bahwa seluruh kumpulan input Anda dirender dengan benar.

Jadikan perilaku pemuatan, kegagalan, dan file tidak didukung bagian dari fitur runtime tersebut. Jangan menambahkan paket hanya karena jawaban lama menyatakan SwiftUI tidak dapat menggunakan gambar SVG, ketika kebutuhan Anda adalah gambar statis yang sudah dicakup jalur katalog aset.

SF Symbols khusus memiliki kontrak sumber berbeda. Apple mendokumentasikan alur kerja pembuatan dan validasi berbasis template, termasuk varian simbol dan informasi perataan. SVG cangkir biasa tidak memperoleh properti tersebut dengan ditempatkan dalam image set. Gunakan alur kerja itu ketika aplikasi membutuhkan perilaku simbol, dan pertahankan struktur template yang diperlukan.

Format penyerahan platform perlu diperiksa secara mandiri. Jika artwork yang sama juga ditujukan ke Android, ikuti panduan penyerahan VectorDrawable; penerimaan importer satu platform tidak membuktikan penerimaan platform lain.

Ketika ikon Anda hanya tersedia sebagai PNG

Jika sumber yang dapat diedit hilang dan PNG merupakan ikon sederhana, konverter PNG-ke-SVG PerfectVector dapat membantu menyiapkan kandidat artwork untuk alur kerja ini. Crop ke ikon, periksa pratinjau untuk bukaan hilang, detail tergabung, dan bentuk latar belakang yang tidak diinginkan, lalu bandingkan dengan sumber asli. Unduh SVG yang diterima dan uji melalui pemeriksaan image set dan mode rendering yang sama.

Gunakan vektor asli ketika tersedia. Pertahankan foto dan gambar yang sarat efek sebagai raster ketika itu lebih baik menjaga tampilannya. Vektorisasi menyiapkan geometri; proses ini tidak mengompilasi katalog Xcode, memilih bundle sumber daya Anda, atau menghasilkan template SF Symbols dengan varian yang diperlukan.

Sebelum menyerahkan aset, catat nama katalog, perilaku original/template yang dimaksudkan, ukuran visual minimum, dan file sumber yang digunakan untuk membuat ulang aset. Uji latar belakang terang dan gelap serta variasi tampilan yang didukung dalam aplikasi. Panduan artwork di blog membahas persiapan sumber sebelum langkah penyerahan ini.

FAQ

Dapatkah SwiftUI menggunakan SVG dari katalog aset? Ya. Xcode mendukung aset gambar SVG. Tambahkan file ke image set biasa dan muat sumber daya bernama dengan Image. Verifikasi deployment target dan build katalog sebenarnya alih-alih menganggap ini sebagai dukungan untuk file SVG runtime sembarang.

Mengapa SVG saya menjadi satu warna? Periksa mode rendering. Rendering template menggunakan gambar terlihat sebagai siluet berwarna foreground. Gunakan rendering original ketika Anda membutuhkan perbedaan warna asli artwork.

Dapatkah Image memuat SVG dari URL web? Initializer Image bernama adalah pencarian sumber daya, bukan parser SVG berbasis URL. File SVG runtime membutuhkan alur kerja rendering dan pemuatan yang sesuai, yang Anda verifikasi dengan input sebenarnya.

Apakah image set SVG sama dengan SF Symbol khusus? Tidak. Simbol khusus menggunakan template dengan struktur, varian, informasi perataan, dan validasi yang diperlukan. Image set SVG biasa tidak otomatis menyediakan properti simbol tersebut.

Sources

1. Apple — Catatan Rilis Xcode 12 — Dukungan aset gambar SVG dan deployment target pelestarian vektor yang didokumentasikan.
2. Apple — Mengelola aset dengan katalog aset — Asset set, import well, dan variasi.
3. Apple — Image init(_:bundle:) — Pencarian sumber daya bernama dan bundle.
4. Apple — Image.TemplateRenderingMode — Mode rendering original dan template.
5. Apple — resizable(capInsets:resizingMode:) — Perilaku perubahan ukuran gambar eksplisit.
6. Apple — scaledToFit() — Penyesuaian sambil mempertahankan rasio aspek.
7. Apple — Membuat gambar simbol khusus untuk aplikasi Anda — Template simbol khusus, varian, dan validasi.
8. Exyte — SVGView — Solusi penguraian dan rendering SVG terpisah untuk SwiftUI.

Periksa satu ikon pada ukuran dan mode warna yang dimaksudkan sebelum mengimpor seluruh kumpulan. Jika hanya PNG tersisa, siapkan kandidat SVG, periksa bukaan dan latar belakangnya, dan verifikasi file yang diterima dalam aplikasi hasil build.