はじめに

こんにちは、DAAEテクノロジーGの近藤司 a.k.a. コン・D・ツカサです！

本記事は、最近svgに興味津々な私と弊社ロゴマークのsvgを解読してみようというものです。

svgに宿るdの意思とは何なのか。MDNリファレンスというログポースに頼りながら、ひとつなぎの大秘宝を探し求める旅へいざ行きましょう！

この記事を読んだあなたは、svgのpathを見るだけで何の画像か理解できるパスパスの実の能力者になれる！...かも？

SVGとは

ScalableVectorGraphicの略。

jpegやpngと違い、名前の通りScalableなVectorのGraphicなので拡大してもはっきり見えるのがウリ。

svgファイルとして以外にも、HTMLにタグとして直接svgのコードを埋め込むこともできる優れもの。

SHIFTロゴ

それでは、SHIFTのロゴを事例にみてみましょう。

カッコいいロゴですね。 早速、エディターでsvgファイルの中身を見てみましょう。

(VSCodeをお使いの場合、拡張機能のSvg Previewを使ってプレビュー表示ができるのでおすすめです)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 151.5 45.1">
<path d="M63.6 21.1l-3.2 10H46.2l3.2-10H18.9c-.1 0-12.3.5-14.5 7.4-1.8 5.7 6.4 6.7 9.7 6.7h4.3c1.4 0 5.6.4 4.7 3S17.3 41 16.8 41H1.3L0 45.1h18.1c.1 0 12.3-.5 14.5-7.3 1.8-5.7-6.4-6.8-9.8-6.8h-4.1c-1.5 0-5.6-.4-4.7-3s5.8-2.7 6.3-2.7h19.3l-6.3 19.8h8.5l3.2-9.9h14L55.9 45h8.5l7.7-24-8.5.1zm12.4 0l-7.7 24h8.5l7.7-24H76zm27.9 0c-.1 0-15.5.2-19.4 12.3 0 0-2.9 9.2-3.7 11.7h8.6l3.2-9.9h21.1L115 31H94.2c2.1-3.4 5.2-5.7 9-5.7H128l-6.3 19.8h8.5l6.3-19.8h11.2l1.3-4.2h-45.1z" fill="#d70027"/><path d="M11.4 5c-2.3 0-4 1.3-4 2.6 0 .6.3 1.1 2.6 1.1-.2.5-.3.8-.4 1.1-1.4-.1-3.5-.2-3.5-2.1 0-1.1.8-1.8 1.2-2.1-1.3.1-2.7.5-3.6.8L3.4 5c.4 0 1 0 2.2-.2.3-.2.9-.8 1.6-1.4l.4-.4c-1.7.1-2 .2-2.5.2L5 1.9h1c.6 0 1.8 0 2.9-.2.3 0 .5-.1.8-.2l.5.7c-.5.5-1.3 1.1-2.8 2.4 2.6-.4 2.9-.5 3.9-.7l.1 1.1zm11.1 3.4c2.1-.4 2.7-2 2.7-3 0-1.1-.7-2.3-2.3-2.4-.3 3.4-1.6 5.8-2.6 5.8-.7 0-1.9-1.1-1.9-2.8 0-1.9 1.8-4.2 4.3-4.2 1.9 0 3.7 1.3 3.7 3.5 0 1.4-.6 2.2-1.1 2.8-.6.7-1.4 1-2 1.3-.3-.4-.4-.6-.8-1zM19.6 6c0 .8.4 1.4.7 1.4.3 0 .5-.6.7-1 .6-1.6.7-2.7.7-3.2-1.3.5-2.1 1.9-2.1 2.8zm17.1-3V1.4h1.2c.1 0 .2 0 .2.1s-.1.1-.3.2V3h1.3c-.3-.1-.5-.2-.6-.3.4-.4.6-1 .7-1.2l1.1.4c.1 0 .1.1.1.1 0 .1-.1.1-.3.1-.1.4-.4.7-.5.9h1.7v2h-1.1V3.8h-5.7V5h-1.1V3H35c-.3-.5-.3-.6-.6-1l.9-.5c.1.1.5.6.8 1.2-.1.1-.4.3-.5.3h1.1zm1.2 3.5h2.6v2c0 .3 0 .6-.5.8-.1 0-.5.2-1.3.2 0-.3-.2-.8-.4-1.1.1 0 .5.1.6.1.4 0 .4-.1.4-1h-1.4v2.4h-1.1V7.4h-1.4v1.9h-1.1V6.5h2.5v-.4H35v-2h4.7v2h-1.8v.4zM36 4.9v.6h2.6v-.6H36zM51.5 3v.8h-2.9V3h2.9zm-1.7 6.4v.4h-1V6.5h2.6v3.2h-.9v-.3h-.7zm1.4-7.6v.8H49v-.8h2.2zm0 2.4V5H49v-.8h2.2zm0 1.2v.8H49v-.8h2.2zm-.6 3.1v-1h-.8v1h.8zm6.3-2.4l.1.1c0 .1-.1.1-.3.1-.4.7-.6 1.1-.7 1.3 0 .1.2.6.3.6.1 0 .2-.6.2-.8.2.3.3.5.7.7-.2 1.1-.4 1.7-.9 1.7-.4 0-.8-.8-1-1.2-.5.6-.9 1-1.4 1.4-.2-.3-.4-.5-.7-.7.3-.2.4-.3.6-.5h-1.3v.7h-.9V5.7h2.6v2.6c.4-.4.6-.7.7-.8-.1-.5-.2-1.1-.3-2.1h-3.2v-.9h.6c0-.3-.2-.6-.3-1l.6-.3h-.8v-.8h.9v-.9h1.1c.1 0 .2 0 .2.1 0 0 0 .1-.2.2v.6h.9v.9h-.8l.6.2s.1 0 .1.1-.1.1-.2.1c-.1.3-.3.8-.3.8h.7V1.4h1c.1 0 .2 0 .2.1s-.1.1-.2.2v2.8H57v.9h-1.4c0 .2 0 .5.1.9 0-.2.1-.3.3-.8l.9.6zm-4.5-2.8c.2.6.3.9.4 1.1l-.5.1h.8c.1-.3.3-.7.4-1.3h-1.1zm1 3.6v-.5h-.8v.5h.8zm-.8.6V8h.8v-.5h-.8zm3.8-5.4c.2.5.4.9.6 1.6-.4.1-.5.1-.9.3-.1-.3-.2-1-.5-1.5l.8-.4zm4.9 5.1c.9.6 1.7 1.3 2 1.6l-.9.9c-.5-.7-1.1-1.2-1.8-1.6l.7-.9zM72 5.4l.1.1c0 .1-.2.1-.3.1l-.1.1h2.7l.4.5c-.5.8-1.1 1.3-1.6 1.8.4.2 1.8.8 3.3.7-.4.4-.5.6-.7 1.1-.4 0-2-.2-3.5-1.2-.9.5-1.6.8-3.4 1.2-.2-.4-.3-.6-.7-1 .9 0 2.1-.3 3.2-.9-.5-.4-.7-.8-.8-1-.7.6-1.2.9-1.6 1.1-.3-.4-.4-.5-.8-.8.6-.3 1.8-.7 2.8-2.2-.4.3-.7.5-1.2.6-.2.1-.3-.1-.8-.6 1-.3 1.7-.6 1.8-1.9h-1.4l.7.5c.1 0 .1.1.1.1l-.1.1h-.2c-.5.6-.7.8-1.4 1.3-.3-.4-.7-.6-.8-.7.4-.2.9-.6 1.5-1.3h-1.3v-.9h3.6v-.8h1.2c.1 0 .2 0 .2.1s-.1.1-.2.2v.5h3.6v.9h-2.6v1.8c0 .4-.1.7-1.4.8-.1-.5-.4-.9-.5-1 .2 0 .4.1.6.1.1 0 .3 0 .3-.2V3.1h-.8c0 .4-.1 1.3-.8 2l.9.3zm-.6 1.3c.2.2.4.5.8.8.5-.4.7-.6.8-.8h-1.6zm3.3-3.6c.5.4.9.8 1.4 1.5-.1.1-.4.2-.9.6-.5-.7-.8-1-1.3-1.5l.8-.6zm13.6.9c-.2.2-1.4 1.2-2.1 2.1h.2c.4 0 .7.3.7.6 0 .2-.1 1.1-.1 1.2 0 .5.2.6.7.6.2 0 1.1 0 2-.3v1.3c-.9.2-1.8.2-2.2.2-1.8 0-1.8-.8-1.8-1.2 0-.2.1-.8.1-.9 0-.1 0-.4-.3-.4-.2 0-.4.2-.8.6-.4.4-.9 1-1.8 2l-1-.9c1.8-1.6 3.3-3.4 3.9-4.1-.9.3-2.2.5-3 .5l-.2-1.2c2.1.1 4-.4 4.9-.8l.8.7zm-4.1-2.4c.8.2 1.7.3 2.5.3h.6c-.1.4-.1.8-.1 1.1h-.4c-.2 0-1.4 0-2.7-.3l.1-1.1zm19 1.4c-2.3 0-4.3 1.9-4.3 3.5 0 1.1.7 1.8 2.7 1.9-.4.7-.5 1.1-.6 1.4-1.4-.3-3.3-1.1-3.3-3.2 0-1.2.7-2.3 1.9-3.2-.6 0-3.3.3-4.1.6l-.2-1.5h.6c.6 0 4.4-.2 7.1-.9l.2 1.4zm12.3 1.1c.1 0 .1 0 .1.1s-.1.1-.2.1c-.1.5-.1.9-.4 1.8.4.2 1 .6 1.4 1-.4.5-.4.6-.7 1.1-.2-.2-.5-.5-1.1-.9-.3.5-1 1.7-2.1 2.4-.3-.4-.5-.5-1-.8.9-.4 1.7-1.4 2-2.2-.6-.3-1-.4-1.9-.6-1 2-1.4 2.8-2.2 2.8-.7 0-1.3-.6-1.3-1.4 0-1.1 1-2.5 2.9-2.5.1-.3.6-1.6.7-1.8-.9.2-1.7.3-2.1.4l-.3-1.3c1.4 0 2.7-.3 3.3-.6l.8.7c-.6.8-1.2 2.3-1.4 2.7.8.1 1.5.4 1.8.6.3-1 .3-1.7.3-2l1.4.4zm-6.3 3.3c0 .3.2.3.2.3.3 0 .9-1.3 1.1-1.7-.6.1-1.3.6-1.3 1.4zm18.4-5.6c.1 0 .2 0 .2.1s-.1.1-.2.1v1.6c1-.1 1.1-.2 1.8-.2v1.3h-.4c-.4 0-1 .1-1.3.1 0 2.4-.3 2.6-2.1 2.6-.1-.4-.3-1-.3-1.1h.6c.6 0 .6-.1.7-1.3-.7.1-1.4.2-2.1.4 0 .4 0 2 .1 2.4.2.5.8.6 1.4.6.3 0 1.5 0 2.9-.4-.1.4-.1.7-.2 1.3-1.2.2-3 .2-3 .2-1.1 0-2-.2-2.3-1.3-.1-.5-.1-1.2-.1-2.6-1.1.2-1.2.3-1.8.4l-.1-1.4c.5 0 1.4-.1 1.9-.3 0-.5 0-1.7-.1-2.2l1.3.2c.1 0 .2 0 .2.1s-.1.1-.2.1c0 .2-.1 1.3-.1 1.5.5-.1 1.1-.2 2-.3 0-.7 0-1.5-.2-2.2l1.4.3zm12.6.7c-.6.4-2.1 1.8-2.4 2.2.2-.1.6-.2 1.2-.2 1.3 0 2.6.8 2.6 2.4 0 2-1.9 2.8-3.4 2.8-1.4 0-2.2-.7-2.2-1.5s.7-1.4 1.7-1.4c.7 0 1.7.4 1.9 1.4.8-.4.8-1.1.8-1.3 0-.5-.3-1.4-1.6-1.4-1.6 0-2.5 1-3.8 2.3l-1-.9c1-.7 3.4-3.1 4-3.8-.8.2-2.2.3-2.8.3l-.2-1.2c.7 0 3.2 0 4.6-.6l.6.9zm-2.7 5.3c-.3 0-.5.2-.5.4 0 .4.5.6.9.6.2 0 .4 0 .5-.1 0-.6-.4-.9-.9-.9zm10.4.6c0 .7-.6 1.2-1.2 1.2-.7 0-1.2-.5-1.2-1.2s.6-1.2 1.2-1.2c.7-.1 1.2.5 1.2 1.2zm-1.9 0c0 .4.3.7.7.7.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7-.4-.1-.7.3-.7.7z" fill="#3e3a39"/>
</svg>

