PNG’den Android VectorDrawable’a: İçe aktarma kontrolü

Android Studio, PNG’yi izleyerek vektör yollarına dönüştürmez. Vector Asset Studio, SVG veya PSD dosyalarını içe aktarır ve desteklenen geometriyi VectorDrawable XML’e dönüştürür. Bu nedenle güvenilir bir PNG iş akışı iki aşamadan oluşur: pikselleri izleyerek gerçek bir SVG oluşturun, ardından bu SVG’yi Android Studio’ya aktarın.

Doğrudan PNG’den VectorDrawable’a dönüştüren bir araç her iki aşamayı birleştirebilir. Basit bir simge için kullanışlı olabilir, ancak aynı kontroller yine de geçerlidir. Çıktının yollar içerdiğini, kaynakla eşleştiğini, amaçlanan görüntü alanını kullandığını ve Android içe aktarıcısının temsil edemediği özelliklerden kaçındığını doğrulayın.

Flutter arayüzü için Flutter SVG varlık iş akışını izleyin. Bu akış, SVG’yi yerel Android VectorDrawable XML’e dönüştürmek yerine flutter_svg aracılığıyla tanımlar ve görüntüler.

.NET MAUI projesinde kaynağı, derleme çıktısını ve görüntüleme boyutunu kontrol etmek için MAUI görsel kaynağı kontrol listesini kullanın. Yerel Android VectorDrawable içe aktarma adımlarını uygulamadan önce o projenin görsel işleme akışını izleyin.

Kısa iş akışı

1. Fotoğraf veya doku yerine temiz, simge niteliğinde bir PNG ile başlayın.
2. İzleyerek SVG’ye dönüştürün ve dosyanın gömülü bir PNG değil, düzenlenebilir yollar içerdiğini doğrulayın.
3. Silueti değiştirmeden istenmeyen şekilleri ve fazla düğümleri sadeleştirin.
4. SVG’yi Android Studio’nun Vector Asset Studio aracıyla içe aktarın.
5. Oluşturulan XML’de görüntü alanı, yol, dolgu, kontur, gradyan ve kırpma davranışını inceleyin.
6. Çizilebilir kaynağı, uygulamanızın desteklediği en eski Android sürümünde gerçek boyutuyla test edin.

Doğrudan dönüştürücü ile SVG yolu arasında seçim yapın

Her iki yol da aynı hedefe ulaşır, ancak farklı kontrol noktaları sunar.

Ara adım olarak SVG kullanan yolun denetlenmesi genellikle daha kolaydır. Android Studio dosyayı yeniden dönüştürmeden önce izleme sonucunu PNG ile karşılaştırabilir, şekilleri tek tek inceleyebilir, delikleri onarabilir ve yol kalabalığını azaltabilirsiniz.

Doğrudan dönüştürücüler kendiliğinden yanlış bir seçim değildir. Örneğin SVG2Vector şu anda SVG ve diğer girdilerin yanında PNG’den VectorDrawable’a dönüştürme özelliğini de tanıtıyor. XML çıktısını tamamlanmış bir varlık yerine aday olarak değerlendirin: Android Studio’da önizleyin, yolları inceleyin ve aşağıda açıklanan cihaz kontrollerini aynen uygulayın (SVG2Vector).

Aşama 1: PNG’yi gerçek SVG yollarına dönüştürün

Elinizdeki en temiz kaynakla başlayın. Belirgin kenarları ve sınırlı renk paleti olan düz simgeler güçlü adaylardır. Fotoğraflar, yumuşak gölgeler, parlamalar ve dokular, kullanışlı Android varlıklarına dönüşmeden çok sayıda küçük şekil üretebilir.

PNG’nin özgün çözünürlüğünü kullanın. Bulanık bir simgeyi büyütmek, eksik kenar bilgisini değil, piksel sayısını artırır. İstemeden eklenmiş arka plan dikdörtgenlerini kaldırın ve vektörleştirmeye başlamadan önce varlığın tek renkli, çok renkli veya gradyan tabanlı olmasına karar verin.

Pikselleri izleyerek vektörleştirin

Kaynağı PerfectVector’ın PNG’den SVG’ye dönüştürücüsüne yükleyin veya sonucu incelemenize olanak tanıyan başka bir vektörleştirme aracı kullanın. Kaynak bir telefondaysa ve önce standart bir SVG’ye ihtiyacınız varsa Android telefonda SVG iş akışını izleyin. SVG’yi PNG ile hedeflenen arayüz boyutunda karşılaştırın, ardından bir vektör düzenleyicide açıp şekilleri seçin.

Şunları kontrol edin:

