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
quelle
Antworten:
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:
Das Bild sieht geprägt aus, wenn es in SVG konvertiert wird
Wie stelle ich ein Objekt gleichzeitig vor und hinter ein anderes Objekt?
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.
quelle
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.
quelle
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 .
quelle
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.
quelle