Hillary Clinton'un logosunun gizli çentiklerin olmasının bir nedeni var mı?

226

Bu soru en azından politik değil!

Bulunan Hillary'nin logosunun SVG sürüme bakarken burada , ben logoyu görüntülerken, görmedikleri böylece ok kol demiri çentikler kapsar H. iki dikey çubuklar çentikler vardı fark ettim. Ama tasarımcının neden bu çentiklere girmiş olabileceğini çok merak ediyorum. Kimse biliyor mu?

logo svg best-practice

— Ben Kennedy
kaynak

53

Teknik olarak bu bir hata giderme şemasıdır. 2B görüntü oluşturma motorlarının tüm üniversitelerinin ve ana tedarikçisinin tekrar tekrar aynı hatayı tekrar yaptığını düşünmek biraz şaşırtıcı ve huzursuz edici, sebebini bilmemize rağmen, bunu nasıl düzelteceğimizi biliyoruz, bunun bir performans vuruşu kadar büyük olmadığını değil modern bir bilgisayarda. Ve hiçbir 3B grafikli insan nadiren bu hatayı yapmaz ve 30 yılı aşkın bir süredir bilmez.

— joojaa

6

@NickT Çok az mücadele etmemesi, opaklıkla kapsama alanını bir araya getirme meselesi ancak 3D oyunlardan çok daha fazlası. 3B'de aa sorununu çözmek için çoklu örnekleme kullanılan yaşlarımız var. Çoklu örnekleme (genellikle sonuçlar çok belirgin olmasa bile) kapsamı hesaplamaz ve bu nedenle% 50 kapsamın% 50 kapsam dahilinde olduğunu ve% 50 kapsamın% 25 görünür olduğunu düşünerek hata yapmadığını gösterir. Bu doğru olsa da, cevabımız% 50 görünebilir veya hiçbiri görünmez olabilir. Bu durumda karışıklığı önlemek için diğer% 50 manuel olarak kaldırılır, 3 kasayı tamir edebiliriz ancak hepsini düzeltemeyiz. Gerekli olmamalıdır.

— joojaa

5

Örtüşen sınırların oluşturulmuş bir hata oluşmasından kaçınmak için açıkça tanıdığım üzücü. Ancak SVG hala 14 yaşında, bu yüzden bir gün bunun düzeleceğini umuyorum.

— Francisco Presencia,

5

@FranciscoPresencia, SVG ile ilgili bir sorun değil, sadece işleyicileri yanlış uygulamayı seçmemizle ilgili bir sorun. Farklı SVG

— üreticileri

12

@ DA01 yok saf düzeltme inanılmaz basit, mevcut algoritmadan daha az kod. Kapsama temelli hesaplama yapmak yerine, daha yüksek bir çözünürlükte antialias yapmamışsınız gibi bir görüntü elde edin, ardından görüntüyü gerçek çözünürlükte filtreleyin. Bu asla aşağıdan yukarıya doğru dökülmez çünkü çoğu öğeyi tamamen gizleyen bir hata yapamaz. Grafik kartları bunu x4 x8 x16 aa ayarlarının gfx kartı ayarlarında olduğu şekilde yapar.

— joojaa

233

Olası render eserlerini önlemek için.

Çentikler olmadan, üst üste binme şekillerinin kenarlarını karşıladıkları alt şekillerin kenarlarını görmeniz muhtemeldir (yine de ekranda, yazdırma sırasında gerçekten sorun olmaz).

Olası eserlerin örneklerini ve açıklamalarını burada görebilirsiniz:

Hileleri bu gibi eserler neden olacak mükemmel hizalanmış kenarları olması için nadiren herhangi bir sebep yoktur bu yüzden Hillary'nin logosundaki gibi "çentik" kullanarak almak için iyi bir alışkanlıktır.

— Cai
kaynak

6

Bu aslında baskı ile ilgili bir problem kadar büyük olabilir. Dijital baskıda, en azından svg tipik olarak yazıcıya gönderilmeden önce rasterleştirilir ve aynı tür eserler görünebilir. (benim son işveren (büyük ticari yazıcı) geçen proje yapıldığını kağıda mürekkep koyma pahalı işten önce şeylerden bu tür belirlemenize yardımcı olmak için yazılım yazma içeriyordu.)

— Mr.Mindor

1

ABD politikalarından bahsettiğimizden, "eserler" mi demek istiyorsun?

— Andrew Rasmussen

5

Türkçeye göre eserler demek, eserler demek istiyorum. (Ama İngiliz olduğumdan beri, ne olursa olsun eserler demek istiyorum.)

