SwiftUI’da SVG: Görsel ekleyin ve rengini yönetin

SwiftUI uygulamanıza dâhil edilen statik bir SVG için görseli Xcode varlık kataloğuna koyun ve görseli varlık adıyla yükleyin. Ardından özgün renklerini mi koruyacağına, yoksa renklendirilmiş bir siluete mi dönüşeceğine karar verin. Apple, SVG görsel varlıklarını Xcode 12’de ekledi; sürüm notları, iOS 13, iPadOS 13 ve macOS 10.15 veya sonraki dağıtım hedefleri için vektörün korunduğunu belirtir.

Bu katalog iş akışı, uygulama çalışırken SVG dosyası indirmekten farklıdır. Özel bir SF Symbol oluşturmaktan da farklıdır. Görseli değiştirmeden veya bir görüntüleyici paketi eklemeden önce aktarım yöntemini seçin.

Bu görsele uygun yöntemi seçin

SVG, kaynak dosyadır. Sonraki adımı, uygulamanızın onu nasıl aldığı ve kullandığı belirler.

Bu adım adım anlatım ilk yöntemi kullanır. Küçük, iki renkli bir fincan, iki ayrı hatayı fark etmeyi kolaylaştırır: buharın mercan rengini kaybetmek ve kulptaki açıklığı doldurmak. Bunların hiçbirini teşhis etmek için karmaşık bir illüstrasyon gerekmez.

UI kiti hazırlama kılavuzu, bir simge setini tutarlı hâle getirmenin daha geniş kapsamlı çalışmasını ele alır. Buradaki soru ise kabul edilmiş tek bir SVG’nin SwiftUI Image bileşenine nasıl ulaştığıdır.

Görünür kontrol noktaları olan küçük bir kaynak hazırlayın

Bu özgün örneği CupMark.svg olarak kaydedin:

<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>

Fincan turkuaz, iki buhar çizgisi mercan rengindedir ve kulpun içindeki alan boştur. Bu üç özelliği inceleme listenizde tutun. SVG metin, harici görsel, filtre veya betik içermez; bu nedenle katalog denemesi için küçük bir başlangıç dosyası sunar.

Kendi görseliniz için içe aktarmadan önce kaynağı inceleyin. Fazla boş tuval alanı, görünüm doğru boyutlara sahip olsa bile simgeyi küçük gösterir. Beyaz bir arka plan dikdörtgeni, şablon siluetinin parçası olur. Gömülü bir fotoğraf, çevresindeki yollardan farklı türde bir içerik olarak kalır; gömülü raster kontrolü bunları ayırt etmenize yardımcı olur.

Düzenlenebilir ana dosyayı, uygulamanın teslim kopyasının dışında tutun. Simge yazı içeriyorsa hedeflenen yazı tipi veya yola dönüştürme stratejisini ana dosyada netleştirin; SVG yazı tipi değişikliği iş akışına bakın. SwiftUI metin stilini değiştirmek, görselin içindeki yazıları kontrol etmenin yerine geçmez.

Normal bir görsel kümesi olarak ekleyin

Uygulamanın genellikle Assets.xcassets adlı varlık kataloğunu açın. Yeni bir görsel kümesi ekleyip CupMark adını verin. SVG’yi uygun görsel alanına sürükleyin. Apple’ın Managing assets with asset catalogs kılavuzu, kümeler oluşturmayı, kaynakları içe aktarmayı ve Attributes inspector üzerinden varyasyonlar sağlamayı açıklar.

Bu örnek için görsel kümesi kullanın. Yalnızca kaynak .svg ile bitiyor diye sembol görseli iş akışını seçmeyin.

İçe aktardıktan sonra katalog önizlemesini ve varsa derleme tanılarını kontrol edin. Kataloğun, onu kullanacak uygulama hedefine ait olduğunu doğrulayın. Varlık kurulumunuz platform veya görünüm varyasyonları içeriyorsa önizlemenin her yapılandırmayı temsil ettiğini varsaymak yerine hedeflenen görselin ilgili yapılandırmada bulunduğundan emin olun.

CupMark adı, aşağıda kullanılan görsel kaynak adıdır. Bir indirme URL’si veya tasarım klasörünüzdeki özgün SVG’nin yolu değildir. Apple’ın Image başlatıcısı, bir bundle içindeki kaynağı adıyla arar; varsayılanı ana bundle’dır. Görseliniz başka bir kaynak bundle’ına aitse bu bundle’ı açıkça belirtin.