...さっぱりわけがわからないです。

とりあえずpathのdが厄介そうなので、排除してみます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 151.5 45.1">
    <path d="(略)" fill="#d70027"/>
    <path d="(略)" fill="#3e3a39"/>
</svg>

だいぶスッキリしました。

コードを見てみると、まず目につくのはsvgというトップレベルのタグ。

svgでは、viewBox属性でビューポート（画像サイズ）の高さと幅を定義しています。

(xmlns属性はxml由来のおまじないっていうことで省略。詳しく知りたい方はこちらなど）

続いて、一つ下層のpathタグを見てみましょう。

d属性は大雑把にいうと図形の輪郭を定義している属性です。 （次章で詳しく見ていきます）

fill属性では、d属性で囲んだ範囲を塗りつぶす色を指定しています。

このSVGだと、赤系の領域（社名）と灰色系の領域（キャッチコピー）で二つのpathを使っていることがわかります。

また、ほかにもdで定義した図形の輪郭に色をつけるstroke属性や、その太さを定義するstroke-width属性などがあります。

「、」のdを眺めてみる

それでは、dを読み解いていきましょう！

その前に、簡単のためキャッチコピーの「その常識、変えてみせる。」から「、」だけ抽出して図形の輪郭を表示するようにしてみました。 （一部、説明のため手を加えています）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" >
    <path d="
        m 4.9 5.1
        c 0.9 0.6 1.7 1.3 2 1.6
        l -0.9 0.9
        c -0.5 -0.7 -1.1 -1.2 -1.8 -1.6
        z" fill="#3e3a39" stroke="white" stroke-width="0.1"
    />
</svg>

前述のとおり、dはpathの図形の形を定義します。 パスコマンドをあらわす英字1文字とそれに対応した座標が一組の命令となり、命令のリストで図形の輪郭が描かれます。 いうなれば、dがコンパスとなってpathの航路を描くようなイメージです。 今回の図形だと、m,c,l,zの4種類の命令が使われています。

個々の命令を見ていく前に、svgで扱う座標についての注意が必要です。 svgではビューポートの左上が原点で、x軸は右方向、y軸は下方向が正として扱われます！

それでは、MDNのリファレンスと供に具体的なパスコマンドを見ていきましょう。 https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d

mは、カーソルを相対座標で動かすパスコマンドです。 m 4.9 5.1では、現在のカーソル地点（原点)から(4.9,5.1)に動かしています。 mではカーソルを動かしているだけで、線が引かれてない点に注意しましょう。

