#52 SVG再び 基礎から【ぴよぴよコーダーの開発日記】
以前もSVGアニメーションの記事を書きましたが、あれは、SVGを使ったCSSアニメーションだったんでは。。。と、いう気持ちが半年くらいありまして、もう少しSVGについて調べてみました。
SVG ( Scalable Vector Graphics ) :2次元グラフィックをXMLで記述する言語
SVGでできること:グラデ、マスク、クリップ、フィルターなど
描画方法:<1>手動で描く <2>イラレ、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の記述方法
表示方法:
<1>imgタグの中にsvgファイルとして読み込む。デメリットとしては、CSSやJSで色やアニメーションなど変更できない。
<img src="hoge.svg" style="width:100px;height:100px">
<2>SVGコードを直接HTMLに張り付ける。色など変更しやすい。(コード例は上のcircleタグなど参照)
アニメーション方法
<1>CSSでアニメーションさせる。(コードやデモは上述参照)。デメリットとしては、CSSだとpathのd要素にアクセスできない。あとIE11で動かない
<2>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は大きさや色などの属性を変えるanimateタグ、回転、拡縮、移動などのanimatetransform、パスに沿った移動のanimatemotionの3種類タグがある。IE11は非対応。
<3>JSでDOMのidとか取得して色や形、回転、移動、パス変形など変幻自在にアニメーションさせる(しかしコードが煩雑で難易度が高い)。下記はコードのイメージ。
id名.style.fill = 'yellow';
<3.1> JSのライブラリを使う(時間があるときデモ作る)
→ こちらの記事で作りました
<4> Adobe Animate, After Effectを使う(時間があるときデモ作る)
参考:UI改善にキラリと役立つ!SVGアニメーションの作り方まとめ
この記事が気に入ったらサポートをしてみませんか?