SVG画像を作ってCSSだけでロゴにアニメーションをつけてみる

（5年前） HTML&CSS

どうも、Tです。

 

Webサイトでアニメーション付きのロゴを作成する必要があったためSVGを触ってみました。

アニメーションは、CSS Animationだけで実装します。

想像以上にめんどくさかったので、備忘録です。

 

スポンサーリンク
アドセンス1

SVGとは

SVGの説明は、ほかのサイトにお任せします。

SVG: スケーラブルベクターグラフィック | MDN
スケーラブルベクターグラフィック (SVG) は XML ベースのマークアップ言語で、二次元ベースのベクターグラフィックを記述します。
developer.mozilla.org

 

簡単に言うと

  • 拡大しても画像が荒くならない
  • 画像にCSSやjavascritをつかってアニメーションを付けることができる

です。

やりたいこと

SVGとCSSを使って下記のようなロゴ画像のアニメーションを作りたいです。

See the Pen
CSS Logo Animation by yours (@yours04)
on CodePen.

準備するるもの

  • SVG画像（今回はIllustratorを使う。Illustartor24.2.1）
  • HTML・CSS

SVGロゴ作成

ロゴ画像作成

Illustratorでロゴ画像を作成していきます。サイズに指定はないのですが、小さく作るとSVG画像出力のとき、小数点以下が省略されてズレが出る場合があるようなので気持ち大きめで作成しておきます。

今回は1600x800pxで作成しました。

 

ロゴのデザインをして、作成します。

正常表示するための調整

アートボード座標位置の変更

アートボードの座業を0,0(左上)を起点にします。

表示->定規->定規を表示　をクリックします。

 

定規が表示されるので、左上の起点をダブルクリックします。

 

アートボードが0,0起点になりました。

アウトライン化

文字をアカウントライン化しておきます。

 

すべて選択して、書式->アウトラインを作成　をクリックします。

 

念のためアウトライン漏れがないか確認しておきます。

書式->フォントの検索　をクリックします。

 

ドキュメントフォント(0)であれば、アウトラインされています。

レイヤー整理

作成したロゴのレイヤーを整理しておきます。

SVG画像に書き出す際に、このレイヤー名がHTMLタグのID名になるので、一意の名前を付けておきましょう。また、英数字のみ使いましょう。

 

ID名が被るとIllustrator側で自動的に番号を付与してくれます。

class名はつけることができないので、あとで手動で付与するひつようがあります。

 

SVG画像保存

作ったロゴをSVG形式で保存します。

 

ファイル->複製を保存　をクリックします。

 

ファイルの種類にSVGを選択します。

SVG圧縮(.SVGZ)はWebブラウザで使うことはできません。

 

オプション画面の詳細オプションをクリックします。

 

各種設定します。色々あるようですが、囲っている部分を意識して設定しました。

設定後、OKをクリックします。

各オプションの意味についてざっと調べたので記載しておきます。

SVGプロファイル　※必須

SVG1.1を指定します。現在(2020年7月時点)のSVGバージョンの最新です。

フォント-文字　※必須

SVGを選択します。選択項目に「アウトラインに変換」がありますが、フォントはすでにアウトライン化しているため影響ありません。

フォント-サブセット　※必須

なし（システムフォントを使用）を選択します。文字と同じでフォントはアウトライン化済みのため影響ありません。

オプション-画像の場所　※必須

埋め込みを選択します。SVGファイルにすべての情報を持たせるためです。

オプション-Illustratorの編集機能を保持　※必須

チェックを外します。書き出し後にSVGファイルをIllustratorで編集することができますが、崩れの原因になるので、書き出し後にIllustratorで編集はしません。

詳細オプション-CSSプロパティ　※任意

プレゼンテーション属性を選択します。書き出されたSVGファイルの中に記述されたCSSを追いやすくなります。

詳細オプション-小数点以下の桁数　※必須

3を設定します。2以下にするとデザインが崩れる事象の報告が多くありました。

説明でも最適は3になっています。

詳細オプション-エンコーディング　※必須

Webで扱うのでUTF-8を指定します。

<tspan>エレメントの出力を制御　※任意

チェックします。ファイル容量削減になります。

パス上テキストに<textPath>エレメントを使用　※任意

チェックします。ファイル容量削減になります。

が、アピアランスを利用している場合、デザインが崩れる可能性があるのでご確認ください。

レスポンシブ　※任意

チェックします。調べた感じでは、width,heigth属性の有無だけのようでした・・・。

外すを推奨しているブログもありますが、ブラウザ互換の問題だけのようなのと、あとでCSSで調整するのでどっちでもいいかなという見解です。

スライスデータを含める　※任意

チェックを外します。スライス機能は必要ないので不要です。スライス機能を利用していない場合でもmetaデータが書き込まれるようですのでチェックを外します。

XMPを含める　※任意

チェックを外します。作成、編集情報を記録する機能のようですが、Web用途では利用しません。

 

オプションの詳細についてはAdobeからも説明されています。

Adobe Learn
Sign into Adobe Creative Cloud to access your favorite Creative Cloud apps, services, file management, and more. Log in to start creating.
helpx.adobe.com
SVG
SVG を使用して XML と JavaScript を使って高度な web グラフィックを作成する方法を説明します。このグラフィックは、強調表示、ツールチップ、音声、アニメーションなどの洗練された効果を使用してユーザーの操作に応答します。
helpx.adobe.com

SVG画像最適化

書き出し後のSVG画像確認

Webブラウザで表示できることを確認します。

 

また、書き出したSVGファイルをテキストファイルでも開いてみます。

レイヤ-名で設定した名前がIDとして設定されています。これでd=以降が何を表しているのかが判別できます。

 

