Illustrator で吐き出されたSVGのオープンパスとクローズパスの違い

## 環境、バージョン

* Mac OS X El Capitan
* Adobe Illustrator CC
* jQuery 3.1.0
* Velocity.js 1.3.0

## 用意したもの

塗りなしの正方形と、その正方形の上辺を削除したクローズパスを用意

![スクリーンショット 2016-09-23 21.59.17.png](https://qiita-image-store.s3.amazonaws.com/0/9988/e35094c2-df2c-39a3-01f2-21308020b10e.png)

イラレから吐き出される、XML宣言とコメントは削除しておいた。


## クローズパス（正方形）

path要素がgで囲まれているのがわかります。このgタグは子要素をグルーピングする要素で、子要素が複数ある場合、gに対して設定したスタイルなどが子要素に適用されたりします。詳しくは[Mozzila Develper NetworkのSVG要素リファレンス](https://developer.mozilla.org/ja/docs/Web/SVG/Element/g)でもみるよろし

```xml:Close.svg
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
	<g>
		<path d="M270.2,31v238.9H31.3V31H270.2 M271.2,30H30.3v240.9h240.9V30L271.2,30z"/>
	</g>
</svg>
```

このコードではgに対してなにも属性がなかったので試しにpathをg要素から出してみた

```xml:Close.svg
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
		<path d="M270.2,31v238.9H31.3V31H270.2 M271.2,30H30.3v240.9h240.9V30L271.2,30z"/>
</svg>
```

これでも問題なく[表示されました](http://webya.in/qiita/svg/Close.html)。

## オープンパス

続いてオープンパス。オープンパスは、pathタグではなくて「polyline要素」で定義されます。polyline要素は「幾つかの座標で繋がった直線を生成」する要素です。

```xml:Open.svg
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
	<style type="text/css">
		.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
	</style>
	<polyline class="st0" points="271.2,30 271.2,270.9 30.3,270.9 30.3,30 "/>
</svg>
```

### line要素

次に以下のようなパスを用意してみた

![スクリーンショット 2016-09-23 23.17.33.png](https://qiita-image-store.s3.amazonaws.com/0/9988/c3b1aec0-f652-4071-4ef3-706a616a203a.png)

これは、縦100px、横100pxのアートボードに対し、座標0,0地点から右方向に塗りなしの直線を100px引いたものです。

これはsvg化すると以下のようになる

```xml
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
	<style type="text/css">
		.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
	</style>
	<line class="st0" x1="0" y1="0" x2="100" y2="0"/>
</svg>
```

polylineが「**幾つかの座標**で繋がった直線を生成」に対し、line要素は「2つの座標を繋いた直線を描画」するものです。x1, y1, x2, y2 の値を見るとわかりやすい感じの値になっていますね


### 正方形の座標をきれいな場所においてみる

0, 0に100pxの正方形を作ってみた

![スクリーンショット 2016-09-23 23.27.48.png](https://qiita-image-store.s3.amazonaws.com/0/9988/2a13eda4-d410-6e9f-b4f9-fb1c7f8575c8.png)

svgのソースはこんな感じ

```xml
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
	<style type="text/css">
		.st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-miterlimit:10;}
	</style>
	<rect x="0" class="st0" width="100" height="100"/>
</svg>
```

おやおや、今度のは最初に作ったやつと違ってpath要素ではなくrect要素で生成されました。そもそもpath要素ってなんなんだろってことで調べてみました

[Mozilla Developer Network の Path 要素の説明によると](https://developer.mozilla.org/ja/docs/Web/SVG/Element/path)

> path 要素は図形を定義する汎用的な要素です。全ての基本図形は path 要素によって定義されます。

だそうです。ちなみにpath要素のd属性内に現れるアルファベットには当然意味があって、

* M　は　moveto　を意味し、大文字で絶対位置、小文字で相対位置を示す
* Z　は　closepath でパスを閉じる・終了するということを示す
* L　は lineto を意味し、Lで絶対座標、lで相対座標を示し、直線を描くことを意味します
* V　も lineto で線を描くが、垂直線を示す（Lだけでいいんじゃね？）
* H　も lineto で線を描くが、水平線を示す

他にもCだのSだのを使えばベジェ曲線を引くための記述方法があるみたいなので、興味があったら[W3CのSVG1.1 Recommendation（勧告）](https://triple-underscore.github.io/SVG11/paths.html)のページでも見てみてください。