Gibt es einen Grund, warum das Logo von Hillary Clinton Kerben versteckt hat?

226

Diese Frage ist überhaupt nicht politisch!

Als ich mir die SVG-Version von Hillarys Logo hier ansah , bemerkte ich, dass sich Kerben in den beiden vertikalen Balken des H befanden. Die Pfeil-Querlatte verdeckt die Kerben, sodass sie beim Betrachten des Logos nicht sichtbar sind. Aber ich bin sehr gespannt, warum der Designer diese Kerben gesetzt haben könnte. Weiss es jemand?

logo svg best-practice

— IJ Kennedy
quelle

53

Technisch ist dies ein Programm zur Umgehung von Fehlern. Es ist ein bisschen überraschend und beunruhigend zu glauben, dass alle Universitäten und Mainstream-Anbieter von 2D-Rendering-Engines immer wieder den gleichen Fehler machen, auch wenn wir die Ursache kennen, wissen wir, wie man es behebt, und es ist kein so großer Leistungseinbruch auf einem modernen Computer. Und keine 3D-Grafik-Leute machen diesen Fehler selten und wissen es seit über 30 Jahren.

— Joojaa

6

@NickT Es ist keine Frage des Kampfes, sondern der Mischung von Deckkraft und Deckkraft, aber 3D ist viel mehr als Spiele. In 3D haben wir seit langem Multisampling verwendet, um das aa-Problem zu lösen. Multisampling (normalerweise, selbst wenn die Ergebnisse nicht so ausgeprägt wären) berechnet die Abdeckung nicht und macht daher nicht den Fehler zu denken, dass 50% Abdeckung 25% sichtbar sind, durch weitere 50% Abdeckung. Während dies wahr sein mag, kann die Answe auch zu 50% sichtbar sein oder keine ist sichtbar. In diesem Fall, um Verwirrung zu vermeiden, werden die anderen 50% manuell entfernt. Wir können 3 Fälle beheben, aber nicht alle. Sollte nicht benötigt werden.

— Joojaa

5

Es ist traurig, dass ich es klar erkannt habe, um einen Rendering-Fehler von überlappenden Grenzen zu vermeiden. Aber SVG ist immer noch 14 Jahre alt, also hoffe ich, dass dies eines Tages behoben wird.

— Francisco Presencia

5

@FranciscoPresencia Es ist kein Problem mit SVG. Es ist nur ein Problem mit der Art und Weise, wie wir die Renderings fälschlicherweise implementieren. Verschiedene SVG-Renderer haben unterschiedliche Schweregrade dieses Problems

— joojaa

12

@ DA01 nein die naive Fehlerbehebung ist unglaublich einfach, es ist weniger Code als der aktuelle Algorithmus. Anstatt deckungsbasierte Berechnungen durchzuführen, rendern Sie einfach so, als ob Sie bei einer höheren Auflösung überhaupt kein Antialiasing vorgenommen hätten, und filtern Sie das Bild dann auf die tatsächliche Auflösung herunter. Dies wird niemals von unten nach oben verschüttet, da es keinen Fehler machen kann, dass das vorderste Element es vollständig verdeckt. Grafikkarten tun dies die ganze Zeit, so wie es in den Einstellungen der Grafikkarte unter x4 x8 x16 aa festgelegt ist.

— Joojaa

233

Um mögliche Rendering-Artefakte zu vermeiden.

Ohne die Kerben sehen Sie wahrscheinlich die Kanten der unteren Formen, wo sie auf die Kanten der überlagerten Formen treffen (auf dem Bildschirm ist dies beim Drucken ohnehin kein wirkliches Problem).

Beispiele und Erklärungen zu den möglichen Artefakten finden Sie hier:

Es gibt selten einen Grund, perfekt ausgerichtete Kanten zu haben, die zu solchen Artefakten führen würden. Daher ist es eine gute Angewohnheit, "Kerben" wie in Hillarys Logo zu verwenden.

— Cai
quelle

6