— Cai

Herhangi bir nedenle ... nadiren var orada olduğu: sadece merak Hiç bir neden?

— Alois Mahdal

@ AloisMahdal Bundan çok şüpheliyim.

— Cai

61

Rasterleştirmeyi ve ressamın algoritmasını anlamak yardımcı olabilir.

Vektör grafiklerini (piksel yerine çokgenler tarafından tanımlanan grafikler) piksellere dönüştürmenin bir yolu, ressamın algoritmasını çalıştırırken çokgenleri rasterleştirmektir.

Ressamın algoritması, ilk önce arka planı bıraktığınız, ardından en üst katmana ulaşana kadar her bir renk katmanıyla o arka planın üstüne çizdiğiniz aşağıdan yukarıya bir işlemdir.

Bir katmanı yatırdığınızda, kapsama alanına dikkat edin (genellikle ekstra bir kanalda, alfa kanalında saklanır) ve onu eklenen rengi zaten orada olanlarla karıştırmak için kullanırsınız.

Yeni katmanınız bir pikseli% 50 oranında kapsıyorsa ve mavi ise, o pikselin geçerli rengini mavi ile ortalar ve bunun yerine onu çizersiniz.

Saydamlıkta bir görüntü oluşturuyorsanız, ancak temelde değil, işler biraz daha karmaşık hale gelir.

Rasterleştirme, bir poligonu piksellere çevirme işlemidir. Burada, çokgen bazı cebir kullanarak verilen bir pikseli ne kadar kapladığını hesaplar, sonra kapsam miktarını hesaplar.

Bir poligonun iki kenarına rastlıyorsanız - birbirinin üzerine - tam olarak üst üste - ancak her ikisi de belirli bir pikseli kaplar, olan şey bir problemdir.

Alt çokgenin kırmızı, üst mavinin ve arka planın beyaz olduğunu varsayalım.

İlk önce kırmızıyı boyayalım. Bu, beyaz ile karışarak% 50 beyaz,% 50 kırmızıya yol açar.

Sonra maviyi boyarız. Bu% 50 beyaz% 50 kırmızı ile karışır ve% 25 beyaz% 25 kırmızı% 50 mavi alırız. Aynı şey, kırmızı ve mavi ortada bir araya gelirse veya mavi tamamen kırmızıyı kaplarsa olur.

Ama "gerçekte" mavi çokgen tamamen kırmızı olanı kapladı, öyleyse neden görüyoruz? Çünkü algoritma alt piksel konumlandırma ayrıntılarını unutuyor .

Bir poligonun% 100 kapsama alanı olduğu sürece, bu bir problem değildir.

Şimdi, bu sorun temel değil. Çokgen görüntülemeyi ışın izleme benzeri bir yaklaşımla (noktalarda N ^ 2 faktörü ile fazla oluşturduğunuzda) veya saf vektör benzeri bir yaklaşımla (bloklama şekillerini aşağıdaki şekillerin geometrisinden çıkardığınız yerlerde yapabilirsiniz. onları kesip onları). Her iki durumda da "gizli" renkler çıkış görüntüsüne sızmaz.

Ressamın algoritması, "gizli" geometrinin sızabildiği tek durum değil. Opak ortamla yazdırıyorsanız, bazen renk katmanları tam olarak hizalanmaz. Böylece alt katlar, üst katın tamamen örtülmesi gerektiğinden sızar.

Vektör görüntünüzün nasıl çıktığını bilmediğiniz için, bunun gibi çentikler kusurlu baskı / görüntüleme tekniklerine karşı daha sağlam görüntüler elde etmenizi sağlar.

— Yakk
kaynak

1

Açıklamanız, alfa kanalları içeren grafiklerde veya kenar yumuşatma sırasında alt pikselli çizim durumunda geçerlidir. OP'ler örneği, amaçlananın aksine harmanlanmış katmanlar için çentik eserlerini gösterecektir. Sorunun yazdırmadaki kayıt hatalarıyla daha fazla alakalı olduğunu öneriyorum.

— Pekka

2

@pekka evet, ancak çoğu oluşturma işlemi bugün yumuşatmayı önlüyor.

— Yakk,

Üst katmanın herhangi bir saydamlığı varsa, çentik, alt katmanın hem kenar yumuşatma hem de üst seviye rengini etkileyen kenardan kademeli olarak geri çekilmesine neden olur. Daha uygun bir cevap, karışımın istenmediği alanda dikdörtgen bir indirime (tahmin edilmesi zor olan bir boyuta) sahip olmak olacaktır. Bunu nasıl ölçersiniz?

