svgアニメーションで動くロゴを作ってみよう

2022.1.16 更新

皆さまこんにちは。

本日は、SVGを使った動くロゴを作ってみようと思います。

1.イラストレーターでロゴを作成する

テキストツールで文字を書きます。フォントは少し太めの方がいい感じに仕上がります。

次に書いた文字ををアウトライン化します。

テキストを選択して右クリック>アウトラインを作成します。

２.SVGコードを取得する

ファイル>別名で保存>ファイル名を付けたら保存するファイル形式をSVG(svg)を選択します。
(SVG圧縮(svgz)は圧縮ファイルですのでファイルサイズが1/3くらいに軽くなりますが、テキストエディタで編集出来ないのでここではSVG(svg)を使います。)

３.htmlファイルにペーストする

保存するファイル形式でSVG(svg)を選択すると、下図の画面が出てきますのでSVGコードをクリックします。コードがずらずらと書いてありますが<svg>以下を全て選択してコピーします。
htmlファイルを作ってbodyタグの中にペーストします。

４.cssで線の太さや塗りを指定する

先ほどペーストしたsvgファイルのidを任意の名前に変更します。ここではid名をsvgLogoとしました。

id名を付けたら、headタグの中にCSSで線の太さや塗りの色などを指定していきます。

下記がソースの一部となります。

今回は塗りにグラデーション指定をして、さらにアニメーションさせています。

塗りのグラデーション指定は、イラレでコピーしたsvgタグとgタグの間に新たにdefsタグを作り、塗りのグラデーション設定を書き足しました。

それにidを付け、cssでfill:url(“#MyGradient”);として塗りの色指定をしています。

●defsタグについてはこちらに詳しいです。
●グラデーションの設定についてはこちらも参考にさせて頂きました。
●りんごの勉強会でもやりました。


<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>svg</title>
	<style>
	body{
		background-color: #BF8A6B;
	}
	svg{
	display:block;
	margin: 0 auto;
	max-width: 100%;red
    height: auto;
    }
    #svgLogo path{
    fill:url("#MyGradient");
	stroke-width:0.1em;
	stroke:#501F10;
	stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawline 4s linear forwards,FillIn 2s 4s linear both;
    }

    @keyframes drawline {
     to {stroke-dashoffset:0;}
     }
    @keyframes FillIn {
     from { fill-opacity: 0; }
     to { fill-opacity: 1; }
     }

	</style>   
</head>
<body>
<svg version="1.1" id="svgLogo" ここのid名を変えて、cssで色や動きなどを指定します。
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px"
	 viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
	<defs>
    <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%"  stop-color="#fc6"/>
      <stop offset="100%" stop-color="#f09"/>
    </linearGradient> <!--ここでロゴの塗りをグラデーションにする指定をしています。-->
	 </defs>
<g>〜以下、省略

CSSアニメーションで文字を点滅させてみよう

グラデーションさせないならば、defsタグの部分は不要です。

また、cssの#id名 path {fill:url(“#MyGradient”);}の
url(“#MyGradient”)の部分には、普通に色番号を入れればOKです。

いかがでしたでしょうか？動くコンテンツを作る手段として、SVGアニメーションもぜひ取り入れてみて下さいね。

それではまた次回、ごきげんよう。

svgアニメーションで動くロゴを作ってみよう

目次

☆svgのロゴ DEMO

1.イラストレーターでロゴを作成する

２.SVGコードを取得する

３.htmlファイルにペーストする

４.cssで線の太さや塗りを指定する

いいね: