SVGのshape-rendering crispEdgesはどんなときに役立つ？
SVGのcrispEdgesがピクセル格子の図形に役立つ場合と、曲線を粗くする場合を確認します。描画ヒントを修正と決めつけず、2つのサイズでブラウザーテストを行います。
目次
意図的にくっきりした主に直線のエッジを持つSVGで、最終表示サイズで試して見た目が改善する場合は、shape-rendering="crispEdges" を使います。差がほとんどないなら、既定の auto を維持してください。曲線の図形では、エッジがより粗く見える場合があります。このヒントが変えるのは既存形状の描き方であり、形状自体ではありません。SVG 2仕様はヒントと呼び、アンチエイリアスを減らしたり一部のエッジをデバイスのピクセルに合わせたりすることを認めています。
小さなアイコンがぼやけたり、書き出し後のロゴがギザギザに見えたりするとき、この違いは重要です。crispEdges は埋め込みPNGをパスに変えず、壊れた輪郭を修復せず、すべてのブラウザーで同じピクセルを保証しません。ファイル全体を変える前に、代表的な形状1つを auto、crispEdges、geometricPrecision で、人が実際に見るサイズで比較してください。
必要なエッジに合わせて選ぶ
- 長方形のピクセル格子の図形： 該当する形状で
crispEdgesを試し、小さな出力と大きな出力の両方を確認します。 - 曲線や丸い文字：
autoから始め、レンダラーで見える差があればgeometricPrecisionを試します。 - 隣り合う形状の隙間： まず形状を確認します。描画ヒントでは本当の穴を閉じられません。
- SVG内で拡大縮小されたPNG： ラスターの拡大縮小制御を使うか、編集可能性が目的なら図形をパスで再構築します。
crispEdges がレンダラーに求めること
SVGの shape-rendering には4つの値があります。4種類の書き出し形式ではなく、優先事項です。既定の auto は、速度、エッジのコントラスト、形状の正確さのバランスをレンダラーに任せます。crispEdges は強いエッジのコントラストを重視し、アンチエイリアスを抑える場合があります。geometricPrecision は忠実な形状を重視します。MDNのSVG属性リファレンスは、すべてのエッジ、またはほぼ水平・垂直なエッジだけをレンダラーが異なる方法で扱う場合があると説明しています。必須のシャープ化フィルターはありません。
| 値 | 求めるもの | 有用な最初のテスト |
|---|---|---|
auto | レンダラーがバランスを選ぶ | すべてのSVGの基準 |
crispEdges | 形状エッジのコントラストを高める | 四角い記号や格子状の細部 |
geometricPrecision | 形状の位置をより忠実にする | 曲線、斜線、細かな輪郭 |
optimizeSpeed | 描画速度を優先する | 特殊な用途。見た目が良くなるとは思わないこと |
親SVGの属性は子形状へ継承される場合があるため、ルートへの適用は滑らかにしたい円にも影響し得ます。代わりに1つの長方形やパスだけを対象にできます。SVGのプレゼンテーション属性とCSSの shape-rendering 宣言の両方が適用される場合、CSSプロパティが優先されます。
同じ形状を2つのサイズで比較した結果
私たちは長方形の格子状の記号と曲線の輪郭を、オリジナルのSVG形状として作りました。3列の間でマークアップ、塗り、viewBox は同じで、shape-rendering の値だけを変えています。ブラウザーのズーム100%のChromiumで、各形状を63と111 CSSピクセルで描画しました。画像はそのローカルテストのブラウザーキャプチャで、想像上の結果のイラストではありません。
どのモードもパスは変えません。このキャプチャの差は小さすぎて、1つの設定を一般的な最良と判断できません。名前は修復ツールのように聞こえても、特定の形状、サイズ、レンダラーでは効果が小さい場合があります。追加の属性を残す前に、実際の利用先を確認してください。
これは1回のChromium描画で、ブラウザー互換性の研究ではありません。PDFビューアー、デザイン編集ソフト、別のデバイス縮尺のブラウザーでは、同じパスを違う方法でラスター化する場合があります。SVG 2の定義は、実装方法を意図的にレンダラーに委ねています。
全体に適用する前に1つの形状でテストする
SVGのコピーを保存し、代表的な形状にヒントを付けます。たとえばアイコンの長方形の部分に適用し、曲線の細部は auto に残します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect x="4" y="4" width="16" height="8" fill="#154b67"
shape-rendering="crispEdges" />
<path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
stroke-width="2" shape-rendering="auto" />
</svg>予定するビューアーで小さなアイコンサイズと大きなサイズの両方で開きます。斜線や曲線も含め、保存した原本と比較してください。インラインSVGをCSSでスタイル設定する場合は、属性を上書きする規則がないか確認します。意味のある改善がなければヒントを除いてください。不要なプロパティは後の表示差の診断を難しくします。
実際の症状に修正を合わせる
| 症状 | 最初の確認 | より適した次の手順 |
|---|---|---|
| 四角い記号が1つのサイズで柔らかく見える | そのサイズで auto と crispEdges を比較する | 意図した出力が改善する場合だけヒントを保持する |
| 円や斜線がギザギザに見える | その形状に crispEdges が継承または書き出されているか | 除くか、auto と geometricPrecision を比較する |
| 接する塗りの間に細線が出る | 拡大率、背景、パス境界を比較する | SVGの継ぎ目の診断を使い、実際の隙間の場合だけ形状を直す |
| 拡大するとまだ四角いピクセルが見える | 埋め込みラスター画像を確認する | shape-rendering を変えずピクセル化SVGのチェックリストを使う |
正確なピクセル格子自体がデザインであるPNGスプライトなら、ラスターを維持するのが最もすっきりした選択の場合があります。CSSのimage-rendering: pixelatedは、拡大縮小された画像のサンプリング方法を制御します。SVGの shape-rendering とは別のプロパティです。ピクセルアートの変換ガイドでは、格子の保持、ベクターのタイルの作成、意図的な輪郭の平滑化を選ぶ場合を扱っています。
PerfectVectorが適する場合
元データが小さな統合PNGだけで、編集可能なパスが必要な場合、描画ヒントでは得られません。PerfectVectorは前段で役立ちます。PNGをSVG候補に変換し、必要なサイズで形状を確認します。選んだパスで表示ヒントを試す前に、外側の輪郭、内側の穴、小さな細部を確認してください。トレースはピクセルを形状として解釈し直せますが、ピクセルアートの階段状の輪郭を滑らかな曲線にすべきかは判断できません。
元の格子が完成図形ならPNGを保持します。すでにきれいなSVGがあり、ブラウザー表示だけがおかしいなら、表示や形状を直接修正してください。統合PNGに本当に編集可能な輪郭が必要なら、PerfectVectorでSVG候補を作成し、パスを確認して、crispEdges を加える前に最終サイズでブラウザー描画を比較します。
よくある質問
crispEdges はすべてのSVG形状からアンチエイリアスを除きますか？
いいえ。エッジのコントラストを重視するようレンダラーに求めます。仕様は、ほぼ垂直・水平な一部のエッジだけを変えるなど、異なる実装を認めています。使うビューアーで出力をテストしてください。
SVG全体に shape-rendering="crispEdges" を付けるべきですか？
すべての子形状に利点がある場合だけです。ルートのヒントは曲線の子にも影響します。1つの長方形に属性を適用する方が評価しやすく、曲線を粗くする可能性も低くなります。
crispEdges は白い継ぎ目やSVG内のぼやけたPNGを直しますか？
本当の隙間を閉じたり、ラスターピクセルをベクターパスに置き換えたりはできません。まず継ぎ目の形状を診断します。拡大縮小されたPNGには適切なラスター拡大縮小方法を使い、本当の要件が編集可能性ならベクターパスを作ります。
参考資料
- W3C — SVG 2のshape-renderingプロパティ — 4値をレンダラーへのヒントとして定義し、認めるトレードオフを説明しています。
- MDN — SVGのshape-rendering属性 — 適用されるSVG形状、継承、CSSの優先を説明しています。
- MDN — CSSのshape-renderingプロパティ — プロパティの動作と、曲線の描画が異なり得る理由を説明しています。
- MDN — CSSのimage-renderingプロパティ — ラスターのピクセル拡大縮小とベクター形状のエッジ描画を区別しています。
