SVGは100％のソース品質を維持します
SVG画像のデータはピクセルではなくXMLとして保存され、ソースの品質を損なうことなく任意のレベルに拡大縮小できるコンポーネントで構成されています。
画面の解像度
画面上のグラフィックが小さくなると、ソースを表すためのピクセルが少なくなり（まだ完全な品質です）、画像の鮮明さが低下します。
アンチエイリアシング
大きな画像（左）と小さな画像（右）は両方ともアンチエイリアス処理されています（エッジで使用されているわずかで微妙な色を参照してください）。
アンチエイリアシングは、画像のレンダリングに使用される手法であり、ギザギザのギザギザを回避するためにシャープネスを犠牲にします。この手法は、エッジを滑らかに保つために使用されるため、最小の画像の品質が低下します。解像度が低いため、ここではアンチエイリアシングがより明確になり、垂直エッジでも使用されます。
これはアンチエイリアス処理で発生するのではないかと思います。これは、別の方法で行うのが難しいためか、画像の均一性のためです。対角エッジがアンチエイリアシングによってわずかにぼやけており、垂直エッジはそうではない場合、それは非常にバランスの取れた効果にはなりません。
アンチエイリアシングは、Webグラフィックの縁の下の力持ちです。これが、画面上にクリアテキストと滑らかなベクター形状がある理由です。現在、ブラウザで使用されているアンチエイリアスにはいくつかのアプローチがあり、テキストレンダリングに関しては最も明白です。アンチアライゼーションに使用されるアルゴリズムが切り替わると、予期しない視覚結果が生じる可能性があります。この記事では、アンチエイリアシングへのアプローチを見て、ピクセルがどのように描画されるかを見ていきます。
すべての画面は、ご存じのようにピクセルで構成されています。これは巨大なブロックのグリッドであり、それぞれに赤、緑、青（RGB）コンポーネントが含まれています。離れたところに画像、テキスト、アイコンが表示されますが、間近では実際にRGBコンポーネントのグリッドとすべてがどのように構成されているかを確認できます。
では、ベクターシェイプを描画していて、ピクセルの「一部」を通過するとどうなるでしょうか。描画している形状が黒で、背景が白であるとします。そのピクセルに色を付ける必要がありますか？着色するなら何色？黒、灰色、何か他？
-HTML5 Rocksによるソース記事
ソリューション
ピクセルヒンティング。ピクセルヒントの下の新しいユーザーによってリンクされるのは、まさにあなたが必要とするものであり、あなたの質問に対する適切な答えです。アンチエイリアシングは、すべてのエッジを釘のように扱い、制限なくスマッシングとスムージングを行います。ヒントを与えない限り！
どうやって...
まず、ピクセルヒントにするベクター図形を含むドキュメントを開きます。この手法は、ベクターで作業している場合はうまく機能しますが、ラスターシェイプで作業している場合は、ピクセルヒンティングを管理できますが、高度な場合に限られます。とりあえずはベクターシェイプを使いましょう。
次に、ピクセルグリッドが表示されるまで、できるだけズームインします。十分にズームインしているにもかかわらず、ピクセルグリッドが表示されない場合は、いくつかの設定と環境設定を変更してオンにすることをお勧めします。オンになっていて、それが表示されている場合は、ベクターパス/シェイプを選択してください。
3番目に、ベクトルパス上の点を選択し、矢印キーを使ってピクセルを分単位で移動します。アプリによっては、ボタンを押し続ける必要があるものと、そうでないものがあります。パスがピクセルを上にシフトするだけではないことを知っている限り、パスを最大で0.5ピクセル上にシフトする必要があるためです。
4番目に、ズームアウトしたときにすべてがぼやけて見えなくなるまで、残りのベクトルのポイントについても同じようにします。完了したら、ベクトルシェイプの場合と同じように、シャープで「ピクセルパーフェクト」なスタイル、グラデーション、シャドウなどを適用できます。
最後に、このテクニックでさらに1マイル進むことを考えている場合は、「あまりにも」鮮明に見えるアイコンのベクトルポイントを微調整してみてください。ときどき、サクサクした曲線よりも、曲線がわずかにぼやけて見える場合があります。
-業界による出典記事、tareq-a提供。
ベクトルシェイプによるピクセルヒンティングは、レンダリングシステムにエッジの意図を伝えます。そのため、アンチエイリアシングは、スムージングハンマーでスイングするかどうかを認識します。