• temiz bir dış siluet;
• korunmuş delikler ve negatif boşluklar;
• beklenen sayıda renk bölgesi;
• istenmeyen beneklerin veya arka plan kutusunun olmaması;
• yoğun nokta zincirleri içermeyen pürüzsüz eğriler;
• çizimi doğru çerçeveleyen bir viewBox.

.svg uzantısı, izleme yapıldığını kanıtlamaz. W3C gömülü içerik belirtimine göre SVG, <image> öğesi aracılığıyla raster içerik barındırabilir. Çizim tek bir dikdörtgen olarak seçiliyorsa veya çok yakınlaştırıldığında pikselli görünüyorsa Android Studio’ya geçmeden önce gömülü raster teşhisini uygulayın.

Yalnızca fayda sağladığı yerlerde sadeleştirin

Yol karmaşıklığı önemlidir; çünkü Android’in oluşturulan geometriyi ayrıştırması ve çizmesi gerekir. Her durum için geçerli bir hedef düğüm sayısı yoktur. Sıkışık onlarca nokta içeren basit bir eğri incelemeyi hak eder; düzensiz çizilmiş bir kenarın ise gerçekten daha fazla noktaya ihtiyacı olabilir.

Sonucu kaynakla karşılaştırarak yalıtılmış parçaları kaldırın ve belirgin nokta zincirlerini sadeleştirin. Temizleme köşeleri değiştiriyor veya küçük delikleri kapatıyorsa işlemi geri alın. Çok fazla düğüm içeren SVG’ler hakkındaki rehber, yararlı ayrıntıyı yol kalabalığından nasıl ayıracağınızı açıklar.

İki dönüşüm, üç kontrol

Aşama 2: SVG’yi Android Studio’ya aktarın

Android’in güncel Vector Asset Studio iş akışı yerel bir SVG veya PSD dosyasını kabul eder, önizler ve XML biçiminde bir vektör çizilebilir kaynak oluşturur (Android Developers).

1. Project penceresinde res klasörüne sağ tıklayın.
2. New > Vector Asset seçeneğini seçin.
3. Varlık türü olarak Local file (SVG, PSD) seçeneğini seçin.
4. SVG’yi seçin ve önizlemede hata veya görünür değişiklik olup olmadığını inceleyin.
5. Kaynak adını ve hedeflenen boyutu ayarlayın.
6. Next ile devam edin, hedef konumu doğrulayın ve Finish seçeneğini seçin.

Oluşturulan kaynak, uygulamanın drawable kaynakları altında XML olarak yer alır. İncelenmiş SVG’yi düzenlenebilir ana dosya olarak saklayın. Varlığın görünümünü daha sonra değiştirmeniz gerekirse birbirinden bağımsız iki sürümü elle yönetmek yerine SVG’yi düzenleyin ve çizilebilir kaynağı yeniden oluşturun.

SVG’den VectorDrawable’a aktarımda neler korunur?

VectorDrawable tam kapsamlı bir SVG görüntüleyici değildir. Vector Asset Studio belirli bir alt kümeyi destekler; dolayısıyla bir SVG tarayıcıda doğru görünse de içe aktarılırken değişebilir.

Bu sınırlar, güncel Vector Asset Studio uyumluluk tablosundan gelir. İçe aktarıcı ayrıca yalnızca ortalanmış konturların desteklendiğini belirtir. Kaynak iç veya dış kontur kullanıyorsa içe aktarmadan önce konturu dolgulu bir şekle dönüştürün ya da kenarı yeniden çizin.

Gradyanlar için ek bir sürüm kontrolü gerekir. VectorDrawable API belgeleri, fillColor ve strokeColor için gradyan veya renk durumu listesi değerlerini API düzeyi 24’ten itibaren tanımlar. Ayrıca evenOdd ve nonZero fillType seçeneklerini de API düzeyi 24’ten itibaren belgeler (VectorDrawable API reference). Uygulamanız daha eski sürümleri destekliyorsa Android Studio önizlemesinin meseleyi çözdüğünü varsaymak yerine derlemenizin kullandığı uyumluluk yöntemini aynen test edin.

Kabul etmeden önce oluşturulan XML’i okuyun

VectorDrawable XML’i elle yazmanız gerekmez, ancak hızlı bir yapısal inceleme birçok içe aktarma sorununu yakalar.

Genişlik, yükseklik ve görüntü alanı

Kök <vector> öğesi, görüntülenen boyutu çizim koordinatlarından ayırır:

• android:width ve android:height, genellikle dp cinsinden varsayılan çizilebilir kaynak boyutlarıdır;
• android:viewportWidth ve android:viewportHeight, yolların kullandığı koordinat uzayını tanımlar.