SVGの中身の全体としては、下記のようになっています。129行で13.4KBのファイルサイズでした。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1600 800" enable-background="new 0 0 1600 800" xml:space="preserve">
<g id="logo-top">
<path id="logo-top-1-M" d="M351.732,220.463L337.084,253.3c-2.523,5.535-4.559,9.259-6.104,11.169
c-1.547,1.914-3.256,2.869-5.127,2.869c-1.791,0-3.378-0.772-4.761-2.319c-0.896-0.977-2.951-4.557-6.165-10.742
c-3.216-6.184-5.88-11.677-7.996-16.479l-16.113-36.255c-2.197-5.045-4.517-7.568-6.958-7.568c-2.605,0-4.028,2.157-4.272,6.47
c-0.57,9.604-0.854,18.475-0.854,26.611c0,8.465,0.406,14.202,1.221,17.212c0.568,1.791,1.322,3.094,2.258,3.906
c0.935,0.814,3.479,2.279,7.629,4.395c2.686,1.385,4.028,3.784,4.028,7.202c0,9.115-11.679,13.672-35.034,13.672
c-19.695,0-29.541-4.435-29.541-13.306c0-2.277,0.507-3.925,1.526-4.944c1.017-1.016,3.641-2.542,7.874-4.577
c2.686-1.221,4.496-2.888,5.432-5.005c0.935-2.115,1.728-6.226,2.38-12.329c0.732-6.51,1.423-17.19,2.075-32.044
c0.65-14.85,0.977-27.566,0.977-38.146c0-13.264-1.019-22.257-3.052-26.978c-0.732-1.627-1.568-2.848-2.502-3.662
c-0.937-0.813-2.707-1.871-5.31-3.174c-5.779-2.766-8.667-6.348-8.667-10.742c0-2.848,1.078-5.451,3.235-7.813
c2.155-2.359,5.024-4.028,8.606-5.005c3.58-1.057,8.362-1.973,14.343-2.746s11.047-1.16,15.198-1.16
c10.416,0,17.78,0.854,22.095,2.563c2.115,0.814,3.784,1.913,5.005,3.296c1.221,1.385,2.97,4.232,5.249,8.545l25.391,46.753
c2.766,5.127,4.679,8.261,5.737,9.399c1.057,1.141,2.521,1.709,4.395,1.709c1.627,0,3.071-0.61,4.333-1.831
c1.261-1.221,2.747-3.498,4.456-6.836l17.212-33.569c2.115-4.313,3.498-7.12,4.15-8.423c3.986-8.137,7.935-13.55,11.841-16.235
c4.963-3.498,13.996-5.249,27.1-5.249c23.029,0,34.546,5.249,34.546,15.747c0,2.361-0.448,4.254-1.343,5.676
c-0.896,1.426-2.728,3.155-5.493,5.188c-3.744,2.85-6.104,6.958-7.08,12.329c-1.873,11.23-2.808,24.902-2.808,41.016
c0,20.752,0.977,38.94,2.93,54.565c0.488,3.826,1.24,6.43,2.258,7.813c1.017,1.385,3.641,3.46,7.874,6.226
c2.93,1.953,4.395,4.559,4.395,7.813c0,5.697-3.784,9.726-11.353,12.085c-3.906,1.301-8.017,2.155-12.329,2.563
c-4.314,0.406-10.946,0.61-19.897,0.61c-13.754,0-24.008-0.977-30.762-2.93c-7.488-2.197-11.23-5.939-11.23-11.23
c0-1.953,0.488-3.56,1.465-4.821s3.498-3.56,7.568-6.897c2.115-1.709,3.559-5.005,4.333-9.888c0.772-4.883,1.16-13.184,1.16-24.902
c0-6.51-0.305-10.782-0.916-12.817c-0.61-2.033-1.892-3.052-3.845-3.052c-2.279,0-4.477,1.568-6.592,4.699
C359.137,204.859,355.963,211.105,351.732,220.463z"/>
<path id="logo-top-2-O" d="M545.58,100.956c20.914,0,39.185,5.981,54.81,17.944c10.578,8.221,19.165,18.881,25.757,31.982
c6.428,13.021,9.644,26.043,9.644,39.063c0,19.207-6.348,36.377-19.043,51.514c-10.742,12.859-24.78,22.095-42.114,27.71
c-10.662,3.418-21.362,5.127-32.104,5.127c-14.08,0-27.548-2.93-40.405-8.789c-15.545-7.08-27.71-17.78-36.499-32.104
c-8.545-13.834-12.817-29.093-12.817-45.776c0-19.367,5.493-36.457,16.479-51.27c9.766-13.184,22.907-22.867,39.429-29.053
C519.781,103.073,532.07,100.956,545.58,100.956z M533.983,135.99c-6.836,0-12.249,3.052-16.235,9.155
c-3.094,4.559-4.639,9.97-4.639,16.235c0,9.197,1.871,19.836,5.615,31.922c3.742,12.084,8.463,22.808,14.16,32.165
c2.521,3.988,5.634,7.162,9.338,9.521c3.702,2.361,7.465,3.54,11.292,3.54c6.184,0,11.169-2.319,14.954-6.958
s5.676-10.742,5.676-18.311c0-9.846-1.587-20.466-4.761-31.86c-3.174-11.393-7.284-21.118-12.329-29.175
c-3.094-4.963-6.674-8.869-10.742-11.719C542.242,137.659,538.134,136.154,533.983,135.99z"/>
<path id="logo-top-3-V" d="M814.501,142.216l-56.03,113.403c-3.418,7-6.674,11.822-9.766,14.465c-3.094,2.645-7,3.968-11.719,3.968
c-3.906,0-7.406-0.854-10.498-2.563c-2.361-1.301-4.211-2.826-5.554-4.578c-1.343-1.748-3.033-4.901-5.066-9.46l-49.927-109.985
c-2.768-6.184-5.27-10.395-7.507-12.635c-2.239-2.236-5.432-3.723-9.583-4.455c-4.883-0.895-7.324-3.906-7.324-9.033
c0-6.266,4.272-11.088,12.817-14.465s20.792-5.066,36.743-5.066c16.602,0,28.809,1.263,36.621,3.784
c7.813,2.523,11.719,6.43,11.719,11.719c0,3.418-2.117,6.592-6.348,9.521c-3.256,2.197-4.883,4.272-4.883,6.226
c0,1.791,0.732,4.354,2.197,7.69l15.259,34.424c2.197,5.047,4.679,7.568,7.446,7.568c2.686,0,5.085-1.343,7.202-4.028
c2.115-2.686,4.963-7.975,8.545-15.869c6.428-14.16,10.172-22.521,11.23-25.086c1.057-2.563,1.587-4.535,1.587-5.92
c0-2.766-1.913-5.127-5.737-7.08c-4.232-2.197-6.348-5.005-6.348-8.423c0-9.684,12.979-14.526,38.94-14.526
c12.939,0,22.074,1.037,27.404,3.113c5.33,2.074,7.996,5.636,7.996,10.681c0,6.023-3.5,9.481-10.498,10.376
c-4.965,0.57-8.179,1.385-9.644,2.441C821.173,130.295,818.081,134.892,814.501,142.216z"/>
<path id="logo-top-4-I" d="M899.34,101.811c9.277,0,18.024,0.814,26.245,2.441c11.066,2.197,16.602,6.878,16.602,14.038
c0,2.361-0.55,4.132-1.647,5.31c-1.1,1.182-3.888,2.911-8.362,5.188c-3.744,1.873-6.206,5.981-7.386,12.329
s-1.77,18.719-1.77,37.109c0,31.088,0.772,50.335,2.319,57.739c0.568,2.361,1.444,4.171,2.624,5.433s3.235,2.624,6.165,4.089
c5.371,2.441,8.057,5.981,8.057,10.62c0,6.512-4.965,10.986-14.893,13.428c-10.742,2.604-23.886,3.906-39.429,3.906
c-26.531,0-39.795-5.045-39.795-15.137c0-3.662,2.604-7.08,7.813-10.254c3.986-2.441,6.348-5.777,7.08-10.01
c1.545-9.277,2.319-28.971,2.319-59.082c0-20.832-1.059-34.18-3.174-40.039c-1.141-3.336-3.866-6.348-8.179-9.033
c-3.338-2.197-5.575-4.028-6.714-5.493c-1.141-1.465-1.709-3.336-1.709-5.615c0-3.498,1.688-6.286,5.065-8.362
c3.377-2.074,9.339-3.925,17.884-5.554C878.628,102.829,888.922,101.811,899.34,101.811z"/>
<path id="logo-top-5-N" d="M1017.626,110.233l60.791,53.223c5.695,4.965,9.806,7.446,12.329,7.446c4.23,0,6.348-4.517,6.348-13.55
c0-10.254-0.61-17.252-1.831-20.996c-1.221-3.742-3.784-6.55-7.69-8.423c-3.174-1.545-5.413-3.193-6.714-4.943
c-1.303-1.75-1.953-4.008-1.953-6.775c0-6.836,4.679-11.23,14.038-13.184c3.824-0.813,10.498-1.221,20.02-1.221
c12.287,0,20.792,0.732,25.513,2.197c7.486,2.279,11.23,6.592,11.23,12.939c0,5.291-3.052,9.277-9.155,11.963
c-2.441,1.059-4.11,1.995-5.005,2.808c-0.896,0.814-1.669,2.035-2.319,3.662c-2.197,5.371-3.338,15.545-3.418,30.518v39.795
c0,6.104,0.04,14.446,0.122,25.024c0.08,14.324-0.774,24.658-2.563,31.006c-2.197,7.895-6.186,11.841-11.963,11.841
c-2.523,0-4.7-0.53-6.53-1.587c-1.832-1.057-4.864-3.498-9.095-7.324l-72.388-64.819c-5.047-4.557-9.237-6.836-12.573-6.836
c-4.965,0-7.446,6.878-7.446,20.63c0,11.313,0.63,19.043,1.892,23.193s3.846,7.202,7.752,9.155
c5.451,2.686,8.179,6.186,8.179,10.498c0,11.313-12.167,16.968-36.499,16.968c-10.986,0-19.512-1.445-25.574-4.334
c-6.063-2.887-9.094-6.977-9.094-12.268c0-2.766,0.568-4.841,1.709-6.226c1.139-1.383,3.702-3.254,7.69-5.615
c3.824-2.277,6.144-6.306,6.958-12.085c1.383-10.498,2.075-25.593,2.075-45.288c0-20.996-1.221-36.295-3.662-45.898
c-0.896-3.498-2.035-6.104-3.418-7.813c-1.385-1.709-3.662-3.336-6.836-4.883c-3.662-1.789-6.206-3.54-7.63-5.249
s-2.136-3.784-2.136-6.226c0-7.813,6.714-12.735,20.142-14.771c4.557-0.65,12.531-0.977,23.926-0.977
c6.51,0,11.25,0.51,14.221,1.525C1010.037,104.355,1013.556,106.653,1017.626,110.233z"/>
<path id="logo-top-6-G" d="M1251.879,100.956c10.66,0,20.71,1.507,30.151,4.517c4.23,1.385,7.12,2.075,8.667,2.075
c1.627,0,5.045-0.935,10.254-2.808c1.709-0.568,3.458-0.854,5.249-0.854c4.557,0,8.911,2.686,13.062,8.057
c6.672,8.627,10.01,18.066,10.01,28.32c0,7-1.771,12.655-5.31,16.968c-3.541,4.314-8.2,6.47-13.978,6.47
c-4.721,0-9.359-1.709-13.916-5.127c-1.385-1.057-4.761-4.883-10.132-11.475c-8.953-10.986-19.247-16.479-30.884-16.479
c-10.58,0-18.981,3.866-25.208,11.597c-6.225,7.732-9.338,18.148-9.338,31.25c0,19.451,4.963,36.011,14.893,49.683
c3.742,4.965,8.219,8.932,13.428,11.902c5.207,2.971,10.376,4.455,15.503,4.455c4.23,0,7.71-1.404,10.437-4.211
c2.727-2.809,4.09-6.409,4.09-10.804c0-3.906-1.141-6.672-3.418-8.301c-0.896-0.65-1.729-1.038-2.502-1.159
c-0.774-0.123-3.113-0.184-7.02-0.184c-3.5,0-6.408-1.117-8.729-3.357c-2.318-2.236-3.479-5.065-3.479-8.483
c0-6.754,4.475-11.555,13.428-14.404c9.846-3.092,21.198-4.639,34.058-4.639c13.752,0,25.309,1.425,34.668,4.272
c8.869,2.768,13.306,7.772,13.306,15.015c0,2.93-1.019,5.474-3.052,7.63c-2.035,2.156-4.681,3.438-7.935,3.845
c-2.85,0.408-4.699,1.038-5.555,1.892c-0.854,0.855-1.729,2.951-2.624,6.287c-3.5,12.939-10.336,23.764-20.508,32.471
c-7,5.941-15.442,10.58-25.329,13.916c-9.889,3.336-20.285,5.005-31.189,5.005c-17.822,0-34.18-4.108-49.072-12.329
c-15.301-8.381-26.938-20.1-34.912-35.156c-6.674-12.531-10.01-26.081-10.01-40.649c0-14.729,3.986-28.727,11.963-41.992
c8.463-14.24,20.304-25.227,35.522-32.959C1219.732,104.374,1234.869,100.956,1251.879,100.956z"/>
</g>
<g id="logo-bottom">
<path id="logo-bottom-1-L" fill="#00007F" d="M234.748,446.938v112.061c0,25.23,2.197,41.504,6.592,48.828
c5.371,8.629,16.682,12.939,33.936,12.939c18.555,0,33.203-4.066,43.945-12.207c10.742-8.137,18.227-20.832,22.461-38.086
c2.441-10.578,7.973-15.869,16.602-15.869c8.625,0,15.663,3.868,21.118,11.597c5.451,7.732,8.179,17.784,8.179,30.151
c0,20.184-7.488,41.748-22.461,64.697c-4.723,7.324-8.873,12.329-12.451,15.015c-3.582,2.686-7.896,4.028-12.939,4.028
l-54.199-6.592H114.875c-11.23,0-19.127-1.301-23.682-3.906c-6.676-3.742-10.01-9.357-10.01-16.846
c0-4.555,1.099-7.935,3.296-10.132s7.526-5.329,15.991-9.399c9.277-4.395,15.217-10.578,17.822-18.555
c2.113-6.672,3.174-26.123,3.174-58.35c0-14.973-0.408-36.537-1.221-64.697c-0.816-27.016-1.305-47.363-1.465-61.035
c0-13.02-1.019-21.931-3.052-26.733c-2.037-4.799-6.31-8.259-12.817-10.376c-10.742-3.742-17.578-6.752-20.508-9.033
c-5.211-4.066-7.813-8.705-7.813-13.916c0-11.879,9.846-20.912,29.541-27.1c16.762-5.371,39.223-8.057,67.383-8.057
c31.574,0,55.176,1.629,70.801,4.883c20.18,4.395,30.273,13.184,30.273,26.367c0,5.371-1.343,9.361-4.028,11.963
c-2.686,2.605-9.239,6.104-19.653,10.498c-6.188,2.77-10.094,7.488-11.719,14.16C235.561,409.912,234.748,424.477,234.748,446.938z
"/>
<path id="logo-bottom-2-O" d="M581.672,333.412c41.828,0,78.369,11.963,109.619,35.889c21.156,16.441,38.33,37.762,51.514,63.965
c12.855,26.043,19.287,52.086,19.287,78.125c0,38.414-12.695,72.754-38.086,103.027c-21.484,25.719-49.561,44.189-84.229,55.42
c-21.324,6.836-42.725,10.254-64.209,10.254c-28.16,0-55.096-5.859-80.811-17.578c-31.09-14.16-55.42-35.561-72.998-64.209
c-17.09-27.668-25.635-58.186-25.635-91.553c0-38.734,10.986-72.914,32.959-102.539c19.531-26.367,45.814-45.734,78.857-58.105
C530.074,337.646,554.652,333.412,581.672,333.412z M558.479,403.48c-13.672,0-24.498,6.104-32.471,18.311
c-6.188,9.117-9.277,19.939-9.277,32.471c0,18.395,3.742,39.673,11.23,63.843c7.484,24.17,16.926,45.616,28.32,64.331
c5.043,7.977,11.269,14.324,18.677,19.043c7.404,4.723,14.931,7.08,22.583,7.08c12.367,0,22.339-4.639,29.907-13.916
s11.353-21.484,11.353-36.621c0-19.691-3.174-40.932-9.521-63.721c-6.348-22.785-14.568-42.236-24.658-58.35
c-6.188-9.926-13.348-17.738-21.484-23.438C574.996,406.818,566.779,403.809,558.479,403.48z"/>
<path id="logo-bottom-3-G" d="M971.076,333.412c21.32,0,41.42,3.014,60.303,9.033c8.461,2.77,14.24,4.15,17.334,4.15
c3.254,0,10.09-1.869,20.508-5.615c3.418-1.137,6.916-1.709,10.498-1.709c9.113,0,17.822,5.371,26.123,16.113
c13.344,17.254,20.02,36.133,20.02,56.641c0,14-3.54,25.311-10.62,33.936c-7.08,8.629-16.399,12.939-27.954,12.939
c-9.441,0-18.719-3.418-27.832-10.254c-2.77-2.113-9.521-9.766-20.264-22.949c-17.906-21.973-38.494-32.959-61.768-32.959
c-21.16,0-37.964,7.732-50.415,23.193c-12.451,15.465-18.677,36.297-18.677,62.5c0,38.902,9.926,72.021,29.785,99.365
c7.484,9.93,16.438,17.864,26.855,23.804c10.414,5.943,20.752,8.911,31.006,8.911c8.461,0,15.419-2.808,20.874-8.423
c5.451-5.615,8.179-12.817,8.179-21.606c0-7.813-2.281-13.344-6.836-16.602c-1.793-1.301-3.46-2.075-5.005-2.319
c-1.549-0.244-6.226-0.366-14.038-0.366c-7,0-12.817-2.235-17.456-6.714c-4.639-4.475-6.958-10.132-6.958-16.968
c0-13.508,8.949-23.109,26.855-28.809c19.691-6.184,42.396-9.277,68.115-9.277c27.504,0,50.617,2.85,69.336,8.545
c17.738,5.535,26.611,15.545,26.611,30.029c0,5.859-2.037,10.948-6.104,15.259c-4.07,4.314-9.361,6.878-15.869,7.69
c-5.699,0.816-9.399,2.075-11.108,3.784s-3.46,5.901-5.249,12.573c-7,25.879-20.672,47.527-41.016,64.941
c-14,11.883-30.884,21.16-50.659,27.832s-40.569,10.01-62.378,10.01c-35.645,0-68.359-8.217-98.145-24.658
c-30.602-16.762-53.875-40.199-69.824-70.313c-13.348-25.063-20.02-52.162-20.02-81.299c0-29.457,7.973-57.453,23.926-83.984
c16.926-28.48,40.607-50.453,71.045-65.918C906.783,340.248,937.057,333.412,971.076,333.412z"/>
<path id="logo-bottom-4-O" d="M1367.805,333.412c41.828,0,78.369,11.963,109.619,35.889c21.156,16.441,38.33,37.762,51.514,63.965
c12.855,26.043,19.287,52.086,19.287,78.125c0,38.414-12.695,72.754-38.086,103.027c-21.484,25.719-49.561,44.189-84.229,55.42
c-21.324,6.836-42.725,10.254-64.209,10.254c-28.16,0-55.096-5.859-80.811-17.578c-31.09-14.16-55.42-35.561-72.998-64.209
c-17.09-27.668-25.635-58.186-25.635-91.553c0-38.734,10.986-72.914,32.959-102.539c19.531-26.367,45.814-45.734,78.857-58.105
C1316.207,337.646,1340.785,333.412,1367.805,333.412z M1344.611,403.48c-13.672,0-24.498,6.104-32.471,18.311
c-6.188,9.117-9.277,19.939-9.277,32.471c0,18.395,3.742,39.673,11.23,63.843c7.484,24.17,16.926,45.616,28.32,64.331
c5.043,7.977,11.269,14.324,18.677,19.043c7.404,4.723,14.931,7.08,22.583,7.08c12.367,0,22.339-4.639,29.907-13.916
s11.353-21.484,11.353-36.621c0-19.691-3.174-40.932-9.521-63.721c-6.348-22.785-14.568-42.236-24.658-58.35
c-6.188-9.926-13.348-17.738-21.484-23.438C1361.129,406.818,1352.912,403.809,1344.611,403.48z"/>
</g>
</svg>

SVGコードの最適化

Illustratorが生成したSVGのコードには不要なものも含まれているため、不要なものは削除します。

方法はいろいろありますが、簡単に行える下記のWebサービスを使います。

SVGOMG - SVGO's Missing GUI
Easy & visual compression of SVG images.
jakearchibald.github.io

 

灰色の部分にSVGファイルをアップロードします。

 

画像が表示されます。最適化の設定を行っていきます。

Global Settings

Compre gzippedをOFFにします。Compareをしてしまうとコードが圧縮されて改行がなくなるため読めなくなってしまします。

 

Prettify markupをONにします。最適化後もコードが読めるレベルに整形してくれます。

 

Precision(精度)を調整します。精度を荒くするとファイルサイズは小さくなりますが、デザインのパスが崩れてきます。表示されている画像でリアルタイム確認が可能なのでよい数値に設定します。今回は4で設定しました。

 

Features設定

Remove xmlnsをOFFにします。xmlns属性を削除しないようにします。

 

Clean IDsをOFFにします。設定されているIDを削除しないようにします。

 

設定が終わったら、ダウンロードを行います。ファイル容量が少し小さくなっています。

不要コードの削除（手動）

最適化後のファイルで以下のようなコードが設定されている場合は手動で取り除いておきます。

  • <?xmlから始まるXML宣言
  • <!– Generator: Adobe Illustratorから始まるコメント
  • <!DOCTYPE svg PUBLICから始まる文書型宣言（SVG1.1では非推奨）
  • <svg>タグのxmlns:a=””
  • <svg>タグのenable-background=””
  • <svg>タグのxml:space=”preserve”

必須コードの確認（手動）

最適化後のファイルで以下のようなコードがない場合は手動で設定します。

  • xmlns=”http://www.w3.org/2000/svg”（SVG名前空間宣言）
  • xmlns:xlink=”http://www.w3.org/1999/xlink”（XLink名前空間宣言）
  • version属性（version=”1.1″）
  • width属性とheight属性（後でCSSで設定するのでなくても可）
  • viewBox属性（viewBox=”0 0 1600 800″　今回は1600×800で作成している前提）

その他コードの修正

複雑なデザインの場合は、最適化でも不要なsvgやpathタグが残ったままになっている場合があります。可能な限り手動で不要なコードを取り除いておきましょう。

CSSクラス名付与

HTMLタグにこの後必要となるCSSのクラス名を付与しておきます。

今回は各文字に、class=”logo-item”を設定しました。

確認

最終的に下記のようになりました。行数が16行まで削減されています。

 

ファイルをWebブラウザ表示してロゴが崩れていないかも確認しておきましょう。

アニメーション作成

HTMLへのSVG画像表示

SVGの表示には、色々あるようですが下記のパターンが多いようです。

  1. imgタグでsvgファイルを表示
  2. CSSのbackground-imageでsvgファイルを表示
  3. objectタグでsvgファイルを表示
  4. HTMLにsvgタグを埋め込む

使い分けとしては、下記のような感じです。

  • 手軽にSVGを表示させたい→imgタグもしくはCSSのbackground-image
  • JavascriptでSVGを操作→objectタグ
  • CSS Animationを適用→HTMLに埋め込み

ということで、今回は、HTMLにSVGを埋め込みます。埋め込んだ結果は、以下のような感じ。

CSS移植

次にSVGの中に記述されているCSSスタイルを別途用意したcommon.cssに移し替えます。

これは、アニメーションをCSSから適用した場合にタグに入っているスタイルが優先されて動かないことがあるためです。今回はでは、fill=”#00007F”が該当します。

HTMLファイル

編集後のHTMLファイルは以下のようになっています。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="common.css">
<title>Document</title>
</head>
<body>

