Gutenberg、だいぶ使いやすくなったので移行中です

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

WEB

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

 

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

SVGのアニメーション。

 

 

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

 

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

まずはadobe Illustratorで画像を作成

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

簡単にSVGアニメをつくる

 

アウトライン化します。

簡単にSVGアニメをつくる

 

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

簡単にSVGアニメをつくる

 

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

簡単にSVGアニメをつくる

 

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

簡単にSVGアニメをつくる

 

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

簡単にSVGアニメをつくる

 

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

簡単に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;
  }
}

 

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

 

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

簡単なのにおっしゃれーでわりとどんなサイトにも相性良くて最近多用しています。
技術についていくのが遅くて申し訳ない…。

 

この記事は以下の記事を参考にしました。

 

ビジュアルエディタとテキストエディタを切り替えるとタグが消える問題について

WordPressあるあるのこの問題、SVGタグもごっそり消えることがあるのでみなさんお気をつけて…!!!
今回の記事書くときにも焦りました。

対処法の参考記事はこちら。

WordPressのエディタ切替でタグ・コードが消えるのを防ぐテクニック

コメント

タイトルとURLをコピーしました