付録B: 実装に関する注意

B.1. はじめに

以下の注意事項は、SVG言語の機能で要求されるフォーマットへのコンテンツ変換や、そこからの変換を行う際に、ソフトウェア開発者が利用できるアルゴリズムやその他の手法について説明します。

B.2. 楕円弧パラメータ変換

他のパスセグメント表記と一貫性を持たせるため、SVGパス内の弧は曲線上の開始点と終了点で定義されます。

この楕円弧のパラメータ化はエンドポイントパラメータ化と呼ばれます。エンドポイントパラメータ化の利点のひとつは、すべてのパスコマンドが新しい「現在の点」の座標で終わるという一貫したパス構文を可能にすることです。

しかし、これはソフトウェアや数学で弧の幾何を記述する唯一の方法ではありません。 この節では、もう一つの中心パラメータ化について説明し、SVGのエンドポイントパラメータ化との相互変換方法も示します。

B.2.1. 楕円弧のエンドポイント構文

SVGパスコマンドで表される楕円弧は、以下のパラメータで順番に記述されます:

(x1, y1)は、パス上の現在の点の絶対座標で、前のパスコマンドの最後の2つのパラメータから取得されます。

rx およびry は楕円の半径(主軸・副軸とも呼ばれます)です。

φは、現在の座標系のx軸から楕円のx軸への角度です。

fAは ラージアークフラグで、180度以下の弧を選択する場合は0、180度を超える弧を選択する場合は1です。

fSは スウィープフラグで、中心から弧への線が減少方向に角度を移動する場合は0、増加方向の場合は1です。

(x2, y2)は弧の終点の絶対座標です。

B.2.2. パラメータ化の代替案

楕円弧上の任意の点(x, y)は、次の2次元行列式で表せます:

(eq. 3.1)
( x y ) = ( cos φ - sin φ sin φ cos φ ) · ( r x cos θ r y sin θ ) + ( c x c y )
    x = rx*cos(θ)*cos(φ) - ry*sin(θ)*sin(φ) + cx
    y = rx*cos(θ)*sin(φ) + ry*sin(θ)*cos(φ) + cy
  

(cx, cy)は楕円の中心座標です。

rxおよびryは楕円の半径(主軸・副軸とも呼ばれます)です。

φは現在の座標系のx軸から楕円のx軸への角度です。

θは弧上の点(x, y)が位置する弧周上の角度で、次の範囲になります:

楕円を伸ばして回転させた円と考える場合、θ1θ2、Δθはストレッチ・回転前の開始角・終了角・スウィープ角となります。 これはグラフィックスAPIで一般的な別のパラメータ化につながり、中心パラメータ化と呼ばれます。次節では中心パラメータ化とエンドポイントパラメータ化の相互変換式を示します。

B.2.3. 中心からエンドポイントへのパラメータ変換

次の変数が与えられます:

cx cy rx ry φ θ1 Δθ

求めるべきは以下です:

x1 y1 x2 y2 fA fS

これらは以下の式を使って求めることができます:

x 1 y 1 = cos φ - sin φ sin φ cos φ r x cos θ 1 r y sin θ 1 + c x c y
(式 4.1)
x 2 y 2 = cos φ - sin φ sin φ cos φ r x cos θ 1 + Δ θ r y sin θ 1 + Δ θ + c x c y
(式 4.2)
f A = 1 if Δ θ > 180 ° 0 if Δ θ 180 °
(式 4.3)
f S = 1 if Δ θ > 0 ° 0 if Δ θ < 0 °
(式 4.4)

B.2.4. エンドポイントから中心へのパラメータ変換

次の変数が与えられます:

x1 y1 x2 y2 fA fS rx ry φ

求めるべきは以下です:

cx cy θ1 Δθ

式は、(x1, y1)から(x2, y2)への線分の中点に原点を移動し、座標軸を楕円の軸に合わせて回転することで簡略化されます。 変換後の座標はプライム記号で表記され、中間値として求められます。この手順は以下のステップで構成されます:

B.2.5. 範囲外半径の補正

この節では、パス実装に関する注意で説明されている範囲外のrxおよび ryに対して必要な数学的調整について説明します。 アルゴリズムとしては、以下のステップで構成されます:

B.3. 高精度ジオメトリ生成に関する注意

この節は参考情報です。

SVGの実数精度は単精度です。 技術データを扱う適合SVG生成器で、単精度を超える情報表現が必要な場合(地図や技術図面など)には、一貫した表示を適合SVGビューアで保証するため、この節で説明されている手順に従うことが推奨されます。

単精度よりも高い有効精度で表示したい場合は、CTM生成時に少なくとも倍精度浮動小数点が使用されることを利用することで可能となります(適合SVGビューア節のCTM生成処理参照)。 これを活用したコンテンツ生成手順は次の通りです:

  1. コンテンツをタイルに分割し、各オブジェクトの位置やサイズに必要な有効桁数が単精度浮動小数点の範囲内となるようにします。なお、この記述において、元のコンテンツが持つ座標系をソース空間と呼びます。
  2. 各タイルごとに、ソース空間からタイル空間への座標変換行列を生成します。タイル空間は、タイルの左上を原点(0,0)とする座標系です。変換行列の各要素は単精度の範囲内でなければなりません。
  3. 各タイルの内容を、生成した座標変換行列を用いてソース空間からタイル空間へ変換します。その結果、各オブジェクトのパラメータは単精度の範囲内の有効桁数で表現できます。
  4. 各タイルごとに、タイル空間からソース空間への逆変換行列を生成します。これは次のステップで要素のtransform属性として使用されます。
  5. SVG内で各タイルを個別のユーザー座標系として配置します。例えば、タイルは‘g’要素として表現し、transform属性に前のステップで生成した変換行列を指定します。そして、ステップ3で生成した分割グラフィックスはその子要素として配置します。
タイルより大きいベクターグラフィックの分割例
分割前 分割後
分割前の例 分割後の例
有効桁数の改善例
ステップ1:分割 ステップ5:有効桁数を小さくしつつ適切な配置
タイルへの分割例 分割内容の配置例
この例ではユーザー座標系が7桁のタイルを用いることで8桁の有効数字を提供しています。