SVG Path

SVG パスは d 属性のコマンド文字列（M/L/C/Z など）でベクター図形の輪郭を記述する。SVG の図形要素の中で最も強力なものである。

目的

アイコンやチャート、アニメーションに向けて、直線・曲線・円弧などの任意のベクターパスをコンパクトなコマンド文字列で記述する。

メカニズム

d 属性にはコマンド列が入る。M/m は移動（絶対/相対）、L/l は直線、C/c は 3 次ベジェ、Q/q は 2 次ベジェ、A/a は円弧、Z/z はパスの閉鎖である。各コマンドは座標パラメータを取る。

ユースケース

ベクターアイコンの描画
データの可視化
地図のパス描画

関連ツール

SVG オプティマイザー

Optimize SVG by removing comments, metadata, redundant attributes, and whitespace. Shows before/after size comparison。無料、プライベート、100%クライアントサイド。

HTML ミニファイア

Minify HTML by removing comments and whitespace。無料、プライベート、100%クライアントサイド。

References