.NET MAUI'de SVG: SVG'yi saklayın, PNG adına başvurun

.NET MAUI'nin uygulamayla paketlenen görüntü iş akışında SVG kullanmak için SVG'yi projenizde tutun ve XAML veya C# içinde oluşturulan PNG adına başvurun. MAUI, derleme sırasında vektör kaynağını işler. Bu nedenle, eklediğiniz dosya compass.svg olsa bile compass.png dosyasına işaret eden bir Image doğru olabilir. Microsoft'un proje görüntüleri rehberi bu dönüşümü belgeler.

Bu, dosya adını açıklar; ancak geriye bir tasarım sorusu kalır: MAUI hangi boyutta görüntü üretmeli ve sonrasında neleri incelemelisiniz? Küçük bir pusula amblemini kaynak, proje meta verileri ve görüntüleme bildirimi boyunca takip edin.

Kaynağı derleme boyunca takip edin

Düzenlenebilir SVG ile paketlenen görüntünün görevleri farklıdır. Daha sonra şekillerini, boşluklarını veya renklerini değiştirebilmek için kaynağı saklayın. Onu gösteren görünümde oluşturulan adı kullanın.

Image denetimi belgeleri, uygulama paketine giren hedef yoğunluğa uygun görüntüleri ve işletim sisteminin uygun çözünürlüğü seçmesini açıklar. Bir SVG ana dosyası saklamak, bu özel iş akışının görünüme canlı bir SVG belgesi sunduğu anlamına gelmez.

Sınırları açıkça belirlenmiş küçük bir SVG ekleyin

Bu özgün örneği Resources/Images/compass.svg olarak kaydedin:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <circle cx="48" cy="48" r="34" fill="none" stroke="#173e52" stroke-width="8"/>
  <path d="M58 28L52 52L28 58Z" fill="#ed765e"/>
</svg>

Halka, ortasını saydam bırakır ve mercan renkli ibre ayrı bir şekildir. Bu ayrıntılar, içe aktardıktan sonra kontrol edebileceğiniz somut noktalar sunar. Belirtilen boyutlar ve kare viewBox, amaçlanan çerçevelemeyi de açıkça gösterir. Vektör geometrisinin bir SVG kapsayıcısına gömülü bitmap'ten nasıl ayrıldığını öğrenmek için SVG dosyası rehberine bakın.

Projenizde dosyanın derleme eyleminin MauiImage olduğunu doğrulayın. Microsoft, olağan konum olarak Resources/Images klasörünü belgeler. XML eklemeden önce mevcut proje öğelerini inceleyin: projeniz bu klasörü zaten bir joker karakterle dahil ediyor olabilir. Proje görüntüsü kurulumu, yerleşimi ve derleme eylemini açıklar.

Mevcut bir öğeyi bir kez güncelleyin

Mevcut bir MauiImage joker karakteri pusula dosyasını zaten dahil ediyorsa bu meta veri güncellemesini o dahil etme işleminden sonra yerleştirin:

<ItemGroup>
  <MauiImage Update="Resources\Images\compass.svg" BaseSize="48,48" />
</ItemGroup>

Update, zaten var olan bir öğenin meta verilerini değiştirir. Eksik dosyayı öğe listesine eklemez. Projenizde eşleşen bir dahil etme işlemi yoksa dosyayı MauiImage derleme eylemiyle veya açık bir Include ile bir kez ekleyin. Microsoft'un MSBuild Item başvurusu bu işlemleri birbirinden ayırır.

Böylece cazip görünen bir düzeltmeden kaçınırsınız: eksik bir görüntünün nedenini araştırırken tekrar tekrar Include girdileri eklemek. Önce dosyanın dahil edilip edilmediğini belirleyin, ardından meta verilerini değiştirin.

PNG'ye başvurun ve görüntüleme alanını belirleyin

Bu bildirimi mevcut bir MAUI sayfasının veya yerleşiminin içine yerleştirin:

<Image Source="compass.png"
       WidthRequest="48"
       HeightRequest="48"
       Aspect="AspectFit"
       SemanticProperties.Description="Compass" />