次はc、3つの相対座標を引数で取って曲線を描くパスコマンドです。現在地点と引数で計4つの座標を用いて3次ベジェ曲線を描きます。

3次ベジェ曲線について少し乱暴な説明をすると、2点間に引いた線分が残り2点に引っ張られているような曲線のイメージです。作図方法に関して興味ある方は、こちらが非常にわかりやすくオススメです。

c 0.9 0.6 1.7 1.3 2 1.6の場合、現在のカーソル座標から3つ目の相対座標(2, 1.6)に向けて曲線が引かれます。1点目(0.9, 0.6)と2点目(1.7, 1.3)がに向かって線が曲がりますが、現在位置と3点目をつなぐ直線から大きく離れていないため、直線に近い形状になります。

3つ目はl、引数の相対座標を取って現在のカーソル地点から線分を描くパスコマンドです。カーソルを動かして前の座標から新しい座標まで直線を引きます。

同じように、cで曲線を描画します。

そして最後がz。現在地点から最初の座標まで直線を引きます。（引数として座標は不要）

少しずつ読めるようになってきたのではないでしょうか。

この調子で読み進めていきましょう！

SHIFTロゴのdを眺める準備

次は少しレベルを上げて、SHIFTロゴのコードをみてみます。 今度はそのままのコードにチャレンジしてみましょう。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 151.5 45.1"><path d="M63.6 21.1l-3.2 10H46.2l3.2-10H18.9c-.1 0-12.3.5-14.5 7.4-1.8 5.7 6.4 6.7 9.7 6.7h4.3c1.4 0 5.6.4 4.7 3S17.3 41 16.8 41H1.3L0 45.1h18.1c.1 0 12.3-.5 14.5-7.3 1.8-5.7-6.4-6.8-9.8-6.8h-4.1c-1.5 0-5.6-.4-4.7-3s5.8-2.7 6.3-2.7h19.3l-6.3 19.8h8.5l3.2-9.9h14L55.9 45h8.5l7.7-24-8.5.1zm12.4 0l-7.7 24h8.5l7.7-24H76zm27.9 0c-.1 0-15.5.2-19.4 12.3 0 0-2.9 9.2-3.7 11.7h8.6l3.2-9.9h21.1L115 31H94.2c2.1-3.4 5.2-5.7 9-5.7H128l-6.3 19.8h8.5l6.3-19.8h11.2l1.3-4.2h-45.1z" fill="#d70027"/></svg>

