shape-rendering

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

shape-rendering 属性は、パス、円、矩形などの図形を描画する際に、どのようなトレードオフを行うべきかについて、レンダラーにヒントを提供します。

メモ: プレゼンテーション属性であるため、 shape-rendering には対応する CSS プロパティ shape-rendering があります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は以下の SVG 要素で使用できます。

例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" shape-rendering="geometricPrecision" />
  <circle cx="320" cy="100" r="100" shape-rendering="crispEdges" />
</svg>

使用上のメモ

値	`auto` \| `optimizeSpeed` \| `crispEdges` \| `geometricPrecision`
デフォルト値	`auto`
アニメーション	離散

auto: この値は、ユーザーエージェントが速度、エッジの鮮明さ、および幾何学的精度のバランスをとるために適切な調整を行うべきであることを示していますが、その際、速度やエッジの鮮明さよりも幾何学的精度を優先する必要があります。
optimizeSpeed: この値は、ユーザーエージェントが幾何学的精度や鮮明なエッジよりも描画速度を優先することを示します。このオプションを設定すると、ユーザーエージェントが図形のアンチエイリアスを無効にする場合があります。
crispEdges: この値は、ユーザーエージェントが、描画速度や幾何学的精度よりも、アートワークの鮮明なエッジのコントラストを重視するよう努めることを示しています。エッジを鮮明にするため、ユーザーエージェントは、すべての線や曲線に対して、あるいは垂直または水平に近い直線に対してのみ、アンチエイリアスを無効にする場合があります。また、ユーザーエージェントは、エッジを端末のピクセルに合わせるように、線の位置や線幅を調整する場合があります。
geometricPrecision: ユーザーエージェントは、処理速度やエッジの鮮明さよりも、幾何学的精度を優先しなければならないことを示します。