.png uzantısı bilinçli bir tercihtir. Genişlik ve yükseklik, kare bir görüntüleme alanı ister; AspectFit, görüntünün tamamının bu alan içinde görünür kalmasını sağlar. İllüstrasyonunuz dikdörtgense onu kareyi dolduracak şekilde esnetmek yerine ona uygun bir görüntüleme alanı kullanın. Microsoft'un Image ölçekleme başvurusu, sığdırma, kırpma ve esnetme arasında ayrım yapar.

Pusula kodu özgün bir kurulum örneğidir; cihazda görüntülemenin kaydedilmiş bir testi değildir. Kendi hedef projenizde derleyin ve ortaya çıkan görünümü inceleyin. Tek başına doğru dosya adı, sizin grafiğinizin amaçlandığı gibi görüntülendiğini gösteremez.

BaseSize ve yerleşim boyutu farklı sorunları çözer

BaseSize="48,48", MAUI'nin yoğunluğa özgü görüntüler türettiği temel boyutları sağlar. Açık bir temel boyut belirtilmediğinde MAUI, SVG'nin kendi boyutlarını kullanır. Microsoft, her iki kuralı da Resize an image bölümünde belgeler.

Bu örnekte kaynak çizim 96 × 96 koordinat alanı kullanırken istenen temel boyut ve görünüm 48 × 48'dir. Bu sayılar bilinçli tasarım tercihleridir; bir derlemeden ölçülmüş çıktı boyutları değildir. Halka ölçeklendiğinde oranlarını korumalıdır.

Daha sonra aynı amblemi çok daha büyük bir görünümde kullanırsanız derleme boyutunu yeniden değerlendirin ve o kullanımı da inceleyin. WidthRequest değerini değiştirmek, kaynak grafiği veya derleme meta verilerini düzenlemez. Tersine, BaseSize değerini değiştirmek de SVG'nin içindeki boş kenar paylarını kaldırmaz. Doğru boyutlandırılmış bir görünümde amblemin kendisi fazla küçük görünüyorsa kaynakta çizim sınırlarını daraltın.

Resize="false" ayarını genel bir keskinlik çözümü olarak kullanmayın. Bu ayar, bu süreçte vektör görüntüsünün yeniden boyutlandırılmasını devre dışı bırakır. Yalnızca amaçladığınız davranış buysa belgelenmiş yeniden boyutlandırma seçeneğini izleyerek seçin.

Eksik veya beklenmedik görüntüyü sırayla kontrol edin

1. Dosya adını ve proje öğesini doğrulayın. compass.svg gibi küçük harfli bir ad kullanın ve aynı adlı başka bir görüntü olup olmadığını kontrol edin. Microsoft'un adlandırma kuralları, benzersiz görüntü adları ve Android uyumlu karakterler gerektirir.
2. Görünümün kaynağını kontrol edin. Uygulamayla paketlenen SVG iş akışında XAML veya C# içinde compass.png kullanın.
3. Amaçlanan görüntüleme alanını temel boyutla karşılaştırın. Görünüm boyutu değişikliği ile derleme boyutu değişikliği farklı yerlerde yapılır.
4. Grafiğin kendisini inceleyin. Halkanın ortası hâlâ açık mı? Mercan renkli ibre açıkça ayırt edilebiliyor mu? Amblem ortalanmış mı, yoksa kaynakta görünmeyen boşluklar onu yana mı itiyor?

Renk uygulamasını değiştiren görüntü meta verilerini de inceleyin. Proje görüntüleri rehberi, renklendirme ve arka plan rengi için TintColor ve Color özelliklerini belgeler. Görünümünü değiştirmek istemiyorsanız bu iki renkli örnekte bunları ayarlamayın. Saydam iç boşluğun kaybolduğunu fark etmenin daha kolay olduğu gerçek sayfa arka planında görüntüyü kontrol edin.

Çalışma zamanında SVG davranışı gerektiğinde

İndirilen SVG içeriği, etkileşimli yollar veya çalışma zamanındaki düzenlemeler için ayrı bir uygulama kararı gerekir. Yukarıdaki paketlenen görüntü talimatları, bu işler için destek bulunduğunu göstermez.

