パスデータ・とは？初心者にも分かる基本と使い方を徹底解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

パスデータとは？

パスデータとは、図形の“道順”を数字と文字の組み合わせで表すデータのことです。特にベクター画像の世界で使われ、線や曲線の描画手順を1つの文字列としてまとめたものを指します。

SVGとパスデータの関係

ウェブ上でよく使われるSVGは、パスデータを使って複雑な形を描きます。パスデータはコマンドと座標の並びで構成され、どこから描き始め、どの点へ動き、どのような曲線になるかを指示します。

基本の仕組み

基本となるのは「コマンド」と「座標」のセットです。コマンドは一文字で表され、文字の大文字・小文字で座標の絶対位置か相対位置かを示します。

<th>コマンド

意味	例
M	描画を開始する場所へ移動	M 10 10
L	直線を引く	L 50 10
C	キュービックベジェ曲線	C 20 20, 40 40, 50 10
Q	二次ベジェ曲線	Q 25 25, 40 40
A	楕円弧	A rx ry x-axis-rotation large-arc-flag sweep-flag x y
Z	パスを閉じる	Z
H	水平線への移動	H 60
V	垂直線への移動	V 30
S	スムーズキュービック曲線	S 25 25, 40 40
T	スムーズ二次曲線	T 30 50

実際には、複数のコマンドを組み合わせて複雑な形を作ります。パスデータは1つの文字列として表現され、描画エンジンが解釈して形を描きます。

簡単な例

次のパスデータは、左上の点から一直線で右へ進み、最後に図形を閉じます。<span>例: M 10 10 L 50 10 L 50 50 Z

使いどころとポイント

ウェブデザインではアイコン作成、図形の地図描画、アニメーションの基礎など、さまざまな場面で活躍します。初心者はまず基本のコマンドと座標の意味を覚え、簡単な図形から練習するとよいでしょう。

覚えておきたいコツ

絶対座標と相対座標の違いを理解することが、せっかくのパスデータを思いどおりに制御するコツです。大文字は常に原点からの位置、

小文字は前の点を起点にして新しい位置を表します。

まとめ

パスデータは、文字列として描画指示をまとめる仕組みです。SVGを学ぶ基礎として押さえておくと、アイコン作成や地図描画、アニメーションの設計など、Webデザインの幅が広がります。

パスデータの同意語

パスデータ: パスの座標と描画指示をまとめたデータ。SVGのPath要素で使われる、M・L・Cなどの命令と座標の並びを指します。
パス情報: パスを構成する座標と指示の情報の総称。描画や形状再現に使われる基本データです。
経路データ: 地図上の経路や描くべき道筋など“経路”そのものを表すデータ。パスデータの意味を広く言い換えた表現です。
座標データ: 点の座標の羅列として表現されるデータ。パスデータの中核で、X座標・Y座標の組み合わせが並びます。
パス座標データ: パスを構成する座標情報を特化して指す表現。M・L・Cなどの命令と座標のセットとして使われます。
パス文字列: パスを文字列形式で表したもの。例えば「M10 10 L20 20」のような命令と座標をつなげた文字列です。
SVGパスデータ: SVGのPath要素に用いられるパスのデータ形式。ベジェ曲線や直線を組み合わせて形状を描画します。
パス命令: パスを描く手順を表す命令の集合。移動・直線・曲線などの描画指示を含みます。
ベジェ曲線データ: ベジェ曲線の情報を表すデータ。曲線の制御点や終点の座標が含まれ、滑らかな曲線を描く際に使われます。
描画パス: 画面上に描く線・形の輪郭を表すデータ。デザインやグラフィック制作で重要な要素です。
形状データ: 形状を表すデータの総称。パスデータを含み、SVGやCanvasなどで使われます。
パス定義: パスの仕様・表現方法を定義した情報。どの座標でどの命令を実行するかを示す説明書のような役割です。

パスデータの対義語・反対語

ラスタデータ（ビットマップデータ）: パスデータはベクター形式で、座標と描画命令で形状を表します。一方、ラスタデータはピクセルの集合からなる描画形式で、拡大すると画質が劣化します。
点データ（離散的データ）: パスデータは連続した線の軌跡を記述しますが、点データは個々の点の集合のみを表します。パスの連結・曲線制御を持たない点データを対比として挙げられます。
座標データのみ（コマンドなしの座標表現）: パスデータには座標と描画コマンドの組み合わせで形を描きますが、座標データのみはコマンド情報を含まず、単純な座標値の羅列に過ぎません。
直線データ（直線のみを表現）: パスデータは曲線や複雑な形状も含めて記述できますが、直線データは直線だけを表現するデータです。
テキストデータ（文字情報データ）: パスデータは図形描画のための座標情報・命令を含みますが、テキストデータは文字情報そのものを表現します。用途が異なる“描画データ”の対比として挙げられます。