— Pekka

@pekka Üst katman orta miktarda saydamlığa sahipse, bu sorun çok daha az problemlidir (mavinin altındaki kırmızıyı gördüğünüz gibi). Üstün şeffaflığı opaklığa yaklaştığı için yukarıdaki çözüme yaklaşın. Opaklıktan uzaklaştıkça, onu bir araya getirmeye yaklaşın. Genel sorun, verilen kayıt hataları, biriktirme sorunları (çok fazla katman!), Kenar yumuşatma ve diğer her şey gibi zor: bir noktada, her çıkış formatı için özel vektörler yazmak ya da vektörleri bir şekilde bağlamak istiyorsunuz. Çentiğin çözdüğü problemin tam teknik nedenini cevaplamaya çalıştım.

— Yakk,

1

@Pekka bir dikdörtgen çizmek daha zordur ve sonra aynı sorunun zıt sorunu ile bitiyorsunuz; Çentik, bir diğerinin üzerinde bir böcek arasında bir uzlaşmadır (çentik, kare oyuk olmayan ekran görüntülemesi içindir, böylece minimum hata ile gerekirse üst baskı plakaları yapılabilir). Ancak, bunu yapmanın bir gereği olması için gerçekten bir neden yok, sadece işverenlerimizin hepsi orada olduğu kadar yanlış çalışıyor. Rasterize etme şeklimizi değiştirerek tüm bu 3 problemi kolayca çözebildik.

— joojaa

48

Cai haklı. Ben de görsel bir cevap ekleyeceğimi düşündüm.

Bunun olmasının nedeni bir SVG olmasıdır. Oluşturulan her pikseli kontrol ettiğiniz raster görüntünün aksine, SVG'nin rasterleştirilmesi tarayıcıda olur ... böylece tarayıcı bu kararları alır.

Tarayıcının vermesi gereken kararlardan biri, örtüşme önleme işleminin ne zaman yapılması gerektiğidir. Genellikle, bir çizgi boyunca bir nokta bir pikselin üzerine düştüğünde bunu yapar. Daha sonra, o piksele anti piksel ekleyecektir. SVG'nin tüm katmanlarını oluşturacağından, bunu her katmana yapacak ve kenar yapısını almaya başlayabileceğiniz yer burasıdır. Bu, özellikle farklı ekran pikselleriyle çakışmasına neden olacak şekilde SVG'nin yakınlaştırması ile oynadığınızda geçerlidir.

İşte Chrome'da kırmızı bir kutunun üstüne binen yeşil bir kutunun ekran görüntüsü. Zirve% 100 sayfa yakınlaştırma, alt yaklaştırma. Bu kenarı oluşturma farkına dikkat edin:

Bunu ekran görüntüsü aldıysanız ve rasterleştirmeyi göstermek için yakınlaştırırsam, neler olduğunu daha net olarak görebilirsiniz:

Buradaki ideal düzeltme, tarayıcıdaki SVG rasterleştiricisinin 'daha akıllı' olması ve istiflenmiş şeyleri oluşturmaması olabilir, ancak SVG öğelerinin harici olarak manipüle edilebildiği ve canlı olduğu göz önüne alındığında (yalnızca bir XML dosyası olduğu gibi) pratik bir çözüm değildir. Tarayıcı için

Yani, bunun yerine, tasarımcı gördüğünüz çentikleri kullanarak bu kararı verir.

Bu arada, bu kavram olarak baskıda tescil işleminin bindirme kullanarak nasıl ele alınacağına benzer .

— DA01
kaynak

16

Birden fazla renkte yazdırmak, çirkin boşlukları önlemek için doğru kayıt gerektirir ve yapay nesneler birden fazla kaynaktan oluştuğunda kaygı vericidir. Sınırlı hassasiyet aritmetiğinin mutlaka hataya neden olduğu dijital ürünlerde bile benzer endişeler ortaya çıkabilir.

Kaçınılması gereken sorun ters tuzaklardan biridir - burada amaçlanan grafikten sapma dikey çakışan kenarların solunda gösterilen arka plan renginin ince bir çizgisine neden olabilir. Renkler oldukça kontrast oluşturduğundan, etki belirgin olacaktır (kesikli çizgiyi dikey olarak 1 piksele bile 1 piksel kaydırmayı deneyin.

Yaklaşım mürekkeplerin karıştırılması üzerinde etkili değildir. Ekrandaki tutarlı koordinatlar sorunu önlerken, yarı tonlama rengi yönetmek için kullanılır.

— Pekka
kaynak