先ほどの「、」のsvgで英字1文字のパスコマンドと座標の命令セットだということを学んだので、Mコマンドで(63.6, 21.1)に移動して、lコマンドで(-3.2, 10)に線分を引いて...という構成であることがわかるのではないでしょうか。

この点が理解できていたら、svgの基本の「き」は抑えられているので安心してください！

なお、前章でみたmコマンドは小文字で今回は大文字となっていますが、mに限らず小文字のパスコマンドは引数を相対座標で、大文字の場合は絶対座標で評価するという違いがあります。

また、cの引数で座標が3つではなく6つ与えられている箇所があります。この場合、cと前半3つの引数で一回命令が評価され、そのあと後半3つの引数でcがもう一度評価されることとなります。 （つまり、同じパスコマンドを2つ連続で使う場合は2つ目のパスコマンドを省略可能ということです）

パスコマンド前後やマイナス直前の空白スペース、小数の整数部が0が省略されている点にも注意が必要です。

今回、新しいパスコマンドとしてhとsが使われています。 こちらについてリファレンスを確認してみましょう。

hでは、現在のカーソル地点から引数（x座標のみ）まで水平線を引きます。

sは、直前のパスコマンドがcの場合、直前のcで描かれた3次ベジェ曲線に対して滑らかになるように3次ベジェ曲線を描きます。cと違い引数の点が2つであることに注意が必要です。