Teslim notlarında dosya adı ile varlık adı arasındaki ayrımı koruyun. Ekip arkadaşınız özgün tasarım dosyasının adını değiştirmeden varlık kümesini yeniden adlandırabilir; kod, gerçekten yüklediği kaynak adını izlemelidir.

Özgün (original) ve şablon (template) görüntüleme modlarını karşılaştırın

CupMark görsel kümesini ekledikten sonra bu görünümü kullanın:

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()
    }
}

Soldaki örnek, açıkça özgün görüntüleme ister. Sağdaki örnek, şablon görüntüleme ister ve ön plan stili olarak maviyi sağlar. Apple’ın Image.TemplateRenderingMode belgesi, şablon modunu saydam olmayan piksellerin ön plan rengini alması üzerinden tanımlar. Bu bir siluet uygulamasıdır; yalnızca tek bir SVG yolunu yeniden renklendirme komutu değildir.

Fincan için bu, sağdaki sürümün hem buharının hem fincanının mavi olması gerektiği anlamına gelir. Mercan/turkuaz ayrımı bilinçli olarak ortadan kalkar. Kulp açıklığı boş kalmalıdır. Uygulamanızda buharın fincandan bağımsız değişmesi gerekiyorsa tek bir şablon görselinden yol bazında biçimlendirme beklemek yerine bu parçaları ayrı ayrı sunan bir aktarım yapısı seçin.

Değiştiriciler, boyutlandırma kararını da açık hâle getirir. resizable(), görselin yeniden boyutlandırılmasını etkinleştirir; scaledToFit() ise 48 mantıksal nokta boyutundaki çerçeve içinde en-boy oranını korur. Görünümün çerçevesi ve görselin kendi tuvali ayrı sınırlardır: SVG içindeki fazladan boşluk hâlâ kaynağın bir parçasıdır.

Bu, projenizde denemeniz için belgelere dayanan bir örnektir; SwiftUI’ın kendi görüntüleme sistemiyle gerçekleştirilmiş bir test değildir. İşareti kullanmayı planladığınız en küçük boyut da dâhil olmak üzere gerçek derlenmiş uygulamayı kontrol edin. Net bir 48 noktalık önizleme, her iki buhar çizgisinin 16 noktada da işe yarayacağını kanıtlamaz.

Dosyayı değiştirmeden önce görünen sonucu teşhis edin

Eksik görsel, değişen renk ve küçük boyutta kötü görünen siluet farklı çözümler gerektirir.

Her seferinde tek bir katmanı değiştirin. Kaynakta doğru açıklık zaten varsa vektörleştirmeyi yeniden yapmak yanlış yazılmış varlık adını düzeltmez. Kaynak arama çalışıyor ama şablon modu renk ayrımlarını kaldırıyorsa SVG’ye daha fazla renk eklemek seçilmiş görüntüleme modunu değiştirmez.

Görünür metnin yanındaki bir simge için erişilebilir adını kontrolün tam bağlamında inceleyin. Örnek, karşılaştırma görsellerinin her biri için bir açıklama sağlar. Zaten adlandırılmış bir kontrolün yanındaki dekoratif tekrar, farklı bir erişilebilirlik yaklaşımı gerektirebilir; karşılaştırma görünümünün etiketlerini her konuma düşünmeden taşımayın.

Çalışma zamanı SVG’sini ve SF Symbols’ı ayrı kararlar olarak ele alın

Adlandırılmış bir katalog görseli, herhangi bir SVG XML içeriğini getirip ayrıştırmak için bir API değildir. Dosya, uygulama derlendikten sonra geliyorsa bu girdiyi açıkça işleyen bir görüntüleyici seçin. Örneğin SVGView projesinin README dosyası, SwiftUI ile yazılmış bir SVG ayrıştırıcısını ve görüntüleyiciyi tanımlar. Dosyalarınızın kullandığı gerçek SVG özelliklerini değerlendirin; paketin geniş destek hedefi, tüm girdi setinizin doğru görüntülendiğini kanıtlamaz.

Yükleme, hata ve desteklenmeyen dosya davranışını bu çalışma zamanı özelliğinin parçası olarak tutun. İhtiyacınız varlık kataloğu yöntemiyle zaten karşılanan statik bir görselse yalnızca eski bir yanıt SwiftUI’ın SVG görsellerini kullanamadığını söylüyor diye paket eklemeyin.

Özel SF Symbols’ın kaynak gereksinimleri farklıdır. Apple, sembol varyantlarını ve hizalama bilgilerini de içeren şablona dayalı oluşturma ve doğrulama iş akışını belgeler. Normal bir fincan SVG’si, görsel kümesine yerleştirilerek bu özellikleri kazanmaz. Uygulama sembol davranışına ihtiyaç duyduğunda bu iş akışını kullanın ve gerekli şablon yapısını koruyun.

