SVGパス編集

SVG Path Editor

パスデータを絶対・相対コマンドで書き換え、移動・拡大・回転・向きの反転を加え、バウンディングボックスとプレビューを表示します。

`d`属性を読み、変換したものを返します。絶対と相対、移動、拡大縮小、バウンディングボックスの中心まわりの回転、向きの反転、指定した小数桁での丸めです。結果はPath2Dを通して描くので、円弧の計算はSVGのレンダラと同じやり方でブラウザが行い、バウンディングボックスと、そのまま貼れるviewBoxを報告します。

🔒 ブラウザの中だけで動きますsvgpathvectoredit

path の d 属性

小数の桁: 3

コマンドの形式

X 方向に移動: 0Y 方向に移動: 0拡大率: 1×回転: 0°

プレビュー

破線の長方形がバウンディングボックス、赤い点が始点です。塗りは nonzero 規則です。

結果

M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z

<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z" />

コマンド

サブパス

数値

バイト

113 → 97

バウンディングボックス

x 2.00 y 2.00 w 20.00 h 20.00

viewBox

2.00 2.00 20.00 20.00

何をするか

· SVG 最適化と同じパーサーで読むので、1.5.5 のような詰めた書き方も円弧のフラグも正しく読めます。絶対と相対の変換、小数の丸め、移動、拡大縮小、バウンディングボックスの中心を軸にした回転、向きの反転、バウンディングボックスの算出ができます。
· 回転させると H と V は L になり、円弧の半径・x 軸回転・sweep フラグは SVG 1.1 付録 F.6 の式で計算し直します。バウンディングボックスは制御点ではなく、各曲線の実際の極値から求めます。
· 曲線を単純化することはしません。それは形そのものを変える作業で、どこまで許すかを決めるのは人です。

ファイル全体を小さくするなら SVG 最適化、曲線の加速のしかたを調整するならイージング曲線エディタがあります。

使い方

d属性を貼り付けます
囲みの`<path>`は要らず、値だけです。詰めた書き方でも構いません。`1.5.5`を2つの数として読みますし、区切りのない円弧のフラグも扱えます。パーサがSVG最適化のものだからです。
必要な変換をかけます
移動・拡大縮小・回転は座標そのものに適用されるので、出てきたものに`transform`属性は要りません。回転はバウンディングボックスの中心まわりで、アイコンならそれが望みどおりの動きであり、素の`rotate()`がすることとは違います。
絶対と相対、そして精度を選びます
相対コマンドのほうがたいてい短く、インラインで埋め込むアイコンではそれが効きます。本当に容量を左右するのは精度です。24単位のアイコングリッドなら小数3桁で十分で、6桁から2桁に落とすと文字列が半分になることもよくあります。動かしながらバイト数の表示を見てください。
塗りがおかしければ向きを反転します
赤い点が始点を示すので、反転の効き目が目に見えます。nonzeroの規則で内側のサブパスが穴になるかを決めるのは向きですし、stroke-dashのアニメーションがたどるのも向きです。
パスか、viewBoxを取ります
出力欄には`d`の値と、そのまま使える`<path>`要素が入っています。統計のパネルにはバウンディングボックスがviewBoxの文字列として出ていて、アイコンを枠にぴったり収めるいちばん速い方法です。