これでSHIFTロゴを読み解くうえで必要な知識はそろったので、あとは一個ずつ読み進めるだけです。

次章ではSHIFTロゴのsvgコードを通しで眺めてみます。 ぜひ、手元にメモ帳とペンを用意して実際に書きながらみてみてください！

「SH」

M63.6 21.1l-3.2 10H46.2l3.2-10H18.9c-.1 0-12.3.5-14.5 7.4-1.8 5.7 6.4 6.7 9.7 6.7h4.3c1.4 0 5.6.4 4.7 3S17.3 41 16.8 41H1.3L0 45.1h18.1c.1 0 12.3-.5 14.5-7.3 1.8-5.7-6.4-6.8-9.8-6.8h-4.1c-1.5 0-5.6-.4-4.7-3s5.8-2.7 6.3-2.7h19.3l-6.3 19.8h8.5l3.2-9.9h14L55.9 45h8.5l7.7-24-8.5.1zm

まず、ロゴの「SH」部分からです。Hの一画目が始点となっていて、反時計回りに輪郭が描画されています。

冒頭のM63.6 21.1l-3.2 10H46.2l3.2-10で上向きのコの字が描かれており、直線なので比較的わかりやすいですね。

ただ、ところどころHやLで絶対座標が使われているところが難所です。現在の座標がどのくらいか、頭の片隅に置きながら読んでいく必要がありますね。

