手描き風SVGアニメーションが簡単に作成できるSVG Artista

手描き風SVGアニメーションが簡単に作成できるSVG Artista

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

SVGを使ったアニメーションを作成する方法はいくつかあると思いますが、SVG Artistaを使うと手軽に簡単な手描き風のアニメーションが描けます。

関連:LottieでWebやAndroid、iOSアプリに簡単アニメーション実装

目次

SVG Artistaとは?

https://svgartista.net/

SVG Artistaは、オンライン上でSVGアニメーションが簡単に作成できるWebサービスです。単一のSVGファイルからフェードインのSVGアニメーションを簡単に作成したり、ストロークと面のSVGコードを組み合わせて手描き風のアニメーションも簡単に作成することができます。

こんな手描き風のSVGアニメーションが作成できます。

SVG Artistaの使い方

線のSVGコードを作成

弊社のロゴを使って作成してみたいと思いますが、まずはイラストレーターでロゴを開いて面の塗りをなしにして線のみの塗りに設定します。言うまでもないですが、アウトライン化済みデータです。
SVG Artista用のストロークを作成

そしたら、「ファイル」、「別名で保存」を選択します。
イラストレーターのデータを別名で保存

ファイルの種類を「SVG(*.SVG)」に変更したら、「保存」を選択します。
SVGファイルに保存

「SVGコード」を選択します。
SVGコードを選択

するとテキストエディタでSVGのコードが表示されますので、SVGの開始タグから終了タグまでをコピーします。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 640 360" style="enable-background:new 0 0 640 360;" xml:space="preserve">

~ 中略 ~

</svg>

そしたら、SVG Artistaのサイトにアクセスします。
https://svgartista.net/

次は、「animation type」を「animation」に変更し、「PASTE MARKUP」を選択します。
SVG ArtistaのPASTE MARKUPを選択

イラストレーターでコピーしたSVGのコードを貼り付けます。
SVGコードの貼り付け

面のSVGコードを作成

イラストレーターに戻って今度は、面部分を塗りつぶしたロゴを用意します。
イラストレーターでSVGを作成

同様の手順でテキストエディタでSVGコード画面を開きます。
「ファイル」

「別名で保存」

ファイル種類を「SVG(*.SVG)」

「保存」

「SVGコード」

面のSVGコードをテキストエディタで開いたら、スタイルの開始タグから最初のGタグの閉じタグまでコピーします。

<style type="text/css">
	.st0{fill:#E5006B;}
	.st1{fill:#040000;}
</style>
<g id="logo">

~ 中略 ~

	<path class="st1" d="xxxxxxx"/>
</g>

そしたら、SVG Artistaに戻ってコピーしたSVGコードをSVGの閉じタグの直前に挿入して、「Apply」で適用します。

全体的なSVGコードのソースは下記のようになるはずです。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 360" style="enable-background:new 0 0 640 360;" xml:space="preserve" width="640" height="360">
        <!-- 線のSVGデータ -->
        <style type="text/css">
            ~ 中略 ~
        </style>
        <g id="logo">
                <path class="" d="">
            ~ 中略 ~
        </g>

        <!-- 面のSVGデータ -->
        <style type="text/css">
            ~ 中略 ~
        </style>
        <g id="logo">
                <path class="" d="">
            ~ 中略 ~
        </g>
</svg>

前の画面に戻ったら再生ボタンをクリックして動作確認をします。
SVGアニメーションの再生

終わったらソースコードの書き出しをします。
SVGアニメーションのソースコード書き出し

スタイルシートは「Minify」にチェックを入れて圧縮しておくといいでしょう。あとは「COPY SVG」、「COPY ANIMATION CODE」でコピペすればOKです。
SVGアニメーションコードのコピー

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

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
Wantedly 採用情報はこちら

新着の記事

mautic is open source marketing automation