ヒラリー・クリントンのロゴに隠れたノッチがある理由はありますか？

この質問は少なくとも政治的なものではありません！

ここにあるヒラリーのロゴのSVGバージョンを見ていると、Hの2つの垂直バーにノッチがあることに気付きました。しかし、なぜデザイナーがこれらのノッチを入れたのか非常に興味があります。誰か知っていますか？

考えられるレンダリングアーティファクトを防ぐため。

ノッチがなければ、下のシェイプのエッジがオーバーレイシェイプのエッジと出会う可能性が高くなります（とにかく、画面上では、印刷の際に実際に問題はありません）。

ここで可能な人工物の例と説明を見ることができます：

• SVGに変換すると画像がエンボス加工されたように見える

• あるオブジェクトを別のオブジェクトの前後に同時に配置する方法は？

そのようなアーティファクトの原因となるエッジを完全に揃える理由はほとんどないので、ヒラリーのロゴのような「ノッチ」を使用するのが良い習慣です。

ラスタライズとペインタのアルゴリズムを理解すると役立つ場合があります。

ベクターグラフィックス（ピクセルではなく、ポリゴンで定義されたグラフィックス）をピクセルにレンダリングする1つの方法は、ペインタのアルゴリズムを実行しながらポリゴンをラスタライズすることです。

ペインタのアルゴリズムは、最初に背景を配置し、次に最上層に到達するまで各色の層でその背景の上に描画するボトムアッププロセスです。

レイヤーをデポジットするとき、そのカバレッジ（通常は追加のチャンネル、アルファチャンネルに保存されている）に注意を払い、追加された色と既存の色を混ぜるのに使用します。

新しいレイヤーがピクセルを50％カバーし、それが青の場合、そのピクセルの現在の色を青で平均し、代わりにそこに描画します。

透明性を備えた画像を作成する場合、物事はもう少し複雑になりますが、基本的にはそうではありません。

ラスタライズは、ポリゴンをピクセルに変換するプロセスです。ここでは、代数を使用してポリゴンが指定されたピクセルをどれだけカバーするかを計算し、カバレッジ量を計算します。

ポリゴンの2つのエッジが一致している場合（正確に重なり合っている場合）、両方のエッジが特定のピクセルを半分覆っている場合、問題は発生します。

下のポリゴンが赤、上が青、背景が白だとします。

まず、赤を塗ります。これは白と混ざり合い、50％白50％赤になります。

次に、青をペイントします。これは、50％白50％赤と混ざり、25％白25％赤50％青になります。同じことが、赤と青が中央で出会う場合、または青が赤を完全に覆う場合に起こります。

しかし、実際には、青いポリゴンは赤いポリゴンを完全に覆っていたのに、なぜそれが見えているのでしょうか？アルゴリズムはサブピクセルの位置の詳細を忘れるためです。

1つのポリゴンのカバレッジが100％である限り、これは問題ではありません。

さて、この問題は根本的なものではありません。レイトレースのようなアプローチ（ポイントでN ^ 2の係数でオーバーレンダリングする）でポリゴンレンダリングを行うことも、純粋なベクトルのようなアプローチ（下のシェイプのジオメトリからブロッキングシェイプを減算する）で行うこともできます。それらを切り取ります）。どちらの場合も、「隠された」色は出力画像に漏れません。

ペインターのアルゴリズムは、「隠れた」ジオメトリが漏れる唯一のケースではありません。不透明なメディアを使用して印刷する場合、カラーレイヤーが完全に揃っていない場合があります。そのため、最上層で完全に覆われるべきときに、下層が漏れます。

ベクター画像がどのように出力されるかわからないので、そのようなノッチを使用すると、不完全な印刷/表示技術に対してより堅牢な画像を作成できます。

カイは正しい。私も視覚的な答えを追加すると思いました。

これが起こる理由は、それがSVGだからです。レンダリングされた各ピクセルを制御するラスターイメージとは異なり、SVGのラスター化はブラウザーで行われるため、ブラウザーがこれらの決定を行います。

ブラウザが下さなければならない決定の1つは、いつアンチエイリアスを行うかです。通常、これは、ラインに沿ったポイントがピクセル上にあるときにこれを行います。次に、そのピクセルをアンチエイリアスします。SVGのすべてのレイヤーをレンダリングするため、各レイヤーに対してこれを行います。そこで、エッジアーティファクトの取得を開始できます。これは、SVGのズームをさまざまな画面ピクセルにオーバーラップさせるため、SVGのズームを使用する場合に特に当てはまります。

以下は、Chromeの緑のボックスと赤のボックスが重なったスクリーンショットです。上部は100％ページズーム、下部はズームインされています。そのエッジのレンダリングの違いに注意してください。

それをスクリーンショットし、ズームインしてラスタライズを表示すると、何が起こっているかをより明確に把握できます。

ここでの理想的な修正は、ブラウザーのSVGラスタライザーが「スマート」であり、積み重ねられたものをレンダリングしないことですが、SVG要素を外部で操作し、ライブ（単なるXMLファイルであるため）であるため、実用的なソリューションではありませんブラウザ用。

そのため、代わりに、デザイナーは表示されるノッチを使用してその決定を行います。

ところで、これは、トラッピングを使用して印刷の登録を処理する方法と概念が似ています。

複数の色で印刷するには、見苦しいギャップを避けるために正確な位置合わせが必要であり、アーティファクトが複数のソースから構成される場合の懸念事項です。同様の懸念は、限られた精度の演算が必然的にエラーを引き起こすデジタル製品でも発生する可能性があります。

回避される問題は、逆トラッピングの 1つです。意図したグラフィックからの逸脱により、垂直に一致するエッジの左側に背景色の細い線が表示される場合があります。色が非常に対照的であるため、影響が顕著になります（垂直の左に1ピクセルでも破線を移動してみてください。

このアプローチは、インクの混合に影響を与えることを意図していません。画面上の一貫した座標は問題を回避し、ハーフトーンは色を管理するために使用されます。