そして、c-.1 0-12.3.5-14.5 7.4-1.8 5.7 6.4 6.7 9.7 6.7、c1.4 0 5.6.4 4.7 3S17.3 41 16.8 41、c.1 0 12.3-.5 14.5-7.3 1.8-5.7-6.4-6.8-9.8-6.8、c-1.5 0-5.6-.4-4.7-3s5.8-2.7 6.3-2.7、と怒涛のベジェ曲線ラッシュ(2×4本)が続きます。

cやsをみるときは、あまり厳密には考えずに終点がどこなのか、そしてどの方向に曲がっているかの2点を抑えるのがコツです。

一組目の曲線を見てみると、まず前半の曲線は(0,0)と(-14.5,7.4)の2点を通って、(-0.1,0)と(-12.3,0.5)の方に曲がるので左上に凸の形状となっています。

後半部分では前半での移動先を原点として(0,0),(9.7,6.7)の2点を通り(-1.8,5.7)と(6.4,6.7)に曲がるため左下に凸の形状であり、前半と組み合わせると左右反転した「つ」のような軌跡となることがわかります。

長い長い「S」カーブのベジェ曲線を抜けると、あとは冒頭と同じように直線でHの下側が描写されて「SH」は終わりです。

「I」

m12.4 0l-7.7 24h8.5l7.7-24H76z

次は「I」。直線のみでシンプルです！もはや説明不要。

「FT」

m27.9 0c-.1 0-15.5.2-19.4 12.3 0 0-2.9 9.2-3.7 11.7h8.6l3.2-9.9h21.1L115 31H94.2c2.1-3.4 5.2-5.7 9-5.7H128l-6.3 19.8h8.5l6.3-19.8h11.2l1.3-4.2h-45.1z

最後は「FT」。こちらも直線的な形状なので簡単そうです。

...と思ったら冒頭からcの曲線。（そうなんです、弊社のFは角が丸いんです）

ただ、冒頭のc-.1 0-15.5.2-19.4 12.3 0 0-2.9 9.2-3.7 11.7に含まれる2つのベジェ曲線は、ともに左上に凸の形状であるためそれほど入り組んだ軌跡とはならなさそうです。

以降は単発のベジェ曲線と直線だけなので、ここまでたどり着いた皆さんであれば、余裕なはず。

おわりに

さて、dの意思を探求する旅はいかがだったでしょうか。 無事、〇NE PIECEを見つけることはできましたか？

これを機に、皆さんのお好きな画像でsvgを眺めてみると、新たな魅力を発見できるかもしれません。

最後に、練習問題としてsvgコードを一つ出します。 パスパスの実の能力が身についたのか、是非チャレンジしてみてください！

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="
        M 50 50
        c -5 -10 -20 -7 -20 5
        s 25 40 25 -50
        l 0 65
    " stroke="red" fill="none"/>
</svg>

参考文献

• SVG: スケーラブルベクターグラフィック | MDN

• xmlns: XMLのネームスペース（名前空間）を表すURIを指定する属性

• ベジェ曲線を手で描いてみる | にせねこメモ

• SHIFT会社概要・グループ会社紹介 – 株式会社 SHIFT

＼もっと身近にもっとリアルに！DAAE 公式 Twitter/

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/