PicSVG filtreleri: Edge, Internal ve Clean’i karşılaştırın
Üç PicSVG filtresini tek bir görüntüde karşılaştırın, her SVG'yi ayrı ayrı kaydedin ve hangi bölgelerin, açıklıkların ve arka plan düzenlemesinin istediğiniz tasarımınıza uygun olduğunu kontrol edin.
Bu sayfada
Aynı görüntüden kaydedilen sonuçları karşılaştırarak PicSVG filtrelerini seçin. Details'ı sabit tutun, adlandırılmış filtreyi tek tek değiştirin ve ihtiyacınız olan bölgeleri ve açıklıkları kontrol edin. Geometrik kontrolümüzde, Edge 2 sınırları vurguladı, Internal 1 iki doldurulmuş şekli korudu ancak bir üçgeni çıkardı ve Clean 1 arka plan işlemini değiştirdi. En kısa yol listesi otomatik olarak en kullanışlı sürüm değildi.
Efektlerden hiçbiri projenizin ihtiyaç duyduğu şekilleri korumuyorsa, PicSVG alternatif sayfasındaki PerfectVector ile ücretsiz başlayın ve önizlemenin silüetlerini, açıklıklarını ve renk bölgelerini kaynağınızla karşılaştırın. Sonucu düzenleyebilmeniz veya dışa aktarabilmeniz için önce sonucun kilidini açmanız gerekir. Aşağıdaki filtre iş akışı PicSVG'nin kendisinde tamamlanmıştır; hizmetler arasında çıktı kalitesi karşılaştırması yapmadık.
Tek kaynakla ve sabit bir Details ayarıyla başlayın
Bu kılavuz, test edilen sayfası kendisini Beta V3.4 olarak tanımlayan PicSVG web sitesini kullanır. Sıradan dönüştürücüsü yükleme, seçilebilir efektler ve SVG indirme olanağı sağlar. Site adları JPG, GIF ve PNG girişleri 4 MB'a kadardır. Orijinali dönüştürme ve koruma iznine sahip olduğunuz bir görseli kullanın.
Yüklenen kaynağımız orijinal bir 320 × 240 RGBA PNG'ydi: şeffaf bir merkezi, altın renkli bir üçgeni ve şeffaf bir arka plan üzerinde deniz mavisi bloğu olan lacivert dikdörtgen bir çerçeve. Web sitesinin ORİJİNAL YENİDEN BOYUTLANDIRILMIŞ önizlemesi bu şeffaf alanları beyaz olarak gösteriyordu. Karşılaştırmamız filtre seçimine yöneliktir. Şeffaflığın korunmasını test etmedik veya sitenin alfa işlemesini açıklayacak bir ara dosyayı incelemedik. Bu, birçok sorunun birbirinden ayrılmasını kolaylaştırıyor: Bir filtre her şekli koruyor mu, çerçevenin açık kalmasını mı sağlıyor, rengi koruyor mu veya arka plan geometrisi mi ekliyor?
- Kaynağı yüklemek için RESİM YÜKLE'yi kullanın.
- Filtreleri karşılaştırırken Details: Strong değerini koruyun.
- Görünür Filtreler açılır menüsünü kullanarak adlandırılmış bir filtre seçin ve görüntülenen etiketini onaylayın.
- Önizlemenin güncellenmesini bekleyin, inceleyin ve ardından DOWNLOAD SVG'i kullanın.
- Bir sonraki filtreyi seçmeden önce farklı bir yerel dosya adı kaydedin.
Edge 2, Internal 1 ve Clean 1 filtrelerini, hepsinde Strong ayarını kullanarak denedik. Bu deneyde Strong sabit tutuldu. Strong’u diğer Details değerleriyle karşılaştırmadık ve her küçük ayrıntıyı koruduğunu doğrulamadık. Normal dönüştürme işlemi Supermode kullanılmadan tamamlandı.
Edge 2, Internal 1 ve Clean 1'in koruduklarını karşılaştırın
İndirilen üç gerçek SVG, aynı kaynağın farklı işlemlerini üretti. İşaretlemelerini inceledik ve tutulan dosyaları yerel olarak oluşturduk. Bunlar, her görüntüyü tahmin eden tanımlardan ziyade, bu test referansına ilişkin gözlemlerdir.
| Details içeren filtre Strong | Bu kaynakta görünür sonuç | Verilecek karar |
|---|---|---|
| Edge 2 | Çerçeve, üçgen ve bloğun etrafında ince siyah sınır bantları; geniş iç mekanlar şeffaftır | Orijinal dolgulu bölgeler yerine sınır şekilli resimler isteyip istemediğiniz |
| Internal 1 | Merkezi açık ve siyah bloklu, siyah dolgulu bir çerçeve; altın üçgen yok | Çıkarılan açık renkli bölgenin kabul edilebilir olup olmadığı |
| Clean 1 | Üçgen sınırı da dahil olmak üzere dar şeffaf sınır bantlarıyla ayrılmış siyah arka plan ve iç bölgeler | Bu arka plan uygulamasının amaçlanan tasarıma ait olup olmadığı |
Her üç şekli de koruması gereken doldurulmuş bir versiyon için bu özel sonuçların hiçbiri otomatik koruyucu değildir. Internal 1 çerçevenin açıklığını korur ancak üçgeni kaybeder. Edge 2, dolgulu görünümü değiştirirken sınırlarını korur. Clean 1, yüklenen PNG'nin şeffaf bir arka plana ve çerçeve merkezine sahip olduğu siyah geometriyi içerir. Daha gösterişli görünen bir filtre adı değil, çizimin gereksinimlerine göre seçim yapın.
Yalnızca tam sayfa küçük resmini değerlendirmek yerine, birkaç belirleyici konumu yakınlaştırın. Bu kaynakta üçgen ve çerçeve merkezi, büyük siyah bloktan çok daha fazlasını ortaya koyuyor. Bir açıklık beklenmedik bir şekilde dolarsa SVG delik kılavuzu doldurma kurallarını ve çakışan şekilleri ayırt etmeye yardımcı olur. Geçmiş kontrolleri için şeffaf SVG kılavuzunu kullanın.
Filtreyi değiştirmeden önce her çeşidi kaydedin
edge2-strong.svg, internal1-strong.svg ve clean1-strong.svg gibi gerçek ayarları koruyan dosya adlarını kullanın. Onları el değmemiş kaynağın yanında tutun. PicSVG'nin sayfasında ayrıca sonuçları karşılaştırmak için yerel kayıtlı resimler alanı da açıklanmaktadır; Bu test için söz konusu alanı dayanıklı depolama alanı olarak ele almak yerine ayrı olarak tutulan SVG dosyalarını kullandık.
Çalışmamız sırasında seçilen filtre değiştirilirken indirme adresi yeniden kullanıldı. Bu nedenle her dosya, görünür filtre durumu altında hemen alındı. Yeniden kullanılan bir adres, hangi sonucu sakladığınızın güvenilir bir kaydı değildir; yerel dosya adı, ayarlar notu ve gerçek dosya içerikleri yararlı kayıtlardır.
Her üç dosya da yollar içeriyordu ve görüntü öğesi içermiyordu. Sayıları Edge 2 için yedi, Internal 1 için iki ve Clean 1 için beşti. Bu sayımlar kaydedilen dosyalar arasındaki yapısal farklılıkları gösterir. Sonuçların kalitesini sıralamazlar. İki yollu sonuç, test referansımızda hala gerekli bir şekli atladı.
Üçü de siyah dolgulu ve stroke="none" içeren bir üst grup kullandı. İnce görünümlü Edge 2 sınırları bu nedenle bu dosyalardaki dolgulu geometridir, merkez çizgisi vuruşlarının kanıtı değildir. SVG boyama spesifikasyonu, bir şeklin içini boyamak ile dış hatlarını çizmek arasında ayrım yapar. Çizgi resim izleme kılavuzu, bu ayrımın resim seçimlerini nasıl etkilediğini açıklıyor.
Bir sonraki uygulamadan önce kayıtlı sınırları kontrol edin
Dosyaların kök boyutu bildirimleri de farklılık gösteriyordu:
| Kaydedilen varyant | Kök genişliği ve yüksekliği | görünüm kutusu |
|---|---|---|
| Edge 2 / Strong | 320 nk × 240 nk | 0 0 320 240 |
| Internal 1 / Strong | 320 nk × 240 nk | 0 0 320 240 |
| Clean 1 / Strong | 960 nk × 720 nk | 0 0 960 720 |
Bunlar, pt birimleri de dahil olmak üzere gerçek kayıtlı alanlardır. Bunlar içe aktarılan fiziksel boyutun bir raporu değildir. viewBox, SVG koordinat spesifikasyonunun açıkladığı gibi, SVG görünüm portuna eşlenen dahili koordinat dikdörtgenini tanımlar. Tedavilerini incelemek için varyantları aynı inceleme boyutunda oluşturduk; bu onların boyut bildirimlerini aynı kılmaz.
Bir dosyayı saklamadan önce söz konusu SVG'yi açın ve gerekli şekilleri, açıklıkları, arka planı ve belirtilen sınırları kontrol edin. Daha sonra alıcı uygulamanızda ihtiyacınız olan boyutta test edin. Bu içe aktarma işlemini, manuel düzenlemeyi, yazdırmayı veya kesmeyi gerçekleştirmedik.
| Başarısız kontrol | Sonraki eylem |
|---|---|
| Açık renkli bir bölge kayboluyor | Başka bir filtreyi kaynaktaki tam olarak bu bölgeyle karşılaştırın |
| İnce bir önizleme merkez çizgisi olarak değerlendiriliyor | Bir sonraki iş akışını seçmeden önce dolguyu/konturu ve gerçek geometriyi inceleyin |
| Sonuç olarak istenmeyen arka plan bölgeleri eklenir | Başka bir efekti karşılaştırın ve kaydedilen dosyayı kontrastlı bir arka planda inceleyin |
| Kaydedilen birkaç dosya beklenmedik bir şekilde aynı görünüyor | Görünür filtre etiketini yeniden kontrol edin ve güncellenen her sonucu farklı bir dosya adı altında kaydedin |
| Dosya beklenmedik bir boyutta başka bir uygulamaya giriyor | Birimleri ve sınırları inceleyin, ardından söz konusu uygulamada amaçlanan boyutu ayarlayın ve doğrulayın |
Etkisi işi karşıladığında PicSVG sonucunu saklayın. Gerekli bölgeler hâlâ mevcut değilse, PicSVG alternatif sayfasındaki PerfectVector ile ücretsiz başlayın ve hangi iş akışının korunacağına karar vermeden önce önizlemenin şekillerini, açıklıklarını ve renklerini aynı orijinalle karşılaştırarak kontrol edin.
SSS
Hangi PicSVG filtresi en iyisidir?
Görüntünüzün ihtiyaç duyduğu bölgeleri ve açıklıkları koruyan efekti seçin. Test referansımızda, Edge 2 sınırları vurguladı, Internal 1 altın üçgeni atladı ve Clean 1 arka plan işlemini değiştirdi. Olası her kullanımı karşılayan tek bir sonuç yok.
Details Strong her küçük özelliği korur mu?
Bu kanıtlanmadı. Üç adlandırılmış filtreyi değiştirirken Strong'u sabit tuttuk. Bu ayarda bile Internal 1, test referansımızda gerekli bir üçgeni atladı. Ayarın adına güvenmek yerine kritik bölgelerinizi inceleyin.
Daha az SVG yolu daha temiz sonuç anlamına mı gelir?
Hayır. Kaydedilen varyantların yedi, iki ve beş yolu vardı. İki yollu dosya hâlâ istediğimiz şekli kaybetti. Tek başına en küçük yol sayısını seçmek yerine, tutulan resmi ve geometriyi karşılaştırın.
İnce PicSVG kenarları, SVG'nin merkez çizgisi konturları içerdiği anlamına mı geliyor?
Hayır. Kaydedilen üç dosyamızda, kontur yok olarak ayarlanmış siyah dolgulu geometri kullanıldı. İnce görünen bir sonuç yine de bir bölgenin etrafında dolu bir bant olabilir. İhtiyacınız olan iş akışına ilişkin gerçek dolguyu, konturu ve yolları inceleyin.
Kaynaklar
- PicSVG resmi dönüştürücü — web sitesi giriş kılavuzu, seçilebilir efektler ve SVG kaydetme iş akışı.
- W3C SVG boyama spesifikasyonu — dolgu ve kontur arasındaki fark.
- W3C SVG koordinat sistemleri — viewBox, görünüm kapısı eşlemesi ve birimleri.
Bloga daha fazlası
Potrace PNG’den SVG’ye: alfayı ve boşlukları koruyun
Alfa kanalını hazırladıktan sonra PNG'yi Potrace ile dönüştürün. Test edilmiş bir PGM iş akışını takip edin, eşikleri karşılaştırın ve SVG'nin arka planını ve iç deliklerini kontrol edin.
SVGcode: dışa aktardığınız şekilleri kontrol edin
SVGcode'da düz renkli bir görüntünün izini sürün, gerçek SVG'yi kopyalayın ve dosyayı tasarımınızda kullanmadan önce paletini, iç açıklıklarını, arka planını ve tuvalini kontrol edin.