Dies kann ein ebenso großes Problem beim Drucken sein. Beim Digitaldruck wird mindestens die SVG-Datei in der Regel gerastert, bevor sie an den Drucker gesendet wird, und möglicherweise werden dieselben Artefakttypen angezeigt. (Das letzte Projekt bei meinem letzten Arbeitgeber (großer kommerzieller Drucker) umfasste das Schreiben von Software, um diese Art von Dingen zu identifizieren, bevor die teure Arbeit des

— Aufbringens

1

Da es sich um US-Politik handelt, meinen Sie "Artefakte"?

— Andrew Rasmussen

5

Laut english.se meine ich Artefakte, keine Artefakte. (Aber da ich Brite bin, meine ich Artefakte unabhängig)

— Cai

Es gibt selten einen Grund ... nur neugierig: Gibt es jemals einen Grund?

— Alois Mahdal

@AloisMahdal Ich bezweifle es sehr.

— Cai

61

Das Verständnis der Rasterisierung und des Algorithmus des Malers könnte hilfreich sein.

Eine Möglichkeit, Vektorgrafiken (durch Polygone anstelle von Pixeln definierte Grafiken) in Pixel zu rendern, besteht darin, die Polygone zu rastern, während der Algorithmus des Malers ausgeführt wird.

Der Algorithmus des Malers ist ein Bottom-up-Prozess, bei dem Sie zuerst den Hintergrund ablegen und dann mit jeder Farbschicht auf diesen Hintergrund zeichnen, bis Sie die oberste Schicht erreichen.

Wenn Sie eine Ebene ablegen, achten Sie auf deren Abdeckung (normalerweise in einem zusätzlichen Kanal, dem Alpha-Kanal) und mischen die hinzugefügte Farbe mit der bereits vorhandenen Farbe.

Wenn Ihre neue Ebene ein Pixel zu 50% bedeckt und blau ist, mitteln Sie die aktuelle Farbe dieses Pixels mit blau und zeichnen sie stattdessen dort.

Etwas komplexer wird es, wenn Sie ein Bild mit Transparenz erstellen, aber nicht grundsätzlich.

Bei der Rasterisierung wird ein Polygon in Pixel umgewandelt. Hier berechnen wir mithilfe einer Algebra, wie stark das Polygon ein bestimmtes Pixel bedeckt, und berechnen dann einen Überdeckungsbetrag.

Wenn Sie zwei Kanten eines Polygons haben, die zusammenfallen - genau übereinander -, aber beide ein bestimmtes Pixel zur Hälfte bedecken, ist das ein Problem.

Angenommen, das untere Polygon ist rot und das obere blau und der Hintergrund ist weiß.

Zuerst malen wir das Rot. Dies mischt sich mit dem Weiß, was zu 50% Weiß und 50% Rot führt.

Wir malen dann das Blau. Dies mischt sich mit den 50% Weiß 50% Rot und wir erhalten 25% Weiß 25% Rot 50% Blau. Das gleiche passiert, wenn sich Rot und Blau in der Mitte treffen oder wenn Blau Rot vollständig bedeckt.

Aber "in Wirklichkeit" bedeckte das blaue Polygon das rote vollständig. Warum sehen wir es dann? Weil der Algorithmus Subpixel-Positionierungsdetails vergisst .

Solange ein Polygon zu 100% abgedeckt ist, ist dies kein Problem.

Nun ist dieses Problem nicht grundlegend. Sie können das Rendern von Polygonen mit einem Raytracing-ähnlichen Ansatz (bei dem Sie an Punkten um einen Faktor von N ^ 2 überrendern) oder sogar mit einem reinen Vektor-ähnlichen Ansatz (bei dem Sie blockierende Formen von der Geometrie der Formen unter subtrahieren) durchführen sie ausschneiden). In keinem Fall gelangen "verborgene" Farben durch das Ausgabebild.

Der Algorithmus des Malers ist nicht der einzige Fall, in dem "verborgene" Geometrie durchdringen kann. Wenn Sie mit undurchsichtigen Medien drucken, sind die Farbebenen manchmal nicht perfekt ausgerichtet. So dringen Unterschichten durch, wenn die oberste Schicht diese vollständig bedecken soll.

Da Sie nicht wissen, wie Ihr Vektorbild ausgegeben wird, können Sie mit solchen Kerben Bilder erstellen, die robuster gegen fehlerhafte Druck- / Anzeigetechniken sind.

— Yakk
quelle

1

Ihre Beschreibung gilt für Grafiken mit Alpha-Kanälen oder für Subpixel-Zeichnungen beim Antialiasing. Das OPs-Beispiel zeigt die Kerbenartefakte für gemischte Ebenen im Gegensatz zu dem, was beabsichtigt ist. Ich würde vorschlagen, dass das Problem eher mit Registrierungsfehlern beim Drucken zusammenhängt.

— Pekka

2

@pekka ja, aber das meiste Rendering funktioniert heute mit Anti-Aliasing.

— Yakk

Wenn die oberste Ebene transparent ist, führt die Kerbe zu einem allmählichen Zurückziehen der unteren Ebene von der Kante aus, was sich sowohl auf das Antialiasing als auch auf die Farbe der obersten Ebene auswirkt. Eine geeignetere Antwort wäre ein rechteckiger Rabatt (mit einer schwer abzuschätzenden Größe) in dem Bereich, in dem das Mischen nicht erwünscht ist. Wie quantifizieren Sie das?

— Pekka

