【WordPress】初心者でも簡単！SVGで動くロゴを作成する方法

ブログのロゴをSVG画像にしてアニメーションにしたら反応が良かったので、実際にどのように作成したかをSVG初心者に向けて解説していきます！

僕自身SVG画像にずっと興味がありましたが、なかなか良いサイトがなくサイトのロゴに適用するのにとても苦労しました。

僕のように興味があるけどやり方が分からない初心者のお役に立てればと思います。

この記事のターゲット

お洒落なロゴに興味がある
WordPressのロゴをSVG画像にして動かしたい
SVG画像にどうやってアニメーションを付けるのか分からない

SVG画像がなんでロゴに向いているの？ってひとは、まずはこちらの記事からお読みください。

>>【WordPress】ブログのロゴにはSVG形式の画像がオススメ!

今回作成したロゴの完成形です。

簡単な図形と文字しか使っていませんが、色の変化と図形の動作を取り入れているためちょとお洒落に見えませんか？

さらに凝った作りにしたい人はSVGやCSS等の勉強をしてみてください。

SVG画像の作成方法
1. ドローソフトを利用してロゴ画像を描く
2. 完成したロゴ画像をSVG画像として保存
SVG画像にアニメーションを付ける方法
1. １．アニメーションをつけたいオブジェクトに名前を付ける
2. ２．名前を付けたオブジェクトにCSSアニメーションを割り当て
WordPressのロゴにSVG画像をアップロード
まとめ

SVG画像の作成方法

SVG画像の作り方は大きく２つあります。

ペイントツールの利用（ドロー系）
コードを直接記述

プログラミングが得意な人であればちょっとした図形をコードで作成することは容易いですが、僕のような初心者にはドロー系のペイントツールを利用する方法をオススメします。

ドロー系のペイントツールとはSVG画像であるベクトル画像を使って絵を描くツールのことで以下のツールが有名です。

代表的なツール

Illustrater（有料）
Inkscape（無料）

ドロー系のお絵描きソフトはIllustraterが有名です。

でもお高いのでちょっとしたロゴの作成程度では無料で使えるinkscapeというフリーソフトがオススメです。

僕も愛用していていますが、無料とは思えないほど充実した機能です。

ドローソフトを利用してロゴ画像を描く

今回はInkscape（ドローソフト）を利用してSVG画像を作ってみます。

Inkscapeを起動し、簡単な図形や文字を並べてロゴを作成してみましょう。

初めのうちはどの図形がどのソースコードに対応するのか判断が難しいため、なるべく簡単な図形にすることをオススメします。

完成したロゴ画像をSVG画像として保存

ロゴが完成したらSVG形式で保存します。

Inkscapeの場合、初期のままですとinkscape専用のSVG形式（Inkscape SVG）になっています。

一般的なSVG形式にするため、ファイルの種類を「プレーンSVG」(inkscapeの場合)にすることを忘れないでください。

これでSVG形式の画像の作成は終了です。

このまま画像データとして使うこともできますが、ソースコードに手を加えることで動かしたり色を変えたりと様々なアニメーションを付けることができます。

SVG画像にアニメーションを付ける方法

ここでは先ほど作成した画像に簡単なアニメーションを付けて動かしてみます。

まずはじめに先ほど作成したSVGコードの中身をみてみましょう。

SVGファイルをエディタで開いてみて下さい。

作成した図形がどのような構造になっているのかわかりましたか？

この例では以下のようになっていることが読み解けます。

30行目 rect：長方形
37行目 text：Hello Worldの文字
47行目 ellipse：楕円形

先ほどのSVGのコード
↓↓↓

See the Pen WordPress-Sample by goro (@gorogoro5656) on CodePen.

色の変化やオブジェクトのアニメーションにはCSSの機能を使います。

WordPressのロゴを変更する際には、SVGファイルをアップロードします。

なのでstyle.cssを作成せずに、SVGファイルに直接CSSの記述を直書きする方法にしています。

CSSを追加する手順

１．アニメーションをつけたいオブジェクトに名前を付ける

今回はテキストの色の変化と楕円形の図に動きを加えたいので２つの名前を追加します。

63行目：class=”text-hello-world”を追加
69行目：class=”ellipse-obj”を追加

２．名前を付けたオブジェクトにCSSアニメーションを割り当て

名前を付けたオブジェクトにCSSアニメーション機能を割り当てて動きを与えるます。

14行目～30行目のstayleに以下のコードを追加。

  <style>
      .text-hello-world{
          animation: 10s anime1 ease-in-out alternate infinite;
      }
      @keyframes anime1 {
          0%{fill:red;}
          50%{fill:white;}
      }
      .ellipse-obj{
          animation: 10s anime2 ease-in-out alternate infinite;
      }
      @keyframes anime2 {
          0%  { transform: scale(0); stroke-width: 0;  fill:white;}
          25% { transform: scale(1.1);}
          100%{fill:red;}
      }
  </style>

以下が完成したコードになります。

See the Pen WordPress-SVG-sample-Animation by goro (@gorogoro5656) on CodePen.

簡単なソースコードの追加でアニメーションを追加することができました。