<!--ロゴ表示-->
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 1600 800">
<g id="logo-top">
<path id="logo-top-1-M" class="logo-item" d="M351.732 220.463L337.084 253.3c-2.523 5.535-4.559 9.259-6.104 11.169-1.547 1.914-3.256 2.869-5.127 2.869-1.791 0-3.378-.772-4.761-2.319-.896-.977-2.951-4.557-6.165-10.742-3.216-6.184-5.88-11.677-7.996-16.479l-16.113-36.255c-2.197-5.045-4.517-7.568-6.958-7.568-2.605 0-4.028 2.157-4.272 6.47-.57 9.604-.854 18.475-.854 26.611 0 8.465.406 14.202 1.221 17.212.568 1.791 1.322 3.094 2.258 3.906.935.814 3.479 2.279 7.629 4.395 2.686 1.385 4.028 3.784 4.028 7.202 0 9.115-11.679 13.672-35.034 13.672-19.695 0-29.541-4.435-29.541-13.306 0-2.277.507-3.925 1.526-4.944 1.017-1.016 3.641-2.542 7.874-4.577 2.686-1.221 4.496-2.888 5.432-5.005.935-2.115 1.728-6.226 2.38-12.329.732-6.51 1.423-17.19 2.075-32.044.65-14.85.977-27.566.977-38.146 0-13.264-1.019-22.257-3.052-26.978-.732-1.627-1.568-2.848-2.502-3.662-.937-.813-2.707-1.871-5.31-3.174-5.779-2.766-8.667-6.348-8.667-10.742 0-2.848 1.078-5.451 3.235-7.813 2.155-2.359 5.024-4.028 8.606-5.005 3.58-1.057 8.362-1.973 14.343-2.746s11.047-1.16 15.198-1.16c10.416 0 17.78.854 22.095 2.563 2.115.814 3.784 1.913 5.005 3.296 1.221 1.385 2.97 4.232 5.249 8.545l25.391 46.753c2.766 5.127 4.679 8.261 5.737 9.399 1.057 1.141 2.521 1.709 4.395 1.709 1.627 0 3.071-.61 4.333-1.831 1.261-1.221 2.747-3.498 4.456-6.836l17.212-33.569c2.115-4.313 3.498-7.12 4.15-8.423 3.986-8.137 7.935-13.55 11.841-16.235 4.963-3.498 13.996-5.249 27.1-5.249 23.029 0 34.546 5.249 34.546 15.747 0 2.361-.448 4.254-1.343 5.676-.896 1.426-2.728 3.155-5.493 5.188-3.744 2.85-6.104 6.958-7.08 12.329-1.873 11.23-2.808 24.902-2.808 41.016 0 20.752.977 38.94 2.93 54.565.488 3.826 1.24 6.43 2.258 7.813 1.017 1.385 3.641 3.46 7.874 6.226 2.93 1.953 4.395 4.559 4.395 7.813 0 5.697-3.784 9.726-11.353 12.085-3.906 1.301-8.017 2.155-12.329 2.563-4.314.406-10.946.61-19.897.61-13.754 0-24.008-.977-30.762-2.93-7.488-2.197-11.23-5.939-11.23-11.23 0-1.953.488-3.56 1.465-4.821s3.498-3.56 7.568-6.897c2.115-1.709 3.559-5.005 4.333-9.888.772-4.883 1.16-13.184 1.16-24.902 0-6.51-.305-10.782-.916-12.817-.61-2.033-1.892-3.052-3.845-3.052-2.279 0-4.477 1.568-6.592 4.699-2.118 3.132-5.292 9.378-9.523 18.736z"/>
<path id="logo-top-2-O" class="logo-item" d="M545.58 100.956c20.914 0 39.185 5.981 54.81 17.944 10.578 8.221 19.165 18.881 25.757 31.982 6.428 13.021 9.644 26.043 9.644 39.063 0 19.207-6.348 36.377-19.043 51.514-10.742 12.859-24.78 22.095-42.114 27.71-10.662 3.418-21.362 5.127-32.104 5.127-14.08 0-27.548-2.93-40.405-8.789-15.545-7.08-27.71-17.78-36.499-32.104-8.545-13.834-12.817-29.093-12.817-45.776 0-19.367 5.493-36.457 16.479-51.27 9.766-13.184 22.907-22.867 39.429-29.053 11.064-4.231 23.353-6.348 36.863-6.348zm-11.597 35.034c-6.836 0-12.249 3.052-16.235 9.155-3.094 4.559-4.639 9.97-4.639 16.235 0 9.197 1.871 19.836 5.615 31.922 3.742 12.084 8.463 22.808 14.16 32.165 2.521 3.988 5.634 7.162 9.338 9.521 3.702 2.361 7.465 3.54 11.292 3.54 6.184 0 11.169-2.319 14.954-6.958s5.676-10.742 5.676-18.311c0-9.846-1.587-20.466-4.761-31.86-3.174-11.393-7.284-21.118-12.329-29.175-3.094-4.963-6.674-8.869-10.742-11.719-4.07-2.846-8.178-4.351-12.329-4.515z"/>
<path id="logo-top-3-V" class="logo-item" d="M814.501 142.216l-56.03 113.403c-3.418 7-6.674 11.822-9.766 14.465-3.094 2.645-7 3.968-11.719 3.968-3.906 0-7.406-.854-10.498-2.563-2.361-1.301-4.211-2.826-5.554-4.578-1.343-1.748-3.033-4.901-5.066-9.46l-49.927-109.985c-2.768-6.184-5.27-10.395-7.507-12.635-2.239-2.236-5.432-3.723-9.583-4.455-4.883-.895-7.324-3.906-7.324-9.033 0-6.266 4.272-11.088 12.817-14.465s20.792-5.066 36.743-5.066c16.602 0 28.809 1.263 36.621 3.784 7.813 2.523 11.719 6.43 11.719 11.719 0 3.418-2.117 6.592-6.348 9.521-3.256 2.197-4.883 4.272-4.883 6.226 0 1.791.732 4.354 2.197 7.69l15.259 34.424c2.197 5.047 4.679 7.568 7.446 7.568 2.686 0 5.085-1.343 7.202-4.028 2.115-2.686 4.963-7.975 8.545-15.869 6.428-14.16 10.172-22.521 11.23-25.086 1.057-2.563 1.587-4.535 1.587-5.92 0-2.766-1.913-5.127-5.737-7.08-4.232-2.197-6.348-5.005-6.348-8.423 0-9.684 12.979-14.526 38.94-14.526 12.939 0 22.074 1.037 27.404 3.113 5.33 2.074 7.996 5.636 7.996 10.681 0 6.023-3.5 9.481-10.498 10.376-4.965.57-8.179 1.385-9.644 2.441-2.602 1.872-5.694 6.469-9.274 13.793z"/>
<path id="logo-top-4-I" class="logo-item" d="M899.34 101.811c9.277 0 18.024.814 26.245 2.441 11.066 2.197 16.602 6.878 16.602 14.038 0 2.361-.55 4.132-1.647 5.31-1.1 1.182-3.888 2.911-8.362 5.188-3.744 1.873-6.206 5.981-7.386 12.329s-1.77 18.719-1.77 37.109c0 31.088.772 50.335 2.319 57.739.568 2.361 1.444 4.171 2.624 5.433s3.235 2.624 6.165 4.089c5.371 2.441 8.057 5.981 8.057 10.62 0 6.512-4.965 10.986-14.893 13.428-10.742 2.604-23.886 3.906-39.429 3.906-26.531 0-39.795-5.045-39.795-15.137 0-3.662 2.604-7.08 7.813-10.254 3.986-2.441 6.348-5.777 7.08-10.01 1.545-9.277 2.319-28.971 2.319-59.082 0-20.832-1.059-34.18-3.174-40.039-1.141-3.336-3.866-6.348-8.179-9.033-3.338-2.197-5.575-4.028-6.714-5.493-1.141-1.465-1.709-3.336-1.709-5.615 0-3.498 1.688-6.286 5.065-8.362 3.377-2.074 9.339-3.925 17.884-5.554 10.173-2.033 20.467-3.051 30.885-3.051z"/>
<path id="logo-top-5-N" class="logo-item" d="M1017.626 110.233l60.791 53.223c5.695 4.965 9.806 7.446 12.329 7.446 4.23 0 6.348-4.517 6.348-13.55 0-10.254-.61-17.252-1.831-20.996-1.221-3.742-3.784-6.55-7.69-8.423-3.174-1.545-5.413-3.193-6.714-4.943-1.303-1.75-1.953-4.008-1.953-6.775 0-6.836 4.679-11.23 14.038-13.184 3.824-.813 10.498-1.221 20.02-1.221 12.287 0 20.792.732 25.513 2.197 7.486 2.279 11.23 6.592 11.23 12.939 0 5.291-3.052 9.277-9.155 11.963-2.441 1.059-4.11 1.995-5.005 2.808-.896.814-1.669 2.035-2.319 3.662-2.197 5.371-3.338 15.545-3.418 30.518v39.795c0 6.104.04 14.446.122 25.024.08 14.324-.774 24.658-2.563 31.006-2.197 7.895-6.186 11.841-11.963 11.841-2.523 0-4.7-.53-6.53-1.587-1.832-1.057-4.864-3.498-9.095-7.324l-72.388-64.819c-5.047-4.557-9.237-6.836-12.573-6.836-4.965 0-7.446 6.878-7.446 20.63 0 11.313.63 19.043 1.892 23.193s3.846 7.202 7.752 9.155c5.451 2.686 8.179 6.186 8.179 10.498 0 11.313-12.167 16.968-36.499 16.968-10.986 0-19.512-1.445-25.574-4.334-6.063-2.887-9.094-6.977-9.094-12.268 0-2.766.568-4.841 1.709-6.226 1.139-1.383 3.702-3.254 7.69-5.615 3.824-2.277 6.144-6.306 6.958-12.085 1.383-10.498 2.075-25.593 2.075-45.288 0-20.996-1.221-36.295-3.662-45.898-.896-3.498-2.035-6.104-3.418-7.813-1.385-1.709-3.662-3.336-6.836-4.883-3.662-1.789-6.206-3.54-7.63-5.249s-2.136-3.784-2.136-6.226c0-7.813 6.714-12.735 20.142-14.771 4.557-.65 12.531-.977 23.926-.977 6.51 0 11.25.51 14.221 1.525 2.968 1.022 6.487 3.32 10.557 6.9z"/>
<path id="logo-top-6-G" class="logo-item" d="M1251.879 100.956c10.66 0 20.71 1.507 30.151 4.517 4.23 1.385 7.12 2.075 8.667 2.075 1.627 0 5.045-.935 10.254-2.808 1.709-.568 3.458-.854 5.249-.854 4.557 0 8.911 2.686 13.062 8.057 6.672 8.627 10.01 18.066 10.01 28.32 0 7-1.771 12.655-5.31 16.968-3.541 4.314-8.2 6.47-13.978 6.47-4.721 0-9.359-1.709-13.916-5.127-1.385-1.057-4.761-4.883-10.132-11.475-8.953-10.986-19.247-16.479-30.884-16.479-10.58 0-18.981 3.866-25.208 11.597-6.225 7.732-9.338 18.148-9.338 31.25 0 19.451 4.963 36.011 14.893 49.683 3.742 4.965 8.219 8.932 13.428 11.902 5.207 2.971 10.376 4.455 15.503 4.455 4.23 0 7.71-1.404 10.437-4.211 2.727-2.809 4.09-6.409 4.09-10.804 0-3.906-1.141-6.672-3.418-8.301-.896-.65-1.729-1.038-2.502-1.159-.774-.123-3.113-.184-7.02-.184-3.5 0-6.408-1.117-8.729-3.357-2.318-2.236-3.479-5.065-3.479-8.483 0-6.754 4.475-11.555 13.428-14.404 9.846-3.092 21.198-4.639 34.058-4.639 13.752 0 25.309 1.425 34.668 4.272 8.869 2.768 13.306 7.772 13.306 15.015 0 2.93-1.019 5.474-3.052 7.63-2.035 2.156-4.681 3.438-7.935 3.845-2.85.408-4.699 1.038-5.555 1.892-.854.855-1.729 2.951-2.624 6.287-3.5 12.939-10.336 23.764-20.508 32.471-7 5.941-15.442 10.58-25.329 13.916-9.889 3.336-20.285 5.005-31.189 5.005-17.822 0-34.18-4.108-49.072-12.329-15.301-8.381-26.938-20.1-34.912-35.156-6.674-12.531-10.01-26.081-10.01-40.649 0-14.729 3.986-28.727 11.963-41.992 8.463-14.24 20.304-25.227 35.522-32.959 13.264-6.839 28.401-10.257 45.411-10.257z"/>
</g>
<g id="logo-bottom">
<path id="logo-bottom-1-L" class="logo-item" d="M234.748 446.938v112.061c0 25.23 2.197 41.504 6.592 48.828 5.371 8.629 16.682 12.939 33.936 12.939 18.555 0 33.203-4.066 43.945-12.207 10.742-8.137 18.227-20.832 22.461-38.086 2.441-10.578 7.973-15.869 16.602-15.869 8.625 0 15.663 3.868 21.118 11.597 5.451 7.732 8.179 17.784 8.179 30.151 0 20.184-7.488 41.748-22.461 64.697-4.723 7.324-8.873 12.329-12.451 15.015-3.582 2.686-7.896 4.028-12.939 4.028l-54.199-6.592H114.875c-11.23 0-19.127-1.301-23.682-3.906-6.676-3.742-10.01-9.357-10.01-16.846 0-4.555 1.099-7.935 3.296-10.132s7.526-5.329 15.991-9.399c9.277-4.395 15.217-10.578 17.822-18.555 2.113-6.672 3.174-26.123 3.174-58.35 0-14.973-.408-36.537-1.221-64.697-.816-27.016-1.305-47.363-1.465-61.035 0-13.02-1.019-21.931-3.052-26.733-2.037-4.799-6.31-8.259-12.817-10.376-10.742-3.742-17.578-6.752-20.508-9.033-5.211-4.066-7.813-8.705-7.813-13.916 0-11.879 9.846-20.912 29.541-27.1 16.762-5.371 39.223-8.057 67.383-8.057 31.574 0 55.176 1.629 70.801 4.883 20.18 4.395 30.273 13.184 30.273 26.367 0 5.371-1.343 9.361-4.028 11.963-2.686 2.605-9.239 6.104-19.653 10.498-6.188 2.77-10.094 7.488-11.719 14.16-1.627 6.676-2.44 21.241-2.44 43.702z"/>
<path id="logo-bottom-2-O" class="logo-item" d="M581.672 333.412c41.828 0 78.369 11.963 109.619 35.889 21.156 16.441 38.33 37.762 51.514 63.965 12.855 26.043 19.287 52.086 19.287 78.125 0 38.414-12.695 72.754-38.086 103.027-21.484 25.719-49.561 44.189-84.229 55.42-21.324 6.836-42.725 10.254-64.209 10.254-28.16 0-55.096-5.859-80.811-17.578-31.09-14.16-55.42-35.561-72.998-64.209-17.09-27.668-25.635-58.186-25.635-91.553 0-38.734 10.986-72.914 32.959-102.539 19.531-26.367 45.814-45.734 78.857-58.105 22.134-8.462 46.712-12.696 73.732-12.696zm-23.193 70.068c-13.672 0-24.498 6.104-32.471 18.311-6.188 9.117-9.277 19.939-9.277 32.471 0 18.395 3.742 39.673 11.23 63.843 7.484 24.17 16.926 45.616 28.32 64.331 5.043 7.977 11.269 14.324 18.677 19.043 7.404 4.723 14.931 7.08 22.583 7.08 12.367 0 22.339-4.639 29.907-13.916s11.353-21.484 11.353-36.621c0-19.691-3.174-40.932-9.521-63.721-6.348-22.785-14.568-42.236-24.658-58.35-6.188-9.926-13.348-17.738-21.484-23.438-8.142-5.695-16.359-8.704-24.659-9.033z"/>
<path id="logo-bottom-3-G" class="logo-item" d="M971.076 333.412c21.32 0 41.42 3.014 60.303 9.033 8.461 2.77 14.24 4.15 17.334 4.15 3.254 0 10.09-1.869 20.508-5.615 3.418-1.137 6.916-1.709 10.498-1.709 9.113 0 17.822 5.371 26.123 16.113 13.344 17.254 20.02 36.133 20.02 56.641 0 14-3.54 25.311-10.62 33.936-7.08 8.629-16.399 12.939-27.954 12.939-9.441 0-18.719-3.418-27.832-10.254-2.77-2.113-9.521-9.766-20.264-22.949-17.906-21.973-38.494-32.959-61.768-32.959-21.16 0-37.964 7.732-50.415 23.193-12.451 15.465-18.677 36.297-18.677 62.5 0 38.902 9.926 72.021 29.785 99.365 7.484 9.93 16.438 17.864 26.855 23.804 10.414 5.943 20.752 8.911 31.006 8.911 8.461 0 15.419-2.808 20.874-8.423 5.451-5.615 8.179-12.817 8.179-21.606 0-7.813-2.281-13.344-6.836-16.602-1.793-1.301-3.46-2.075-5.005-2.319-1.549-.244-6.226-.366-14.038-.366-7 0-12.817-2.235-17.456-6.714-4.639-4.475-6.958-10.132-6.958-16.968 0-13.508 8.949-23.109 26.855-28.809 19.691-6.184 42.396-9.277 68.115-9.277 27.504 0 50.617 2.85 69.336 8.545 17.738 5.535 26.611 15.545 26.611 30.029 0 5.859-2.037 10.948-6.104 15.259-4.07 4.314-9.361 6.878-15.869 7.69-5.699.816-9.399 2.075-11.108 3.784s-3.46 5.901-5.249 12.573c-7 25.879-20.672 47.527-41.016 64.941-14 11.883-30.884 21.16-50.659 27.832s-40.569 10.01-62.378 10.01c-35.645 0-68.359-8.217-98.145-24.658-30.602-16.762-53.875-40.199-69.824-70.313-13.348-25.063-20.02-52.162-20.02-81.299 0-29.457 7.973-57.453 23.926-83.984 16.926-28.48 40.607-50.453 71.045-65.918 26.529-13.67 56.803-20.506 90.822-20.506z"/>
<path id="logo-bottom-4-O" class="logo-item" d="M1367.805 333.412c41.828 0 78.369 11.963 109.619 35.889 21.156 16.441 38.33 37.762 51.514 63.965 12.855 26.043 19.287 52.086 19.287 78.125 0 38.414-12.695 72.754-38.086 103.027-21.484 25.719-49.561 44.189-84.229 55.42-21.324 6.836-42.725 10.254-64.209 10.254-28.16 0-55.096-5.859-80.811-17.578-31.09-14.16-55.42-35.561-72.998-64.209-17.09-27.668-25.635-58.186-25.635-91.553 0-38.734 10.986-72.914 32.959-102.539 19.531-26.367 45.814-45.734 78.857-58.105 22.134-8.462 46.712-12.696 73.732-12.696zm-23.194 70.068c-13.672 0-24.498 6.104-32.471 18.311-6.188 9.117-9.277 19.939-9.277 32.471 0 18.395 3.742 39.673 11.23 63.843 7.484 24.17 16.926 45.616 28.32 64.331 5.043 7.977 11.269 14.324 18.677 19.043 7.404 4.723 14.931 7.08 22.583 7.08 12.367 0 22.339-4.639 29.907-13.916s11.353-21.484 11.353-36.621c0-19.691-3.174-40.932-9.521-63.721-6.348-22.785-14.568-42.236-24.658-58.35-6.188-9.926-13.348-17.738-21.484-23.438-8.141-5.695-16.358-8.704-24.659-9.033z"/>
</g>
</svg>