Yalnızca genişliği ve yüksekliği değiştirmek aynı geometriyi ölçekler. Görüntü alanını değiştirmek ise yol koordinatlarının görüntülenen alana nasıl eşlendiğini değiştirir. Simge kırpılmış, fazla boşluklu veya esnetilmiş görünüyorsa bu dört değeri SVG’nin viewBox değeri ve hedeflenen varlık boyutuyla karşılaştırın.

Yollar ve boyama

Her <path>, komutları SVG’nin d özniteliğiyle aynı genel yol sözdizimini izleyen android:pathData içerir. Varsa fillColor, strokeColor, strokeWidth, çizgi uçları, çizgi birleşimleri ve fillType değerlerini inceleyin.

Tanımadığınız yol komutlarını silerek optimizasyon yapmayın. Önce önizlemeyi kaynakla karşılaştırın, ardından şeklin daha kolay incelenebildiği ana SVG dosyasında sadeleştirme yapın.

Gruplar ve kırpma

Gruplar öteleme, ölçek, dönüş ve dönüş merkezi değerleri taşıyabilir. <clip-path> görünür geometriyi sınırlar. Sonuç kaymışsa veya maskelenmiş bir bölge kayboluyorsa grup hiyerarşisini inceleyin ve kaynak SVG’nin dönüşümleriyle kırpma yapısıyla karşılaştırın.

Çizilebilir kaynağı uygulamanın kullanacağı yerde test edin

İçe aktarma önizlemesi Android Studio’nun dosyayı ayrıştırdığını kanıtlar. Varlığın çalışma zamanında doğru olduğunu kanıtlamaz.

Bu kabul kontrol listesini kullanın:

• Çizilebilir kaynak, normal arayüz boyutunda PNG’nin amaçlanan siluetiyle eşleşir.
• Delikler, harf içi boşluklar ve örtüşen bölgeler doğru kalır.
• Düz renk dolgular ve konturlar hedeflenen renkleri kullanır.
• Gradyanlar desteklenen en eski Android sürümünde doğru görüntülenir.
• Görüntü alanı hedeflenen boşlukları ve en boy oranını korur.
• Simge, uygulamanın kullandığı açık, koyu, devre dışı ve renk uygulanmış durumlarda okunabilir kalır.
• XML, istemeden oluşmuş parçalar veya açıkça aşırı miktarda yol verisi içermez.
• Varlık yalnızca içe aktarma önizlemesinde değil, gerçek bileşende test edilir.
• Özgün PNG ve düzenlenebilir ana SVG dosyası arşivde saklanır.

Desteklediğiniz en düşük sürümü temsil eden en az bir emülatör veya cihazda gerçek dp boyutuyla test edin. Uygulanan rengi değiştiren durumları veya temaları da kontrol edin. Teknik olarak geçerli bir yol bile boşlukları, görsel ağırlığı veya renk varsayımları çevresindeki simge kümesinden farklı olduğunda sorun çıkarabilir.

Bir simge ailesinin tamamını dönüştürüyorsanız önce bu süreci temsili bir örneğe uygulayın. Arayüz kiti dönüştürme iş akışı, ortak görüntü alanlarını, optik boyutu, renk davranışını ve küme düzeyindeki teslim kontrollerini kapsar.

PNG’yi ne zaman korumalısınız?

VectorDrawable en iyi basit simgeler ve çizimler için çalışır. Android rehberi, birçok uygulama açılış görseli dahil ayrıntılı grafikler için raster varlıkların daha uygun olabileceği konusunda uyarır. Ayrıca bir vektör çizilebilir kaynağın ilk yükleme maliyetinin raster görselden yüksek olabileceğini belirtir ve uzun çizim sürelerini önlemek için vektör varlıkları 200 × 200 dp veya daha küçük tutmayı önerir (Android Developers).

Kaynak aşağıdakilere dayanıyorsa raster görseli koruyun veya yeniden tasarlayın:

• fotoğraf ayrıntıları;
• yumuşak doku, bulanıklık veya karmaşık gölgeler;
• çok sayıda küçük renk bölgesi;
• görünümü belirleyen, desteklenmeyen bir efekt;
• XML’in incelenmesini ve bakımını zorlaştıracak kadar yoğun geometri.

Amaç her PNG’yi değiştirmek değildir. Amaç, ayrıntılı bir resmi maliyetli bir yol yığınına çevirmeden, ölçeklenebilir yol geometrisinin Android varlığını daha küçük, daha net veya temaya uyarlamayı daha kolay hale getirdiği yerlerde VectorDrawable kullanmaktır.

PerfectVector ile bu süreç nasıl ilerler?

