Czy istnieje powód, dla którego logo Hillary Clinton ma ukryte wycięcia?

To pytanie w ogóle nie jest polityczne!

Przeglądając znalezioną tutaj wersję logo Hillary SVG , zauważyłem, że na dwóch pionowych słupkach H. były wycięcia. Strzałka poprzeczna zakrywa wycięcia, aby nie były widoczne podczas oglądania logo. Ale jestem bardzo ciekawy, dlaczego projektant mógł wprowadzić takie wycięcia. Czy ktoś wie?

Aby zapobiec możliwym renderowaniu artefaktów.

Bez wycięć prawdopodobnie zobaczysz krawędzie dolnych kształtów w miejscach, gdzie spotykają się z krawędziami nakładających się kształtów (na ekranie i tak nie jest to tak naprawdę problemem podczas drukowania).

Tutaj możesz zobaczyć przykłady i wyjaśnienia możliwych artefaktów:

• Obraz wygląda na wytłoczony po przekonwertowaniu na SVG

• Jak umieścić jeden obiekt jednocześnie z przodu i z tyłu innego obiektu?

Rzadko istnieje powód, aby mieć idealnie wyrównane krawędzie, które powodowałyby takie artefakty, więc używanie „wycięć” jak w logo Hillary jest dobrym nawykiem.

Zrozumienie rasteryzacji i algorytmu malarza może pomóc.

Jednym ze sposobów renderowania grafiki wektorowej (grafiki zdefiniowanej przez wielokąty zamiast pikseli) na piksele jest rasteryzacja wielokątów podczas działania algorytmu malarza.

Algorytm malarza jest procesem oddolnym, w którym najpierw odkładasz tło, a następnie rysujesz na nim każdą warstwą koloru, aż dojdziesz do górnej warstwy.

Składając warstwę, zwracasz uwagę na jej pokrycie (zwykle przechowywane w dodatkowym kanale, kanale alfa) i używasz jej do mieszania dodanego koloru z tym, co już jest.

Jeśli twoja nowa warstwa obejmuje piksel o 50%, a jest niebieski, uśredniasz bieżący kolor tego piksela za pomocą niebieskiego i rysujesz go tam.

Sprawy stają się nieco bardziej skomplikowane, jeśli tworzysz obraz z przezroczystością, ale nie zasadniczo.

Rasteryzacja to proces przekształcania wielokąta w piksele. W tym miejscu ustalamy, ile wielokąta pokrywa dany piksel za pomocą algebry, a następnie obliczamy wielkość pokrycia.

Jeśli masz dwie krawędzie wielokąta, które są zbieżne - dokładnie jedna nad drugą - ale obie pokrywają dany piksel w połowie, problem może się zdarzyć.

Załóżmy, że dolny wielokąt jest czerwony, a górny niebieski, a tło białe.

Najpierw malujemy na czerwono. To miesza się z białym, co prowadzi do 50% białego 50% czerwonego.

Następnie malujemy niebieski. To miesza się z 50% białym 50% czerwonym i otrzymujemy 25% białego 25% czerwonego 50% niebieskiego. To samo dzieje się, gdy czerwony i niebieski spotykają się na środku lub jeśli niebieski całkowicie pokrywa czerwony.

Ale „w rzeczywistości” niebieski wielokąt całkowicie przykrył czerwony, więc dlaczego go widzimy? Ponieważ algorytm zapomina o szczegółach pozycjonowania subpikseli.

Tak długo, jak istnieje 100% pokrycia jednego wielokąta, nie stanowi to problemu.

Ten problem nie jest fundamentalny. Możesz wykonywać renderowanie wielokątów z podejściem podobnym do śledzenia promieni (w przypadku nadmiaru renderowania o współczynnik N ^ 2 w punktach) lub nawet podejściem czystym wektorem (w którym odejmujesz kształty blokujące od geometrii kształtów pod je, odcinając je). W żadnym przypadku „ukryte” kolory nie przedostają się do obrazu wyjściowego.

Algorytm malarza to nie jedyny przypadek, przez który może przeciec „ukryta” geometria. Jeśli drukujesz na nieprzezroczystych mediach, czasami warstwy kolorów nie są idealnie wyrównane. Tak więc dolne warstwy przeciekają, gdy górna warstwa powinna całkowicie je przykryć.

Ponieważ nie wiesz, jak zostanie wyprowadzony obraz wektorowy, takie wycięcia pozwalają tworzyć obrazy, które są bardziej odporne na niedoskonałe techniki drukowania / wyświetlania.

Cai ma rację. Pomyślałem też, że dodam wizualną odpowiedź.

Dzieje się tak dlatego, że jest to plik SVG. W przeciwieństwie do obrazu rastrowego, w którym kontrolujesz każdy renderowany piksel, rasteryzacja SVG odbywa się w przeglądarce ... więc przeglądarka podejmuje te decyzje.

Jedną z decyzji, które musi podjąć przeglądarka, jest, kiedy zastosować wygładzanie. Zazwyczaj robi to, gdy punkt wzdłuż linii spada na piksel. Będzie wtedy anty alias tego piksela. Ponieważ wyrenderuje wszystkie warstwy SVG, zrobi to na każdej warstwie i od tego momentu możesz zacząć tworzyć artefakty krawędzi. Jest to szczególnie prawdziwe, gdy grasz z powiększeniem SVG, ponieważ spowoduje to nakładanie się różnych pikseli ekranu.

Oto zrzut ekranu zielonego pola nakładającego się na czerwone pole w Chrome. Góra jest powiększona o 100%, dolna jest powiększona. Zwróć uwagę na różnicę w renderowaniu tej krawędzi:

Jeśli wykonam zrzut ekranu i powiększę, aby pokazać rasteryzację, możesz uzyskać wyraźniejszy obraz tego, co się dzieje:

Idealną poprawką byłoby, gdyby rasterizer SVG w przeglądarce był „bardziej inteligentny” i nie renderował rzeczy, które są ułożone w stos, ale biorąc pod uwagę, że elementami SVG można manipulować zewnętrznie i na żywo (ponieważ jest to tylko plik XML), nie jest to praktyczne rozwiązanie dla przeglądarki.

Zamiast tego projektant podejmuje tę decyzję, korzystając z widocznych wycięć.

Nawiasem mówiąc, ma to podobną koncepcję, jak radzić sobie z rejestracją w druku za pomocą pułapki .

Drukowanie w wielu kolorach wymaga dokładnej rejestracji, aby uniknąć nieestetycznych luk i stanowi problem, gdy artefakty składają się z wielu źródeł. Podobne obawy mogą wystąpić nawet w produktach cyfrowych, w których arytmetyka o ograniczonej precyzji z konieczności wprowadza błąd.

Problemem, którego można uniknąć, jest odwrotne zalewkowanie - odchylenie od zamierzonej grafiki może skutkować cienką linią koloru tła pokazaną po lewej stronie pionowych zbieżnych krawędzi. Ponieważ kolory są bardzo kontrastowe, uderzenie będzie zauważalne (spróbuj przesunąć przerywaną linię nawet o 1 piksel w lewo od pionu.

Podejście to nie ma na celu wpływu na mieszanie farb. Spójne współrzędne na ekranie pozwalają uniknąć problemu, a półtonowanie służy do zarządzania kolorem.