SVGで使える便利なサイト

サイト制作においてSVGを使用する機会が多く増えてきました。

アニメーションも非常に軽快で使用しやすいものなので、効果的に使用すれば、サイトのデザインを魅力的に見せることが可能です。

そこでSVGアニメーションを使用で便利なサイトを紹介します。

https://maxwellito.github.io/vivus-instant/

SVG画像を、ドラッグ&ドロップでアップロードして、左側のメニューでアニメーションの設定をするだけで簡単に調整が可能です。

メニュー項目のAnimation typeでアニメーションのタイプや、描く順番、時間や、ループの設定が可能です。

項目の設定し、SVGファイルをダウンロードしたら
CSSで動かす設定をしてあげれば、OKです。

文字をアウトライン化したデータや複数の線画をアニメーションさせたいけれども、設定が難しいなんて方も使用してみてはどうでしょうか。