PerfectVector ilk dönüşümü gerçekleştirir. Uygun bir simge için PNG’yi SVG’ye dönüştürün, izlenerek oluşturulan şekilleri kaynakla karşılaştırın ve düzenlenebilir ana dosya olarak saklamak istediğiniz SVG’yi indirin. Ardından bu dosyayı Vector Asset Studio aracılığıyla içe aktarın ve oluşturulan XML’i denetleyin.

Sonucu tüm zincir üzerinden değerlendirin:

1. İzleme, kaynak siluetini ve deliklerini korudu mu?
2. SVG şekilleri düzenlenebilir mi ve gömülü raster içerikten arınmış mı?
3. Android Studio gerekli dolguları, gradyanları, kırpmaları ve dönüşümleri içe aktarıyor mu?
4. Çizilebilir kaynak gerçek boyutunda ve minimum API düzeyinde doğru görüntüleniyor mu?

Temiz bir SVG aktarımı iyileştirir, ancak desteklenmeyen Android özelliklerini çalışır hale getirmez. Hedef ortam görünümü aslına uygun biçimde yeniden üretemiyorsa tasarımı sadeleştirin veya PNG’yi koruyun.

Sık sorulan sorular

Android Studio bir PNG’yi doğrudan VectorDrawable’a dönüştürebilir mi? Hayır. Güncel Vector Asset Studio yerel SVG veya PSD dosyalarını içe aktarır; PNG dosyalarını aktarmaz. Önce PNG’yi izleyerek gerçek bir SVG’ye dönüştürün veya doğrudan bir dönüştürücü kullanıp oluşan XML’i Android Studio’da denetleyin.

SVG her zaman gerçek bir vektör müdür? Hayır. SVG, image öğesiyle raster içerik gömebilir. Dosyayı bir vektör düzenleyicide açın veya işaretlemesini inceleyin ve içe aktarmadan önce amaçlanan çizimin yollardan veya diğer vektör şekillerinden oluştuğunu doğrulayın.

SVG gradyanları Android VectorDrawable’da çalışır mı? Vector Asset Studio doğrusal, radyal ve açısal gradyanları destekler, ancak çalışma zamanı desteği oluşturulan XML’e ve Android sürümü stratejinize bağlıdır. VectorDrawable API belgeleri gradyan dolgu ve kontur renklerini API düzeyi 24’ten itibaren tanımlar; bu yüzden varlığı uygulamanızın desteklediği en eski sürümde test edin.

İçe aktarmadan sonra delikler, maskeler veya metin neden değişti? İçe aktarıcı sınırlı bir SVG alt kümesini destekler. Dolgu kuralları sürümü dikkate alan testler gerektirir, kırpma sınırlıdır ve metin desteklenmez. Gerekli metni yollara dönüştürün, kırpma yapılarını sadeleştirin ve çizilebilir kaynağı kabul etmeden önce Android önizlemesini SVG ile karşılaştırın.

Android uygulamasındaki her PNG, VectorDrawable XML’e dönüştürülmeli mi? Hayır. Basit simgeler ve çizimler en güçlü adaylardır. Bilinçli bir yeniden çizim daha basit yol geometrisi üretmedikçe fotoğrafları, yoğun dokulu görselleri, karmaşık efektleri ve aşırı ayrıntılı çizimleri raster varlıklar olarak tutun.

Kaynaklar

1. Android Developers — Add multi-density vector graphics — Vector Asset Studio’nun SVG ve PSD içe aktarma iş akışını, desteklenen SVG alt kümesini, performans uyarılarını ve oluşturulan çizilebilir kaynakları belgeler.
2. Android Developers — VectorDrawable API reference — Görüntü alanı, boyama, dolgu kuralı ve API düzeyi davranışı dahil vector, path, group ve clip-path XML özniteliklerini tanımlar.
3. W3C — SVG Embedded Content — SVG’nin image öğesi aracılığıyla raster görsel içeriği barındırabileceğini doğrular.
4. Inkscape Manual — Tracing an Image — Raster pikselleri izlemek ile özgün bitmap üzerinde çalışmak arasındaki farkı açıklar.
5. SVG2Vector — PNG to VectorDrawable conversion — İş akışı karşılaştırmasında ele alınan güncel doğrudan dönüştürücü yolunu sunar.

---

Üretimde kullanılacak bir simgeyi test etmeye hazır mısınız? PNG’yi SVG’ye dönüştürün, yolları inceleyin, ardından gözden geçirilmiş dosyayı Android Studio’ya aktarın. Çizilebilir kaynağı ancak görüntü alanı, renkleri, delikleri ve çalışma zamanı görüntülemesi kontrol listesini geçtiğinde saklayın.