@pekka Wenn die oberste Ebene eine mittlere Transparenz aufweist, ist dieses Problem weitaus weniger problematisch (wie Sie sowieso das Rot unter dem Blau sehen können). Wenn sich die Transparenz der Deckkraft der Deckkraft nähert, gehen Sie wie oben beschrieben vor. Versuchen Sie, die Deckkraft vorab zusammenzustellen, da dies nicht mehr der Fall ist. Das allgemeine Problem ist schwierig, wenn Registrierungsfehler, Aufbauprobleme (zu viele Ebenen!), Anti-Aliasing und alles andere vorliegen: Sie möchten irgendwann benutzerdefinierte Vektoren für jedes Ausgabeformat schreiben oder die Vektoren irgendwie mungeen. Ich habe einfach versucht, die genaue technische Ursache des Problems zu ermitteln, das die Kerbe löst.

— Yakk

1

@Pekka ein Rechteck ist schwerer zu zeichnen und dann endet man mit dem gegenteiligen Problem des gleichen Problems, indem der Hintergrund Talsohle zeigt. Kerbe ist eine Art Kompromiss zwischen einem Fehler und mehreren anderen Fehlern (die Kerbe ist für das Rendern auf dem Bildschirm gedacht, wenn kein quadratischer Hohlraum vorhanden ist, sodass Überdruckplatten bei Bedarf mit minimalen Fehlern erstellt werden können). Aber es gibt wirklich keinen Grund, dies zu tun, es ist nur so, dass unsere Renderer falsch arbeiten, das ist alles, was es zu tun gibt. Wir könnten alle drei Probleme leicht lösen, indem wir die Art und Weise, wie wir rastern, ändern.

— Joojaa

48

Cai ist richtig. Ich dachte, ich würde auch eine visuelle Antwort hinzufügen.

Der Grund dafür ist, dass es sich um ein SVG handelt. Im Gegensatz zu einem Rasterbild, bei dem Sie jedes gerenderte Pixel steuern, erfolgt die Rasterisierung der SVG-Datei im Browser. Der Browser trifft also diese Entscheidungen.

Eine der Entscheidungen, die der Browser treffen muss, ist, wann Anti-Aliasing durchgeführt werden soll. Dies geschieht normalerweise, wenn ein Punkt entlang einer Linie auf ein Pixel fällt. Es wird dann ein Anti-Alias für dieses Pixel erstellt. Da alle Ebenen der SVG-Datei gerendert werden, wird dies für jede Ebene durchgeführt, und hier können Sie beginnen, die Kantenartefakte zu erhalten. Dies gilt insbesondere dann, wenn Sie mit dem Zoomfaktor der SVG-Datei spielen, da dieser verschiedene Bildschirmpixel überlappt.

Hier ist ein Screenshot eines grünen Kästchens, das ein rotes Kästchen in Chrome überlappt. Der obere Rand ist zu 100% vergrößert, der untere Rand ist vergrößert. Beachten Sie den Unterschied beim Rendern dieser Kante:

Wenn ich einen Screenshot davon mache und hineinzoome, um die Rasterung zu zeigen, können Sie sich ein klareres Bild davon machen, was los ist:

Hier wäre die ideale Lösung, wenn der SVG-Rasterizer im Browser „intelligenter“ wäre und keine gestapelten Elemente gerendert würden. Angesichts der Tatsache, dass SVG-Elemente extern und live bearbeitet werden können (da es sich nur um eine XML-Datei handelt), ist dies keine praktische Lösung für den Browser.

Stattdessen trifft der Designer diese Entscheidung anhand der Kerben, die Sie sehen.

Übrigens ähnelt dies im Konzept dem Umgang mit der Registrierung beim Drucken mithilfe der Überfüllung .

— DA01
quelle

16

Das Drucken in mehreren Farben erfordert eine genaue Registrierung, um unschöne Lücken zu vermeiden, und ist ein Problem, wenn Artefakte aus mehreren Quellen bestehen. Ähnliche Bedenken können auch bei digitalen Produkten auftreten, bei denen Arithmetik mit begrenzter Genauigkeit notwendigerweise Fehler einführt.

Das Problem, das vermieden wird, besteht in der inversen Überfüllung, bei der eine Abweichung von der beabsichtigten Grafik zu einer dünnen Linie der Hintergrundfarbe führen kann, die links von den vertikalen zusammenfallenden Kanten angezeigt wird. Da die Farben sehr kontrastreich sind, ist der Effekt spürbar (versuchen Sie, die unterbrochene Linie um 1 Pixel nach links von der Vertikalen zu verschieben.

Der Ansatz soll sich nicht auf das Mischen von Tinten auswirken. Durchgängige Koordinaten auf dem Bildschirm vermeiden das Problem, während die Farbverwaltung mit Halbton durchgeführt wird.

— Pekka
quelle