SVG ARTISTA（ SVG アーティスト）とは

SVG Artistaは、SVG形式の画像に対して、「線（stroke）」や「塗り（fill）」のアニメーションをCSSコードで付けられる無料のWebツールです。
SVGのパスなどの要素を読み込んで、描くような線の動きや色が塗られていくような動きアニメーション付きの CSS／SVG コードとして取得できます。

参考イメージ

使い方

基本的な機能（SVG のペースト／読み込み、設定、プレビュー、コード取得）は、アカウント登録やログインなしで使えるようです。

①SVGを用意する
アニメーションさせたいSVGファイルを用意。
SVGはIllustratorなどで作ったものやフリー素材などでも可。
パスや図形要素がしっかり分かれているとGood！

②SVGを貼り付けまたは読み込む
ツール内の「OPEN SVG」または「PASTE MARKUP」からSVGを貼り付けます。
・画像から読み込む場合は、「OPEN SVG」
・コードから読み込む場合は「PASTE MARKUP」

③アニメーション設定をする

Stroke Animation（線を描くような動き）：
動く速さ（duration）、始まるタイミングの遅れ（delay）、要素ごとの順序（stagger），イージング（movement curve）などを設定

Fill Animation（塗りが現れる動き）：
線が描かれた後に塗りが入るようにしたいか、どのくらいの時間をかけて塗るかなどを設定

背景色（background color）や全体のアニメーション種類（例えば transition animation）なども設定可能です。

④プレビューで動きを確認
設定した内容が実際どんな見え方になるか、ブラウザ上で動きをチェックします。
変更を加えるとプレビューが更新されるので、「PLAY」で再生し、納得いくまで調整できます。

⑤コードを取得
アニメーションが決まったら、「GET CODE」ボタンからSVG＋CSSのコードを取得します。
コピーしたコードを、自分のHTMLやCSSファイルに貼り付け完了です！

活用例

• Webサイトのロゴやタイトルに演出を付けたいとき
• SVGアイコンなどに目を引くアクセントをつけたいとき
• ヒーローセクションなど、訪問者の第一印象を強めたい場所での背景に使いたいとき
• CSSの学習やアニメーションの練習として「どの設定がどんな動きになるか」を試したいとき

注意点

※元のSVGが複雑すぎたり、パスがきれいにまとまっていないとアニメーション対象の要素を設定しにくいことがあります。パスのIDやclassが整理されていることも望ましいです

※古いブラウザや一部環境でサポートが弱いことがあります。各ブラウザでの動作確認は必須

※使う素材（SVGの元パーツ）が他人の著作物である場合はその利用条件を守る必要があります