Platform teslim biçimlerini bağımsız olarak kontrol etmek faydalıdır. Aynı görsel Android’e de gönderilecekse VectorDrawable teslim kılavuzunu izleyin; bir platformun içe aktarıcısının kabul etmesi, diğerinin de kabul edeceğini kanıtlamaz.

Simgeniz yalnızca PNG olarak mevcutsa

Düzenlenebilir kaynak kayıpsa ve PNG basit bir simgeyse PerfectVector’ın PNG’den SVG’ye dönüştürücüsü, bu iş akışı için bir görsel adayı hazırlamanıza yardımcı olabilir. Simgeye göre kırpın, önizlemede kaybolan açıklıkları, birleşmiş ayrıntıları ve istenmeyen arka plan şekillerini inceleyin, ardından özgün görselle karşılaştırın. Kabul ettiğiniz SVG’yi indirin ve aynı görsel kümesi ve görüntüleme modu kontrollerinden geçirin.

Özgün vektör mevcutsa onu kullanın. Görünüşlerini daha iyi koruyorsa fotoğrafları ve yoğun efektli görselleri raster olarak tutun. Vektörleştirme geometriyi hazırlar; Xcode kataloğunu derlemez, kaynak bundle’ınızı seçmez veya gerekli varyantlara sahip bir SF Symbols şablonu üretmez.

Varlığı teslim etmeden önce katalog adını, amaçlanan özgün/şablon davranışını, en küçük görsel boyutunu ve yeniden üretmek için kullanılan kaynak dosyayı kaydedin. Uygulamada açık ve koyu arka planları ve desteklenen görünüm varyasyonlarını test edin. Blogun görsel kılavuzları, bu teslim adımından önce gelen kaynak hazırlığını ele alır.

Sık sorulan sorular

SwiftUI, varlık kataloğundan bir SVG kullanabilir mi? Evet. Xcode, SVG görsel varlıklarını destekler. Dosyayı normal bir görsel kümesine ekleyip adlandırılmış kaynağı Image ile yükleyin. Bunu herhangi bir çalışma zamanı SVG dosyasına destek olarak görmek yerine dağıtım hedefini ve gerçek katalog derlemesini doğrulayın.

SVG’m neden tek renge dönüştü? Görüntüleme modunu kontrol edin. Şablon görüntüleme, görünür görseli ön plan renginde bir siluet olarak kullanır. Görselin özgün renk ayrımlarına ihtiyacınız varsa özgün görüntüleme kullanın.

Image, bir web URL’sinden SVG yükleyebilir mi? Adlandırılmış Image başlatıcısı, kaynak araması yapar; URL tabanlı bir SVG ayrıştırıcısı değildir. Çalışma zamanı SVG dosyaları, gerçek girdilerinizle doğruladığınız uygun bir görüntüleme ve yükleme iş akışı gerektirir.

SVG görsel kümesi, özel bir SF Symbol ile aynı şey midir? Hayır. Özel semboller, gerekli yapıyı, varyantları, hizalama bilgilerini ve doğrulamayı içeren bir şablon kullanır. Normal bir SVG görsel kümesi bu sembol özelliklerini otomatik olarak sağlamaz.

Kaynaklar

1. Apple — Xcode 12 Release Notes — SVG görsel varlığı desteği ve belgelenmiş vektör koruma dağıtım hedefleri.
2. Apple — Managing assets with asset catalogs — varlık kümeleri, içe aktarma alanları ve varyasyonlar.
3. Apple — Image init(_:bundle:) — adlandırılmış kaynak ve bundle araması.
4. Apple — Image.TemplateRenderingMode — özgün ve şablon görüntüleme modları.
5. Apple — resizable(capInsets:resizingMode:) — açıkça belirlenen görsel yeniden boyutlandırma davranışı.
6. Apple — scaledToFit() — en-boy oranını koruyarak sığdırma.
7. Apple — Creating custom symbol images for your app — özel sembol şablonları, varyantları ve doğrulama.
8. Exyte — SVGView — SwiftUI için ayrı bir SVG ayrıştırma ve görüntüleme çözümü.

Seti içe aktarmadan önce tek bir simgeyi hedeflenen boyutunda ve renk modunda kontrol edin. Yalnızca PNG kaldıysa bir SVG adayı hazırlayın, açıklıklarını ve arka planını inceleyin, ardından kabul ettiğiniz dosyayı derlenmiş uygulamada doğrulayın.