</body>
</html>

CSSファイル

編集後のCSSファイルは以下のようになっています。

@charset "utf-8";
/*ロゴCSS*/
#logo-bottom-1-L {
    fill:#00007F ;
  }

 

CSSアニメーション作成

CSSアニメーションを設定します。下記のような感じ。

@charset "utf-8";
/*ロゴCSS*/
#logo-bottom-1-L {
  fill: #00007f;
}

.logo-item {
  fill: #000;                     /*塗りつぶし色*/
  stroke-width: 2;                  /*線の太さ*/
  stroke-dasharray: 2500;           /*線の間隔*/
  stroke-dashoffset: 0;             /*線の始まりの開始位置*/
  animation-name: anime-logo;       /*keyframe名*/
  animation-duration: 4s;           /*所要時間*/
  animation-timing-function: linear; /*進行割合*/
}

/* アニメーション設定 */
@keyframes anime-logo {
  0% {
    fill: #fff;                     /*塗りつぶし色*/
    stroke-dashoffset: 2500;          /*線の始まりの開始位置*/
    stroke: #000;                   /*パスの色*/
  }
  80% {
    fill: #fff;                     /*塗りつぶし色*/
  }
  100% {
    stroke-dashoffset: 0;             /*線の始まりの開始位置*/
    stroke: white;                  /*パスの色*/
  }
}

 

 

完成系

動き

これで完成しました。

See the Pen
CSS Logo Animation by yours (@yours04)
on CodePen.

HTMLファイル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="common.css">
<title>Document</title>
</head>
<body>

