インラインSVGを触ってみた #SVG

はじめに

仕事でもよく使うSVG。
とりあえず綺麗に見せてくれて便利！！
と、あまりSVGについて理解してないまま使ってましたがSVGアニメーションを使う機会があったのでSVGについて調べてみました。

SVGとは？

SVG（Scalable Vector Graphics)は画像フォーマットの一種
ベクターデータ
画像ファイルであるSVGですがXMLに準拠しておりテキストエディタで編集することも可能←今回紹介するのはこれ！

SVGのイメージ（小並感）

とりあえず使っとけば綺麗に見えるんでしょ
アニメーションさせることができる（なんか難しそう）
コードを見ると数字がたくさん羅列してあって難しそう（計算苦手）

メリット

拡大縮小しても画質が劣化しない
拡張性・汎用性が高い
アニメーションや透過も可能

デメリット

写真のような沢山の画素を持つものには不向き
複雑な表現になるとページ読み込みが遅くなる

SVGの中身を見てみた

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><style>.cls-1{fill:red;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs>
  <path class="cls-1" d="M52.86,91A47.71,47.71,0,0,1,38.73,88.8C17.39,82.23,4.46,62.51,9.9,44.86a43.53,43.53,0,0,1,7.65-14.29c2.72-3.26,7-7.15,12.2-7.15a10.36,10.36,0,0,1,3.37.56,21.19,21.19,0,0,0,6.8,1.19,29.74,29.74,0,0,0,5.89-.73,29.52,29.52,0,0,1,6-.75,22.49,22.49,0,0,1,6.68,1.09A45.54,45.54,0,0,1,80.36,39.1c7.44,9,10,19.79,6.94,29.62C83.2,82,69.36,91,52.86,91Z"/>
  <path d="M29.75,23.92a10.19,10.19,0,0,1,3.21.53,21.64,21.64,0,0,0,7,1.22,30.47,30.47,0,0,0,6-.74,28.74,28.74,0,0,1,5.88-.74,22.11,22.11,0,0,1,6.53,1.06A45.15,45.15,0,0,1,80,39.41c7.33,8.87,9.83,19.49,6.85,29.16-4,13.09-17.69,21.89-34,21.89a47.67,47.67,0,0,1-14-2.13C17.8,81.83,5,62.4,10.38,45a42.7,42.7,0,0,1,7.56-14.12c2.64-3.18,6.84-7,11.81-7m0-1c-9.38,0-17.4,12.28-20.33,21.79C3.89,62.66,17,82.61,38.59,89.28a48.48,48.48,0,0,0,14.27,2.18c16.32,0,30.62-8.63,34.92-22.6,3.19-10.33.21-21.34-7-30.08A46.32,46.32,0,0,0,58.61,24.3a22.83,22.83,0,0,0-6.82-1.11c-4.46,0-7.61,1.48-11.87,1.48a20.39,20.39,0,0,1-6.64-1.17,11,11,0,0,0-3.53-.58Z"/>
  <path class="cls-2" d="M37,31.75q8.76,3.73,13.9-.95"/>
  <path class="cls-2" d="M44.9,33.15C38.59,22.64,36.07,14.21,37,7.71"/>
</svg>

数字が羅列されてて意味わからん！！！

とりあえず覚えておくタグ

SVGにはタグがいっぱいあります。
ありすぎて実装が難しいと感じてしまいますがとりあえずこの辺を覚えとけば大丈夫だと思います。

<svg>

SVGをHTMLにインラインで埋め込むための要素
描画する図形のキャンバスのようなもので通常widthやheight属性を使ってサイズを指定する
SVGドキュメントの最も外側の要素

<path>

図形を定義する汎用的な要素
SVGの中でも最も複雑な図形を描画できる

<g>

描画される要素をグループ化するための要素
HTMLでいうことろの<div>みたいなもの

<defs>

SVGを構成する部品を再利用できるように定義する要素
必要な場所でuse要素などで参照して利用することができる

<use>

<defs>要素で定義した要素を参照する要素

使い方

SVG画像をテキストエディタで開いてSVGコードにする

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:red;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><path class="cls-1" d="M52.86,91A47.71,47.71,0,0,1,38.73,88.8C17.39,82.23,4.46,62.51,9.9,44.86a43.53,43.53,0,0,1,7.65-14.29c2.72-3.26,7-7.15,12.2-7.15a10.36,10.36,0,0,1,3.37.56,21.19,21.19,0,0,0,6.8,1.19,29.74,29.74,0,0,0,5.89-.73,29.52,29.52,0,0,1,6-.75,22.49,22.49,0,0,1,6.68,1.09A45.54,45.54,0,0,1,80.36,39.1c7.44,9,10,19.79,6.94,29.62C83.2,82,69.36,91,52.86,91Z"/><path d="M29.75,23.92a10.19,10.19,0,0,1,3.21.53,21.64,21.64,0,0,0,7,1.22,30.47,30.47,0,0,0,6-.74,28.74,28.74,0,0,1,5.88-.74,22.11,22.11,0,0,1,6.53,1.06A45.15,45.15,0,0,1,80,39.41c7.33,8.87,9.83,19.49,6.85,29.16-4,13.09-17.69,21.89-34,21.89a47.67,47.67,0,0,1-14-2.13C17.8,81.83,5,62.4,10.38,45a42.7,42.7,0,0,1,7.56-14.12c2.64-3.18,6.84-7,11.81-7m0-1c-9.38,0-17.4,12.28-20.33,21.79C3.89,62.66,17,82.61,38.59,89.28a48.48,48.48,0,0,0,14.27,2.18c16.32,0,30.62-8.63,34.92-22.6,3.19-10.33.21-21.34-7-30.08A46.32,46.32,0,0,0,58.61,24.3a22.83,22.83,0,0,0-6.82-1.11c-4.46,0-7.61,1.48-11.87,1.48a20.39,20.39,0,0,1-6.64-1.17,11,11,0,0,0-3.53-.58Z"/><path class="cls-2" d="M37,31.75q8.76,3.73,13.9-.95"/><path class="cls-2" d="M44.9,33.15C38.59,22.64,36.07,14.21,37,7.71"/></svg>

不要なコードを削除する（整理する）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><style>.cls-1{fill:red;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs>
  <path class="cls-1" d="M52.86,91A47.71,47.71,0,0,1,38.73,88.8C17.39,82.23,4.46,62.51,9.9,44.86a43.53,43.53,0,0,1,7.65-14.29c2.72-3.26,7-7.15,12.2-7.15a10.36,10.36,0,0,1,3.37.56,21.19,21.19,0,0,0,6.8,1.19,29.74,29.74,0,0,0,5.89-.73,29.52,29.52,0,0,1,6-.75,22.49,22.49,0,0,1,6.68,1.09A45.54,45.54,0,0,1,80.36,39.1c7.44,9,10,19.79,6.94,29.62C83.2,82,69.36,91,52.86,91Z"/>
  <path d="M29.75,23.92a10.19,10.19,0,0,1,3.21.53,21.64,21.64,0,0,0,7,1.22,30.47,30.47,0,0,0,6-.74,28.74,28.74,0,0,1,5.88-.74,22.11,22.11,0,0,1,6.53,1.06A45.15,45.15,0,0,1,80,39.41c7.33,8.87,9.83,19.49,6.85,29.16-4,13.09-17.69,21.89-34,21.89a47.67,47.67,0,0,1-14-2.13C17.8,81.83,5,62.4,10.38,45a42.7,42.7,0,0,1,7.56-14.12c2.64-3.18,6.84-7,11.81-7m0-1c-9.38,0-17.4,12.28-20.33,21.79C3.89,62.66,17,82.61,38.59,89.28a48.48,48.48,0,0,0,14.27,2.18c16.32,0,30.62-8.63,34.92-22.6,3.19-10.33.21-21.34-7-30.08A46.32,46.32,0,0,0,58.61,24.3a22.83,22.83,0,0,0-6.82-1.11c-4.46,0-7.61,1.48-11.87,1.48a20.39,20.39,0,0,1-6.64-1.17,11,11,0,0,0-3.53-.58Z"/>
  <path class="cls-2" d="M37,31.75q8.76,3.73,13.9-.95"/>
  <path class="cls-2" d="M44.9,33.15C38.59,22.64,36.07,14.21,37,7.71"/>
</svg>

HTML内に記述する

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs><style>.cls-1{fill:red;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs>
    <path class="cls-1" d="M52.86,91A47.71,47.71,0,0,1,38.73,88.8C17.39,82.23,4.46,62.51,9.9,44.86a43.53,43.53,0,0,1,7.65-14.29c2.72-3.26,7-7.15,12.2-7.15a10.36,10.36,0,0,1,3.37.56,21.19,21.19,0,0,0,6.8,1.19,29.74,29.74,0,0,0,5.89-.73,29.52,29.52,0,0,1,6-.75,22.49,22.49,0,0,1,6.68,1.09A45.54,45.54,0,0,1,80.36,39.1c7.44,9,10,19.79,6.94,29.62C83.2,82,69.36,91,52.86,91Z"/>
    <path d="M29.75,23.92a10.19,10.19,0,0,1,3.21.53,21.64,21.64,0,0,0,7,1.22,30.47,30.47,0,0,0,6-.74,28.74,28.74,0,0,1,5.88-.74,22.11,22.11,0,0,1,6.53,1.06A45.15,45.15,0,0,1,80,39.41c7.33,8.87,9.83,19.49,6.85,29.16-4,13.09-17.69,21.89-34,21.89a47.67,47.67,0,0,1-14-2.13C17.8,81.83,5,62.4,10.38,45a42.7,42.7,0,0,1,7.56-14.12c2.64-3.18,6.84-7,11.81-7m0-1c-9.38,0-17.4,12.28-20.33,21.79C3.89,62.66,17,82.61,38.59,89.28a48.48,48.48,0,0,0,14.27,2.18c16.32,0,30.62-8.63,34.92-22.6,3.19-10.33.21-21.34-7-30.08A46.32,46.32,0,0,0,58.61,24.3a22.83,22.83,0,0,0-6.82-1.11c-4.46,0-7.61,1.48-11.87,1.48a20.39,20.39,0,0,1-6.64-1.17,11,11,0,0,0-3.53-.58Z"/>
    <path class="cls-2" d="M37,31.75q8.76,3.73,13.9-.95"/>
    <path class="cls-2" d="M44.9,33.15C38.59,22.64,36.07,14.21,37,7.71"/>
  </svg>
</body>

通常のHTMLタグと同様にsvgタグ内の情報をそのままHTMLに記述します。
あとは通常と同じようにCSSで装飾したりできます。
SVGもDOMを形成するのでJavaScriptでDOM操作も可能です。

※ xmlns属性を省略することもできます（記載しても大丈夫です）

簡単なアニメーションを実装

See the Pen SVG animation by mikoshiba (@s_miko) on CodePen.

keyframeでSVGのstroke-dashoffset属性を使って円を描く簡単なアニメーションを実装してます。
circleタグは円を描画するためタグです。

まとめ

最初は数字いっぱい書いてあるし難しいんだろうなって思ってましたがこうして調べて理解すると私でも簡単なアニメーションを実装する事ができました。
SVGタグは今回紹介した他にもまだまだたくさんあってできる事がいっぱいあると思うので来年はもっと使いこなせるようになりたいと思います！

参考にしたリンク

SVG 要素リファレンス - SVG: Scalable Vector Graphics | MDN
Animated line drawing in SVG - JakeArchibald.com