Örneğin Vapolia SVG örnek projesi, kendi SvgImage ve SvgImageSource denetimlerini ve gömülü kaynak kurulumunu belgeler. Bu, farklı bir yükleme sözleşmesidir. Eklemeye başlamadan önce görüntüleyicinin desteklediği özellikleri ve hedef platformları gerçek dosyanızla değerlendirin; normal bir Image bildiriminde dosya uzantısını değiştirmek bir görüntüleyici yüklemez.

Aynı grafik, Flutter'ın SVG görüntü iş akışında, SwiftUI'nin varlık kataloğunda ve Android VectorDrawable içe aktarımında da farklı kurulum gerektirir. Kaynak ana dosyasını yeniden kullanın, ardından her hedefin kurallarını izleyin.

Yalnızca PNG kaldığında bir vektör ana dosyası hazırlayın

Pusula veya logo yalnızca PNG olarak mevcutsa PerfectVector, MAUI projesine eklemeden önce düzenlenebilir SVG grafiği oluşturmanıza yardımcı olabilir. PNG'yi SVG'ye dönüştürün, ardından bir düzenleyicide halkanın iç boşluğunu, küçük ayrı parçaları ve aralıkları inceleyin. Daha sonraki boyut veya renk değişiklikleri için temiz bir ana dosya saklayın.

Vektörleştirme, MauiImage bildirimini düzeltmez veya paketlenen görüntü sürecini çalışma zamanında çalışan bir SVG ayrıştırıcısına dönüştürmez. Kaynak zaten düzenlenebilir bir SVG ise doğrudan proje yapılandırması veya çizim üzerinde çalışın. Fotoğraflar ve dokulu grafikler raster görüntüler olarak daha kullanışlı olabilir; yalnızca uygulama SVG kaynaklarını kabul ettiği için bunları vektörleştirmek, ayrıca bir grafik kararı vermeyi gerektirir.

Sık sorulan sorular

SVG eklediğim halde neden PNG'ye başvuruyorum? .NET MAUI, uygulamayla paketlenen SVG görüntü kaynaklarını derleme sırasında PNG'ye dönüştürür. SVG'yi projede tutun ve XAML veya C# içinden PNG dosya adına başvurun.

BaseSize, Image denetiminin boyutunu ayarlar mı? BaseSize, yoğunluğa özgü derleme görüntülerinin türetileceği temel boyutları belirler. Görünümün yerleşimi ve boyut istekleri, görüntüleme alanını kontrol eder.

BaseSize değerini değiştirmek için başka bir MauiImage Include eklemeli miyim? Dosyanın zaten dahil edilip edilmediğini, joker karakterli bir kalıpla dahil edilme olasılığını da hesaba katarak kontrol edin. Mevcut bir öğenin meta verilerini değiştirmek için Update kullanın; Include yalnızca öğenin eklenmesi gerektiğinde kullanılmalıdır.

Bu yöntem, uygulama derlendikten sonra indirilen bir SVG'yi yükler mi? Uygulamayla paketlenen görüntü iş akışı, çalışma zamanında SVG indirmeyi ve ayrıştırmayı kapsamaz. Bu gereksinim için bir çalışma zamanı görüntüleme yaklaşımı seçin ve deneyin.

Kaynaklar

1. Microsoft — Add images to a .NET MAUI app project — SVG'den PNG'ye işleme, görüntü öğeleri, dosya adları, temel boyut ve derleme meta verileri.
2. Microsoft — Image — Yerel görüntü başvuruları, hedef yoğunluk seçimi, görünüm boyutlandırması ve ölçekleme davranışı.
3. Microsoft — Item element (MSBuild) — Include ile öğe eklemek ve Update ile mevcut meta verileri değiştirmek arasındaki fark.
4. Vapolia — SVG samples — Ayrı bir çalışma zamanı SVG denetimi ve kaynak yükleme iş akışı.

Yalnızca raster biçiminde bulunan bir uygulama amblemiyle mi çalışıyorsunuz? PNG'nizi düzenlenebilir bir SVG'ye dönüştürün, iç boşluklarını ve aralıklarını kontrol edin, ardından bu ana dosyayı MAUI'ye ekleyip oluşturulan görüntüyü hedef uygulamanızda inceleyin.