#52 SVG再び　基礎から【ぴよぴよコーダーの開発日記】

以前もSVGアニメーションの記事を書きましたが、あれは、SVGを使ったCSSアニメーションだったんでは。。。と、いう気持ちが半年くらいありまして、もう少しSVGについて調べてみました。

SVG ( Scalable Vector Graphics ) ：2次元グラフィックをXMLで記述する言語

SVGでできること：グラデ、マスク、クリップ、フィルターなど

描画方法：<１>手動で描く　<２>イラレ、xd、Figmaなどで描く

前回はイラレで作ったので、簡単な図形を手動で描いてみます。

<svg width="540" height="540" viewbox="0 0 540 540">
   <circle class="hoge" r="200" cx="270" cy="270" fill="#ff0" stroke="#000" stroke-width="10"/>
</svg>

デモ　←ホバーでアニメーションする

svgタグ：svgですよっていうタグ。width, height指定できる

viewbox：描画範囲。開始地点のxy座標と終了地点のxy座標を記述、カンマなし。

circleタグ：マルが描ける。ほかにも四角形のrectタグ、多角形のpolygonタグなどがある。線のpathタグもある。

r属性：半径のこと

cx, cy：中心座標

fill：塗

stroke：線の色

参考：SVGの記述方法

表示方法：

<１>imgタグの中にsvgファイルとして読み込む。デメリットとしては、CSSやJSで色やアニメーションなど変更できない。

<img src="hoge.svg" style="width:100px;height:100px">

<２>SVGコードを直接HTMLに張り付ける。色など変更しやすい。(コード例は上のcircleタグなど参照）

アニメーション方法

<１>CSSでアニメーションさせる。（コードやデモは上述参照）。デメリットとしては、CSSだとpathのd要素にアクセスできない。あとIE11で動かない

<２>SMIL（スマイル）でアニメーションさせる。SMILとは、Syncronized Multimedia Integration Languageの略。すげーかっこいい名前。

<svg width="540" height="540" viewbox="0 0 540 540">
   <circle r="200" cx="270" cy="270" fill="#ff0" stroke="#000" stroke-width="10">
     <animate attributeName="fill" to="orange" dur="3s" repeatCount="indefinite"/>
     <animate attributeName="stroke" to="red" dur="3s" repeatCount="indefinite"/>
     <animate attributeName="stroke-width" to="100" dur="3s" repeatCount="indefinite"/>
   </circle>
</svg>

デモ

作成の注意としては、SMILを描くときは、circleなどのタグは単独のタグではなくて閉じタグが付くということと、SMILつまり、animateタグは、そのcircleタグの開始タグと終了タグの間に単独タグとして配置すること。

参考：SMILによるSVGアニメーション

SMILは大きさや色などの属性を変えるanimateタグ、回転、拡縮、移動などのanimatetransform、パスに沿った移動のanimatemotionの３種類タグがある。IE11は非対応。

<３>JSでDOMのidとか取得して色や形、回転、移動、パス変形など変幻自在にアニメーションさせる（しかしコードが煩雑で難易度が高い）。下記はコードのイメージ。

id名.style.fill = 'yellow';

<３．１>　JSのライブラリを使う（時間があるときデモ作る）

→　こちらの記事で作りました

<４>　Adobe Animate, After Effectを使う（時間があるときデモ作る）

参考：UI改善にキラリと役立つ！SVGアニメーションの作り方まとめ