<!--ロゴ表示-->
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 1600 800">
<g id="logo-top">
<path id="logo-top-1-M" class="logo-item" d="M351.732 220.463L337.084 253.3c-2.523 5.535-4.559 9.259-6.104 11.169-1.547 1.914-3.256 2.869-5.127 2.869-1.791 0-3.378-.772-4.761-2.319-.896-.977-2.951-4.557-6.165-10.742-3.216-6.184-5.88-11.677-7.996-16.479l-16.113-36.255c-2.197-5.045-4.517-7.568-6.958-7.568-2.605 0-4.028 2.157-4.272 6.47-.57 9.604-.854 18.475-.854 26.611 0 8.465.406 14.202 1.221 17.212.568 1.791 1.322 3.094 2.258 3.906.935.814 3.479 2.279 7.629 4.395 2.686 1.385 4.028 3.784 4.028 7.202 0 9.115-11.679 13.672-35.034 13.672-19.695 0-29.541-4.435-29.541-13.306 0-2.277.507-3.925 1.526-4.944 1.017-1.016 3.641-2.542 7.874-4.577 2.686-1.221 4.496-2.888 5.432-5.005.935-2.115 1.728-6.226 2.38-12.329.732-6.51 1.423-17.19 2.075-32.044.65-14.85.977-27.566.977-38.146 0-13.264-1.019-22.257-3.052-26.978-.732-1.627-1.568-2.848-2.502-3.662-.937-.813-2.707-1.871-5.31-3.174-5.779-2.766-8.667-6.348-8.667-10.742 0-2.848 1.078-5.451 3.235-7.813 2.155-2.359 5.024-4.028 8.606-5.005 3.58-1.057 8.362-1.973 14.343-2.746s11.047-1.16 15.198-1.16c10.416 0 17.78.854 22.095 2.563 2.115.814 3.784 1.913 5.005 3.296 1.221 1.385 2.97 4.232 5.249 8.545l25.391 46.753c2.766 5.127 4.679 8.261 5.737 9.399 1.057 1.141 2.521 1.709 4.395 1.709 1.627 0 3.071-.61 4.333-1.831 1.261-1.221 2.747-3.498 4.456-6.836l17.212-33.569c2.115-4.313 3.498-7.12 4.15-8.423 3.986-8.137 7.935-13.55 11.841-16.235 4.963-3.498 13.996-5.249 27.1-5.249 23.029 0 34.546 5.249 34.546 15.747 0 2.361-.448 4.254-1.343 5.676-.896 1.426-2.728 3.155-5.493 5.188-3.744 2.85-6.104 6.958-7.08 12.329-1.873 11.23-2.808 24.902-2.808 41.016 0 20.752.977 38.94 2.93 54.565.488 3.826 1.24 6.43 2.258 7.813 1.017 1.385 3.641 3.46 7.874 6.226 2.93 1.953 4.395 4.559 4.395 7.813 0 5.697-3.784 9.726-11.353 12.085-3.906 1.301-8.017 2.155-12.329 2.563-4.314.406-10.946.61-19.897.61-13.754 0-24.008-.977-30.762-2.93-7.488-2.197-11.23-5.939-11.23-11.23 0-1.953.488-3.56 1.465-4.821s3.498-3.56 7.568-6.897c2.115-1.709 3.559-5.005 4.333-9.888.772-4.883 1.16-13.184 1.16-24.902 0-6.51-.305-10.782-.916-12.817-.61-2.033-1.892-3.052-3.845-3.052-2.279 0-4.477 1.568-6.592 4.699-2.118 3.132-5.292 9.378-9.523 18.736z"/>
<path id="logo-top-2-O" class="logo-item" d="M545.58 100.956c20.914 0 39.185 5.981 54.81 17.944 10.578 8.221 19.165 18.881 25.757 31.982 6.428 13.021 9.644 26.043 9.644 39.063 0 19.207-6.348 36.377-19.043 51.514-10.742 12.859-24.78 22.095-42.114 27.71-10.662 3.418-21.362 5.127-32.104 5.127-14.08 0-27.548-2.93-40.405-8.789-15.545-7.08-27.71-17.78-36.499-32.104-8.545-13.834-12.817-29.093-12.817-45.776 0-19.367 5.493-36.457 16.479-51.27 9.766-13.184 22.907-22.867 39.429-29.053 11.064-4.231 23.353-6.348 36.863-6.348zm-11.597 35.034c-6.836 0-12.249 3.052-16.235 9.155-3.094 4.559-4.639 9.97-4.639 16.235 0 9.197 1.871 19.836 5.615 31.922 3.742 12.084 8.463 22.808 14.16 32.165 2.521 3.988 5.634 7.162 9.338 9.521 3.702 2.361 7.465 3.54 11.292 3.54 6.184 0 11.169-2.319 14.954-6.958s5.676-10.742 5.676-18.311c0-9.846-1.587-20.466-4.761-31.86-3.174-11.393-7.284-21.118-12.329-29.175-3.094-4.963-6.674-8.869-10.742-11.719-4.07-2.846-8.178-4.351-12.329-4.515z"/>
<path id="logo-top-3-V" class="logo-item" d="M814.501 142.216l-56.03 113.403c-3.418 7-6.674 11.822-9.766 14.465-3.094 2.645-7 3.968-11.719 3.968-3.906 0-7.406-.854-10.498-2.563-2.361-1.301-4.211-2.826-5.554-4.578-1.343-1.748-3.033-4.901-5.066-9.46l-49.927-109.985c-2.768-6.184-5.27-10.395-7.507-12.635-2.239-2.236-5.432-3.723-9.583-4.455-4.883-.895-7.324-3.906-7.324-9.033 0-6.266 4.272-11.088 12.817-14.465s20.792-5.066 36.743-5.066c16.602 0 28.809 1.263 36.621 3.784 7.813 2.523 11.719 6.43 11.719 11.719 0 3.418-2.117 6.592-6.348 9.521-3.256 2.197-4.883 4.272-4.883 6.226 0 1.791.732 4.354 2.197 7.69l15.259 34.424c2.197 5.047 4.679 7.568 7.446 7.568 2.686 0 5.085-1.343 7.202-4.028 2.115-2.686 4.963-7.975 8.545-15.869 6.428-14.16 10.172-22.521 11.23-25.086 1.057-2.563 1.587-4.535 1.587-5.92 0-2.766-1.913-5.127-5.737-7.08-4.232-2.197-6.348-5.005-6.348-8.423 0-9.684 12.979-14.526 38.94-14.526 12.939 0 22.074 1.037 27.404 3.113 5.33 2.074 7.996 5.636 7.996 10.681 0 6.023-3.5 9.481-10.498 10.376-4.965.57-8.179 1.385-9.644 2.441-2.602 1.872-5.694 6.469-9.274 13.793z"/>
<path id="logo-top-4-I" class="logo-item" d="M899.34 101.811c9.277 0 18.024.814 26.245 2.441 11.066 2.197 16.602 6.878 16.602 14.038 0 2.361-.55 4.132-1.647 5.31-1.1 1.182-3.888 2.911-8.362 5.188-3.744 1.873-6.206 5.981-7.386 12.329s-1.77 18.719-1.77 37.109c0 31.088.772 50.335 2.319 57.739.568 2.361 1.444 4.171 2.624 5.433s3.235 2.624 6.165 4.089c5.371 2.441 8.057 5.981 8.057 10.62 0 6.512-4.965 10.986-14.893 13.428-10.742 2.604-23.886 3.906-39.429 3.906-26.531 0-39.795-5.045-39.795-15.137 0-3.662 2.604-7.08 7.813-10.254 3.986-2.441 6.348-5.777 7.08-10.01 1.545-9.277 2.319-28.971 2.319-59.082 0-20.832-1.059-34.18-3.174-40.039-1.141-3.336-3.866-6.348-8.179-9.033-3.338-2.197-5.575-4.028-6.714-5.493-1.141-1.465-1.709-3.336-1.709-5.615 0-3.498 1.688-6.286 5.065-8.362 3.377-2.074 9.339-3.925 17.884-5.554 10.173-2.033 20.467-3.051 30.885-3.051z"/>
<path id="logo-top-5-N" class="logo-item" d="M1017.626 110.233l60.791 53.223c5.695 4.965 9.806 7.446 12.329 7.446 4.23 0 6.348-4.517 6.348-13.55 0-10.254-.61-17.252-1.831-20.996-1.221-3.742-3.784-6.55-7.69-8.423-3.174-1.545-5.413-3.193-6.714-4.943-1.303-1.75-1.953-4.008-1.953-6.775 0-6.836 4.679-11.23 14.038-13.184 3.824-.813 10.498-1.221 20.02-1.221 12.287 0 20.792.732 25.513 2.197 7.486 2.279 11.23 6.592 11.23 12.939 0 5.291-3.052 9.277-9.155 11.963-2.441 1.059-4.11 1.995-5.005 2.808-.896.814-1.669 2.035-2.319 3.662-2.197 5.371-3.338 15.545-3.418 30.518v39.795c0 6.104.04 14.446.122 25.024.08 14.324-.774 24.658-2.563 31.006-2.197 7.895-6.186 11.841-11.963 11.841-2.523 0-4.7-.53-6.53-1.587-1.832-1.057-4.864-3.498-9.095-7.324l-72.388-64.819c-5.047-4.557-9.237-6.836-12.573-6.836-4.965 0-7.446 6.878-7.446 20.63 0 11.313.63 19.043 1.892 23.193s3.846 7.202 7.752 9.155c5.451 2.686 8.179 6.186 8.179 10.498 0 11.313-12.167 16.968-36.499 16.968-10.986 0-19.512-1.445-25.574-4.334-6.063-2.887-9.094-6.977-9.094-12.268 0-2.766.568-4.841 1.709-6.226 1.139-1.383 3.702-3.254 7.69-5.615 3.824-2.277 6.144-6.306 6.958-12.085 1.383-10.498 2.075-25.593 2.075-45.288 0-20.996-1.221-36.295-3.662-45.898-.896-3.498-2.035-6.104-3.418-7.813-1.385-1.709-3.662-3.336-6.836-4.883-3.662-1.789-6.206-3.54-7.63-5.249s-2.136-3.784-2.136-6.226c0-7.813 6.714-12.735 20.142-14.771 4.557-.65 12.531-.977 23.926-.977 6.51 0 11.25.51 14.221 1.525 2.968 1.022 6.487 3.32 10.557 6.9z"/>
<path id="logo-top-6-G" class="logo-item" d="M1251.879 100.956c10.66 0 20.71 1.507 30.151 4.517 4.23 1.385 7.12 2.075 8.667 2.075 1.627 0 5.045-.935 10.254-2.808 1.709-.568 3.458-.854 5.249-.854 4.557 0 8.911 2.686 13.062 8.057 6.672 8.627 10.01 18.066 10.01 28.32 0 7-1.771 12.655-5.31 16.968-3.541 4.314-8.2 6.47-13.978 6.47-4.721 0-9.359-1.709-13.916-5.127-1.385-1.057-4.761-4.883-10.132-11.475-8.953-10.986-19.247-16.479-30.884-16.479-10.58 0-18.981 3.866-25.208 11.597-6.225 7.732-9.338 18.148-9.338 31.25 0 19.451 4.963 36.011 14.893 49.683 3.742 4.965 8.219 8.932 13.428 11.902 5.207 2.971 10.376 4.455 15.503 4.455 4.23 0 7.71-1.404 10.437-4.211 2.727-2.809 4.09-6.409 4.09-10.804 0-3.906-1.141-6.672-3.418-8.301-.896-.65-1.729-1.038-2.502-1.159-.774-.123-3.113-.184-7.02-.184-3.5 0-6.408-1.117-8.729-3.357-2.318-2.236-3.479-5.065-3.479-8.483 0-6.754 4.475-11.555 13.428-14.404 9.846-3.092 21.198-4.639 34.058-4.639 13.752 0 25.309 1.425 34.668 4.272 8.869 2.768 13.306 7.772 13.306 15.015 0 2.93-1.019 5.474-3.052 7.63-2.035 2.156-4.681 3.438-7.935 3.845-2.85.408-4.699 1.038-5.555 1.892-.854.855-1.729 2.951-2.624 6.287-3.5 12.939-10.336 23.764-20.508 32.471-7 5.941-15.442 10.58-25.329 13.916-9.889 3.336-20.285 5.005-31.189 5.005-17.822 0-34.18-4.108-49.072-12.329-15.301-8.381-26.938-20.1-34.912-35.156-6.674-12.531-10.01-26.081-10.01-40.649 0-14.729 3.986-28.727 11.963-41.992 8.463-14.24 20.304-25.227 35.522-32.959 13.264-6.839 28.401-10.257 45.411-10.257z"/>
</g>
<g id="logo-bottom">
<path id="logo-bottom-1-L" class="logo-item" d="M234.748 446.938v112.061c0 25.23 2.197 41.504 6.592 48.828 5.371 8.629 16.682 12.939 33.936 12.939 18.555 0 33.203-4.066 43.945-12.207 10.742-8.137 18.227-20.832 22.461-38.086 2.441-10.578 7.973-15.869 16.602-15.869 8.625 0 15.663 3.868 21.118 11.597 5.451 7.732 8.179 17.784 8.179 30.151 0 20.184-7.488 41.748-22.461 64.697-4.723 7.324-8.873 12.329-12.451 15.015-3.582 2.686-7.896 4.028-12.939 4.028l-54.199-6.592H114.875c-11.23 0-19.127-1.301-23.682-3.906-6.676-3.742-10.01-9.357-10.01-16.846 0-4.555 1.099-7.935 3.296-10.132s7.526-5.329 15.991-9.399c9.277-4.395 15.217-10.578 17.822-18.555 2.113-6.672 3.174-26.123 3.174-58.35 0-14.973-.408-36.537-1.221-64.697-.816-27.016-1.305-47.363-1.465-61.035 0-13.02-1.019-21.931-3.052-26.733-2.037-4.799-6.31-8.259-12.817-10.376-10.742-3.742-17.578-6.752-20.508-9.033-5.211-4.066-7.813-8.705-7.813-13.916 0-11.879 9.846-20.912 29.541-27.1 16.762-5.371 39.223-8.057 67.383-8.057 31.574 0 55.176 1.629 70.801 4.883 20.18 4.395 30.273 13.184 30.273 26.367 0 5.371-1.343 9.361-4.028 11.963-2.686 2.605-9.239 6.104-19.653 10.498-6.188 2.77-10.094 7.488-11.719 14.16-1.627 6.676-2.44 21.241-2.44 43.702z"/>
<path id="logo-bottom-2-O" class="logo-item" d="M581.672 333.412c41.828 0 78.369 11.963 109.619 35.889 21.156 16.441 38.33 37.762 51.514 63.965 12.855 26.043 19.287 52.086 19.287 78.125 0 38.414-12.695 72.754-38.086 103.027-21.484 25.719-49.561 44.189-84.229 55.42-21.324 6.836-42.725 10.254-64.209 10.254-28.16 0-55.096-5.859-80.811-17.578-31.09-14.16-55.42-35.561-72.998-64.209-17.09-27.668-25.635-58.186-25.635-91.553 0-38.734 10.986-72.914 32.959-102.539 19.531-26.367 45.814-45.734 78.857-58.105 22.134-8.462 46.712-12.696 73.732-12.696zm-23.193 70.068c-13.672 0-24.498 6.104-32.471 18.311-6.188 9.117-9.277 19.939-9.277 32.471 0 18.395 3.742 39.673 11.23 63.843 7.484 24.17 16.926 45.616 28.32 64.331 5.043 7.977 11.269 14.324 18.677 19.043 7.404 4.723 14.931 7.08 22.583 7.08 12.367 0 22.339-4.639 29.907-13.916s11.353-21.484 11.353-36.621c0-19.691-3.174-40.932-9.521-63.721-6.348-22.785-14.568-42.236-24.658-58.35-6.188-9.926-13.348-17.738-21.484-23.438-8.142-5.695-16.359-8.704-24.659-9.033z"/>
<path id="logo-bottom-3-G" class="logo-item" d="M971.076 333.412c21.32 0 41.42 3.014 60.303 9.033 8.461 2.77 14.24 4.15 17.334 4.15 3.254 0 10.09-1.869 20.508-5.615 3.418-1.137 6.916-1.709 10.498-1.709 9.113 0 17.822 5.371 26.123 16.113 13.344 17.254 20.02 36.133 20.02 56.641 0 14-3.54 25.311-10.62 33.936-7.08 8.629-16.399 12.939-27.954 12.939-9.441 0-18.719-3.418-27.832-10.254-2.77-2.113-9.521-9.766-20.264-22.949-17.906-21.973-38.494-32.959-61.768-32.959-21.16 0-37.964 7.732-50.415 23.193-12.451 15.465-18.677 36.297-18.677 62.5 0 38.902 9.926 72.021 29.785 99.365 7.484 9.93 16.438 17.864 26.855 23.804 10.414 5.943 20.752 8.911 31.006 8.911 8.461 0 15.419-2.808 20.874-8.423 5.451-5.615 8.179-12.817 8.179-21.606 0-7.813-2.281-13.344-6.836-16.602-1.793-1.301-3.46-2.075-5.005-2.319-1.549-.244-6.226-.366-14.038-.366-7 0-12.817-2.235-17.456-6.714-4.639-4.475-6.958-10.132-6.958-16.968 0-13.508 8.949-23.109 26.855-28.809 19.691-6.184 42.396-9.277 68.115-9.277 27.504 0 50.617 2.85 69.336 8.545 17.738 5.535 26.611 15.545 26.611 30.029 0 5.859-2.037 10.948-6.104 15.259-4.07 4.314-9.361 6.878-15.869 7.69-5.699.816-9.399 2.075-11.108 3.784s-3.46 5.901-5.249 12.573c-7 25.879-20.672 47.527-41.016 64.941-14 11.883-30.884 21.16-50.659 27.832s-40.569 10.01-62.378 10.01c-35.645 0-68.359-8.217-98.145-24.658-30.602-16.762-53.875-40.199-69.824-70.313-13.348-25.063-20.02-52.162-20.02-81.299 0-29.457 7.973-57.453 23.926-83.984 16.926-28.48 40.607-50.453 71.045-65.918 26.529-13.67 56.803-20.506 90.822-20.506z"/>
<path id="logo-bottom-4-O" class="logo-item" d="M1367.805 333.412c41.828 0 78.369 11.963 109.619 35.889 21.156 16.441 38.33 37.762 51.514 63.965 12.855 26.043 19.287 52.086 19.287 78.125 0 38.414-12.695 72.754-38.086 103.027-21.484 25.719-49.561 44.189-84.229 55.42-21.324 6.836-42.725 10.254-64.209 10.254-28.16 0-55.096-5.859-80.811-17.578-31.09-14.16-55.42-35.561-72.998-64.209-17.09-27.668-25.635-58.186-25.635-91.553 0-38.734 10.986-72.914 32.959-102.539 19.531-26.367 45.814-45.734 78.857-58.105 22.134-8.462 46.712-12.696 73.732-12.696zm-23.194 70.068c-13.672 0-24.498 6.104-32.471 18.311-6.188 9.117-9.277 19.939-9.277 32.471 0 18.395 3.742 39.673 11.23 63.843 7.484 24.17 16.926 45.616 28.32 64.331 5.043 7.977 11.269 14.324 18.677 19.043 7.404 4.723 14.931 7.08 22.583 7.08 12.367 0 22.339-4.639 29.907-13.916s11.353-21.484 11.353-36.621c0-19.691-3.174-40.932-9.521-63.721-6.348-22.785-14.568-42.236-24.658-58.35-6.188-9.926-13.348-17.738-21.484-23.438-8.141-5.695-16.358-8.704-24.659-9.033z"/>
</g>
</svg>

