SVGパス可視化 & カーブインスペクター

SVGパス可視化 & カーブインスペクターについて

SVGパスのd属性を貼り付けると、コマンドごとの区間に分けて描画し、ベジェ曲線の制御点や円弧の中心も表示します。<svg>のコード全体を貼っても最初のpathのdを取り出します。コマンドの種類別の数、サブパス数と閉じているか、バウンディングボックス、パスの長さを計算し、引数が足りないコマンドなどのエラーを位置付きで知らせます。

整形機能では座標をすべて絶対(大文字)またはすべて相対(小文字)に変換し、小数桁(初期値3桁)を減らし、読みやすく整えるか最大限詰めて出力します。長さは区間ごとに72点で測る近似値なので、ブラウザのgetTotalLength()と小数点以下で少し違うことがあります。

6つのコマンドでほとんど読める

パスは「ペンをどこに置き、どう動かすか」のリストです。アイコンのファイルでよく見るのは次のコマンドです。残りのH・Vは水平・垂直の直線、S・Tは直前の曲線の制御点を対称に引き継ぐ省略形です。

• M x y — ペンを持ち上げて移動します。新しいサブパスが始まります。Mの後に座標が続くとLとして扱われます。
• L x y — 現在の点から直線を引きます。
• C x1 y1 x2 y2 x y — 3次ベジェ。2つの制御点が曲線の出発と到着の向きを決めます。
• Q x1 y1 x y — 2次ベジェ。制御点が1つで形が単純です。TrueTypeフォントの輪郭はこれで作られています。
• A rx ry 回転 大円弧フラグ 方向フラグ x y — 楕円の一部として円弧を描きます。
• Z — 現在のサブパスの始点へ直線を引いて閉じます。塗りだけならZがなくても塗られますが、線(stroke)の角のつなぎ方が変わります。

円弧(A)の2つのフラグが分かりにくい理由

Aコマンドが与えるのは始点・終点・半径だけです。2点を通る半径rの円は普通2つあり、それぞれの円で2点を結ぶ弧には短い側と長い側があります。つまり候補は4本で、2つのフラグがそのうち1本を選びます。large-arcが1なら180°より大きい弧、0なら小さい弧です。sweepが1なら角度が増える向きで、SVGはy軸が下向きなので画面上では時計回りになります。

半径が2点間の距離の半分より小さいと、条件を満たす円がありません。仕様ではちょうど届くまで半径を拡大すると定められていて、このツールもそのように計算します。半径10と書いたのに大きな半円になるのはこの補正のためです。半径がちょうど半分なら候補は半円1つなので、large-arcの値は結果に影響しません。

フラグは0か1の1文字なので区切りなしで続けて書けます。圧縮されたファイルの「a60 60 0 01100 0」は、フラグ0と1の後にx=100、y=0です。このツールはこの表記も読めます。

絶対座標と相対座標

大文字のコマンドはキャンバス原点からの座標、小文字は現在のペン位置からの移動量です。アイコンを別の場所に動かすとき、絶対座標のパスはすべての数値を直す必要がありますが、相対座標なら最初のmを変えるだけです。最適化ツールの出力が小文字中心なのも、小さな移動量は桁が少なくファイルが小さくなるからです。

よくある間違いは、相対cの制御点を「直前の制御点」基準だと思うことです。3組とも区間の始点が基準です。(10,10)から始まるC 20 20, 40 20, 50 10は、相対ではc 10 10 30 10 40 0になります。

zの直後の小文字mは、zが戻ったサブパスの始点を基準に計算されます。手でパスを結合して図形が変な位置に出たら、ここを確認してください。

パスがおかしく表示されるとき

数値の区切りは空白やカンマだけでなく、符号や小数点でもかまいません。「10-5」は10と-5、「.5.5」は0.5と0.5です。読みにくいものの規則上は正しい表記です。逆にLの後に数値が1つしかなければエラーで、ブラウザは普通その地点でパスの描画を止めます。

ドーナツや文字のOのような穴あき図形が塗りつぶされて見えるなら、fill-ruleを疑ってください。初期値のnonzeroでは、内側のサブパスを外側と逆向きに描かないと穴になりません。evenoddにすれば向きに関係なく穴が開きます。

例

使い方

1. d文字列かSVGコードを貼り付けるか、サンプルを選びます。
2. 区間をクリックして制御点、円弧の中心、始点・終点を確認します。
3. 座標方式と小数桁を決め、整形したパスをコピーします。

よくある質問