svg画像を使ったローディング画面について

こんにちは。
どなたかお詳しい方に、ご質問です。

今、svg形式の画像（動物のロゴマーク）を持っています。
その画像に少し動きをつけて、それをローディング画面にしたいのですが、どのようにしたら思い通りのものができるでしょうか？
一応自分で調べたのですが、もともとあるローディング中っぽいsvgを使うのではなく、今持っている素材を使って作りたいのです、、

初心者のため、初歩的な質問ですみません。
HTMLでの記述、jsやcssのサンプルコードを参考に書いてもらえると、理解しやすくて助かります。

質問者からの補足コメント

• お持ちとは、dwなどのソフトを持っているかということでしょうか？
  dwなら使えますが、フォトショップなどは使用できません。
  cssはおおよそ理解できますし、jsも少しならわかります。

  No.1の回答に寄せられた補足コメントです。 補足日時：2019/07/18 19:29

No.3 回答者： fujillin 回答日時： 2019/07/19 09:03

こんにちは

＞HTMLでの記述、jsやcssのサンプルコードを参考に書いてもらえると～
想定なさっている画像がどのような構成からできているのかや、アニメーションをどのようなものにしたいのか等によって、具体的な内容は全く変わってくると思いますので、やみくもにサンプルを見たとしても参考になる可能性は低いと思います。

一方で、検索しさえすれば、解説サイトや実例は沢山見つかるはずですので、サンプルに溢れているとも言えます。
以下は一例です。
https://ics.media/entry/15970/

素で記述すると、HTMLもjavascriptもそれなりに煩雑なので、SVG用のライブラリが作成されていたりしますので、そういったものを利用するのも一法でしょう。
以下は一例です。
https://www.webcreatorbox.com/tech/svg-javascript

No.2 回答者： yambejp 回答日時： 2019/07/18 19:29

SVG用のエディタで移動・変形パターンを設定してください

この回答へのお礼

回答ありがとうございます。
よろしければ追加でお教えください。

エディタでsvgにアニメーションを加える→書き出す→HTMLなどに記述って流れってことですかね？
無料で使えるエディタでおすすめがあれば教えていただけると助かります。

お礼日時：2019/07/18 19:35

No.1 回答者： goold-man 回答日時： 2019/07/18 19:22

SVGはCSSやJavascriptをwebで使用する必要があり、お持ちですか？