</body>
</html>

 

CSSファイル

@charset "utf-8";
/*ロゴCSS*/
#logo-bottom-1-L {
  fill: #00007f;
}

.logo-item {
  fill: #000;                     /*塗りつぶし色*/
  stroke-width: 2;                  /*線の太さ*/
  stroke-dasharray: 2500;           /*線の間隔*/
  stroke-dashoffset: 0;             /*線の始まりの開始位置*/
  animation-name: anime-logo;       /*keyframe名*/
  animation-duration: 4s;           /*所要時間*/
  animation-timing-function: linear; /*進行割合*/
}

/* アニメーション設定 */
@keyframes anime-logo {
  0% {
    fill: #fff;                     /*塗りつぶし色*/
    stroke-dashoffset: 2500;          /*線の始まりの開始位置*/
    stroke: #000;                   /*パスの色*/
  }
  80% {
    fill: #fff;                     /*塗りつぶし色*/
  }
  100% {
    stroke-dashoffset: 0;             /*線の始まりの開始位置*/
    stroke: white;                  /*パスの色*/
  }
}

 

 

参考

https://azarashic.net/svg-animation-1/
azarashic.net
Illustratorでsvgを作成する際に注意すべきこと | KSK-soft.com
ksk-soft.com
もっと早く知りたかった！SVGを扱うなら知っておきたいタグ＆プロパティまとめ
今回は、SVGを扱うなら知っておきたいタグやプロパティをまとめてご紹介します。 細かい属性まで含めると膨大な量になってしまうので、ここではよく使うであろう属性をピックアップしてご紹介していきます。
ferret-plus.com
SVGを使うときに知っておくといいことをまとめました - Qiita
アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんありま...
qiita.com
https://note.com/72kichi/n/n60dc74f58834
note.com

まとめ

始める前はもっと簡単なものかと思ってましたが、調べると色々な情報があって混乱しました。

調べ切れてないタグの使い方とかもあったので、時間あるときに調べてみたいと思います。

スポンサーリンク
アドセンス1
アドセンス1
ブログランキング・にほんブログ村へ

シェアする

フォローする

, , 管理人T