【初心者SVG】adobe Illustratorで簡単にSVGアニメをつくる

WEB

2020.04.062020.02.20

最近やっとSVGを触り始めた初心者です。

メインビジュアルがさみしいなと思った時になんかできないかなと思った時に見つけたのがこれです。

SVGのアニメーション。

これ、adobe Illutratorがあれば超簡単にできるのでおすすめです。

adobe Illustratorで簡単にSVGアニメをつくる
adobe Illustratorで簡単にSVGアニメをつくる　まとめ
ビジュアルエディタとテキストエディタを切り替えるとタグが消える問題について

adobe Illustratorで簡単にSVGアニメをつくる

まずはadobe Illustratorで画像を作成

まずはadobe Illustratorでアニメ化したい文字のデータをつくります。

アウトライン化します。

ツールバーの「ウインドウ」から「アセットの書き出し」を選択して、アセット書き出しウィンドウを表示させます。

書き出しの設定で「SVG」を選択。

アウトライン化したデータをグループごとアセット書き出しウィンドウにドラッグします。

「書き出し」を行います。

SVGデータが書き出されています。
テキストエディタで開きましょう。

書き出されたデータはこんな感じ。

データをちょっと編集

テキストエディタで開いたらちょこちょこちょこと編集します。
あとでCSSでいろいろ調整するのでIDなどを分かりやすい名前にしておきます。
不要な部分もちょちょっと削除。

で、こんなかんじに。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -2 726 116">
<g id="svglogo" data-name="svglogodata">
<path d="M100.66,7.31l-12,34.46q-11.82-16-27.15-16-8.52,0-8.53,6.45,0,2,2.69,4.08t14.08,6.52a139.39,139.39,0,0,1,19.31,9A26.61,26.61,0,0,1,99.15,62.19a30.64,30.64,0,0,1,3.37,14.68q0,17.56-13.32,26.76T50,112.84q-29,0-50-8.24L11.82,68.06A40.43,40.43,0,0,0,24.61,80.81q7.63,4.74,14.65,4.73A9.15,9.15,0,0,0,45,83.75a5.35,5.35,0,0,0,2.33-4.37,6.59,6.59,0,0,0-2.26-4.66q-2.26-2.22-11.93-6.16A113,113,0,0,1,18.7,61.72a31,31,0,0,1-10-9.49Q4.51,46.07,4.51,36.68q0-18.19,13.26-27.44T56.88,0A127.41,127.41,0,0,1,100.66,7.31Z"/>
<path d="M151.93,111.05H103.5l38-109.33h69l38,109.33H200.07l-6.3-18.49H158.23ZM167,66.77H185L176,39.62Z"/>
<path d="M257.6,111.05V1.72h47L324.37,24.5,344.21,1.72h46.93V111.05H342.71V56.31L324.37,77.45,306,56.31v54.74Z"/>
<path d="M411.9,1.72h66.27q21,0,32.24,10.64a34.78,34.78,0,0,1,11.25,26.33A35.64,35.64,0,0,1,511,64.77a35,35,0,0,1-25.72,10.74q-12.54,0-25-9.53v45.07H411.9Zm48.36,23.64V49.15a15.68,15.68,0,0,0,4,.57,11.78,11.78,0,0,0,8.81-3.44,12.33,12.33,0,0,0,3.37-9q0-5.51-2.87-8.7c-1.91-2.12-4.63-3.19-8.16-3.19Z"/>
<path d="M531.93,111.05V1.72h48.43V83.61h42.42v27.44Z"/>
<path d="M723.2,83.61v27.44H632.43V1.72H723.2V29.16H680.79V42.7H710.3V70.14H680.79V83.61Z"/>
</g>
</svg>

あ、このコードを貼りつけただけでもちゃんとSVG画像が表示されますよ。動かないけど。

CSSで調整

ふちどりが描画されるアニメーションをつけていきます。
WEBクリエイターボックスさんの「SVGでアウトラインをカスタマイズしてみよう」を参考にしました。

#svglogo {
  fill: none;
  stroke: #000;
  stroke-width: 3;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: line 8s linear forwards;
  animation: line 8s linear forwards;
}
@-webkit-keyframes line {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes line {
  to {
    stroke-dashoffset: 0;
  }
}

これ、イラストでやってもおしゃれなんでぜひぜひ！
※止まっていたらリロードしてみてください