WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

  • 中
  • 大

mane

2019/10/18

確認しながらSVGアニメーションが作成できる！「SVG Artista」

投稿者： mane
カテゴリー： マークアップ >サービス



SVGにアニメーションを適用できるWEBサービス「SVG Artista」をご紹介します。

プレビューでアニメーションを確認しながら、簡単にSVGアニメーションを作成できるのでSVG画像を用意するだけでできてしまいます。

SVG画像を用意する


Adobe Illustratorで好きなテキストやイラストを用意します。
注意点として、フチを描くアニメーションを適用したい場合は、イラストにも「塗り」だけでなく「線」も色を指定してください。
また、テキストはアウトライン化しておきましょう。

SVG Artistaの使い方

https://svgartista.net/

アップロードする

SVG Artistaにアクセスし、
「OPEN SVG」から作成したSVGファイルをアップロードします。インラインSVGのコードの場合は「PASTE MARKUP」で貼り付けて下さい。

アニメーションの設定

設定できる内容は以下の通りです。各種設定の値を変更すると、リアルタイムでプレビューがアニメーションします。

element class クラス名
background color 背景色
animation type アニメーションの種類
animation duration アニメーションが完了するまでの時間
stagger step それぞれのアニメーション実行タイミングをずらす
animation delay アニメーションが実行されるまでの遅延時間
animation easing イージングの種類
animation direction アニメーションの再生方向

アニメーションの設定は、「STROKE ANIMATION」と「FILL ANIMATION」に分かれていて、STROKEは外側の枠線、FILLは中の塗りつぶし部分のことです。それぞれ別々にアニメーションを指定します。

コードを取得する

右上の[GET CODE]をクリックして、SVGのソースコードとアニメーション用のCSSを取得します。

SVGは[COPY SVG]、CSSは[COPY TRANSITION CODE]もしくは[COPY ANIMATION CODE]のボタンからコードをコピーできます。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="100%" height="100%" viewBox="-31.529 -46.358 300 200" enable-background="new -31.529 -46.358 300 200" xml:space="preserve">
<defs>
</defs>
<polygon fill="#F0A862" stroke="#E8A461" points="17.27,13.612 22.275,23.753 33.466,25.379 25.368,33.273 27.28,44.418 
	17.27,39.156 7.26,44.418 9.172,33.273 1.074,25.379 12.265,23.753 " class="svg-elem-1"></polygon>
<polygon fill="#F0A862" stroke="#E8A461" points="46.549,1.13 49.588,7.288 56.384,8.275 51.467,13.069 52.628,19.837 
	46.549,16.642 40.47,19.837 41.631,13.069 36.714,8.275 43.51,7.288 " class="svg-elem-2"></polygon>
<path stroke="#000000" stroke-width="0.5" d="M58.756,64.038c8.845-1.617,10.462-6.965,10.858-11.948h-12.08v-2.739h24.622v2.739
	h-9.571c-0.363,5.083-2.311,12.211-11.156,14.292L58.756,64.038z M60.967,42.453h17.79v2.739h-17.79V42.453z" class="svg-elem-3"></path>
<path stroke="#000000" stroke-width="0.5" d="M91.227,55.853l10.693-2.079l-1.155-5.215l-9.175,1.782l-0.528-2.574l9.109-1.782
	l-0.528-2.476c0,0-0.396-1.717-0.66-2.607c0.793-0.1,2.905-0.396,3.202-0.396c0.462,0,0.692,0.132,0.692,0.33
	s-0.297,0.495-0.792,0.727c0.1,0.726,0.396,2.146,0.396,2.146l0.396,1.749l8.912-1.717l0.527,2.607l-8.878,1.717l1.155,5.182
	l10.495-2.047l0.528,2.607l-10.463,2.046l2.245,10.232l-2.641,0.561l-2.277-10.297L91.755,58.46L91.227,55.853z" class="svg-elem-4"></path>
<path stroke="#000000" stroke-width="0.5" d="M122.543,63.411c10.232-4.061,14.523-11.222,17.098-16.701l-12.938,0.066v-2.509
	l14.225-0.099c0.297,0,0.43-0.198,0.627-0.198c0.066,0,0.133,0.033,0.23,0.099c1.684,1.155,2.08,1.452,2.08,1.717
	c0,0.264-0.463,0.396-0.793,0.495c-1.254,2.475-2.805,5.412-4.918,8.35c2.971,2.145,7.262,5.875,9.836,8.78l-2.607,2.014
	c-2.344-3.137-5.941-6.535-8.746-8.813c-2.805,3.465-6.469,6.699-11.287,8.813L122.543,63.411z" class="svg-elem-5"></path>
<path stroke="#000000" stroke-width="0.5" d="M164.818,44.235c0,0,0-0.33,0-0.759c0-0.693,0-1.716-0.066-2.442
	c0.363,0.033,2.807,0.132,3.367,0.198c0.428,0.065,0.66,0.264,0.66,0.462c0,0.264-0.33,0.561-1.057,0.66
	c-0.066,1.089-0.066,2.277-0.066,2.277v4.29c3.498,1.09,8.846,3.169,11.75,4.853l-2.08,2.838c-3.035-2.178-6.6-3.796-9.67-4.885
	v15.051h-2.838V44.235z" class="svg-elem-6"></path>
</svg>

/***************************************************
 * Generated by SVG Artista on 10/17/2019, 2:36:43 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

/***************************************************
 * Generated by SVG Artista on 10/17/2019, 2:48:51 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 115.08586120605469px;
    stroke-dasharray: 115.08586120605469px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(240, 168, 98);
  }
}

.svg-elem-1 {
  animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 70.67190551757812px;
    stroke-dasharray: 70.67190551757812px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(240, 168, 98);
  }
}

.svg-elem-2 {
  animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
               animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 135.7193145751953px;
    stroke-dasharray: 135.7193145751953px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-3 {
  animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
               animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 141.2852020263672px;
    stroke-dasharray: 141.2852020263672px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-4 {
  animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
               animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 117.4234848022461px;
    stroke-dasharray: 117.4234848022461px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-5 {
  animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
               animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 84.90216064453125px;
    stroke-dasharray: 84.90216064453125px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-6 {
  animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
               animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

これらをそのままHTMLとCSSに貼り付けると、SVGにアニメーションが適用されています。

まとめ

プレビューで確認しながら簡単にアニメーションを適用できるので活用する機会が増えそうです。
SVGアニメーションを実装したい時は、ぜひ使ってみてください。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

Webコーディング代行サービス　クイックアシスト

最後までお読みいただき、ありがとうございました。

お仕事のご相談やご依頼はお気軽にお問い合わせはこちら

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