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

環境、バージョン

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

用意したもの

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

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

クローズパス（正方形）

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

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要素から出してみた

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>

これでも問題なく表示されました。

オープンパス

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

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要素

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

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

これは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 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の正方形を作ってみた

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 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 要素の説明によると

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

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

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

他にもCだのSだのを使えばベジェ曲線を引くための記述方法があるみたいなので、興味があったらW3CのSVG1.1 Recommendation（勧告）のページでも見てみてください。