「ロゴを動かしてみよう！」 SVGとアニメーション勉強会の記録です。

fuminote

2022年4月3日 15:26

「ロゴのデータを利用して、アニメーションとして動かしてみよう！」勉強会に参加しました。制作の概要をご紹介したいと思います。

まずは、動く様子から。

画像等を共有できるアプリ Gyazo を利用させていただいています。クリック後の画面では、開発元の Nota株式会社様がご提供されている広告の表示がある場合があります。ご了承下さい。

◆ 準備

・ロゴデータを準備する

今回は、長野県松本市にあります、有限会社アルプ様 のロゴをお借りして制作いたしました。本物のロゴを勉強素材としてご提供いただき、感謝の気持ちとともに緊張感も高まっています。不備のないよう最後まで書いていきたいと思います。

・ロゴデータをSVG形式に変換する

ロゴのデータはPNG形式でしたので、Photoshop にてSVG形式のファイルに変換しました。

補足　SVG（Scalable Vector Graphics）について
・SVGに変換できるデータは、基本的にはパスで描かれたベクター画像です。
・SVGに変換する方法は、Photoshop以外にも、画像編集やイラストを描くためのツールやWebサイトで提供されている変換ツール（コンバーター）があります。
SVGについて、詳細に解説されているWebサイトを2つご紹介します。W3C（World Wide Web Consortium）様と、株式会社日本HP 様の公式サイトです。

SVG形式で保存したロゴデータを、コーディングが出来るツール（Visual Studio Code など）で開いてみます。画像の情報が、テキストファイルで表現されていることが確認できます。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 132.78 32.58"><defs><style>.cls-1{fill:#ae8a55;}.cls-2{fill:#001655;}
</style></defs><path class="cls-1" d="M289.24,405.65h-5.73l-10,
30.78h-1.85v.86h9.49v-.86h-4.34l2.53-7.81h9.87l3.22,7.67H289v1h15.8v-1h-2.14Zm-5.69,
9.75,4.76,11.23h-8.4Z" transform="translate(-231.11 -404.71)"/><path class="cls-1"
 d="M332.46,424.29h0c-2.72,6.87-6.48,10.85-10.72,12h-2.88V408.82l3.81-2.31h-17l3.81,
2.31v27.45h-3.58v1h26.63v-1h0Z" transform="translate(-231.11 -404.71)"/>
<path class="cls-1" d="M363.89,415.7c0-5.3-4.83-9.19-15.35-9.19h-13.9l3.81,
2.31v27.32h-3.78v1.15h17.17v-1.15h-4V425.79C358.12,425.7,363.89,422,363.89,
415.7Zm-16-8.51h.47c3.42,0,5.73,2.95,5.73,8.55,0,5.82-2.48,9.32-6.2,9.37Z"
 transform="translate(-231.11 -404.71)"/><polygon class="cls-2"
 points="18.52 23.1 24.84 10.94 12.21 10.94 18.52 23.1"/><polygon class="cls-2"
 points="11.55 12.08 0 32.09 13.34 32.09 17.86 24.24 11.55 12.08"/><polygon
 class="cls-2" points="25.5 12.08 19.18 24.24 23.71 32.09 37.05 32.09 25.5 12.08"/>
<polygon class="cls-2" points="24.2 9.83 18.52 0 12.85 9.83 24.2 9.83"/></svg>

◆ HTML＆CSS にてSVG画像をアニメーションとして動かすコーディングをする

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有限会社アルプ様ロゴアニメーション勉強会</title>
    <style>
        body {
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.78 32.58" width="300px">
        <defs>
            <style>
                .cls-1 {
                    fill: #ae8a55;
                }

                .cls-2 {
                    fill: #001655;
                }

                .item03 {
                    animation-name: move1;
                    animation-fill-mode: backwards;
                    animation-duration: 3s;
                    animation-iteration-count: 1;
                    animation-timing-function: linear;
                    animation-delay: 0.5s;
                    animation-direction: normal;
                }

                .item02 {
                    animation-name: move2;
                    animation-fill-mode: backwards;
                    animation-duration: 3s;
                    animation-iteration-count: 1;
                    animation-timing-function: linear;
                    animation-delay: 0.5s;
                    animation-direction: normal;
                }

                .item01 {
                    transform-origin: 50% 50% 0;
                    animation-name: move3;
                    animation-fill-mode: backwards;
                    animation-duration: 4s;
                    animation-iteration-count: 1;
                    animation-timing-function: linear;
                    animation-delay: 0.5s;
                    animation-direction: normal;
                }

                .item05 {
                    transform-origin: 50% 50% 0;
                    animation-name: move4;
                    animation-fill-mode: backwards;
                    animation-duration: 5s;
                    animation-iteration-count: 1;
                    animation-timing-function: linear;
                    animation-delay: 0.5s;
                    animation-direction: normal;
                }

                .item06 {
                    transform-origin: 50% 50% 0;
                    animation-name: move4;
                    animation-fill-mode: backwards;
                    animation-duration: 4.5s;
                    animation-iteration-count: 1;
                    animation-timing-function: linear;
                    animation-delay: 1s;
                    animation-direction: normal;
                }

                .item07 {
                    transform-origin: 50% 50% 0;
                    animation-name: move4;
                    animation-fill-mode: backwards;
                    animation-duration: 4s;
                    animation-iteration-count: 1;
                    animation-timing-function: linear;
                    animation-delay: 1.5s;
                    animation-direction: normal;
                }

                @keyframes move1 {
                    0% {
                        transform: translateX(150px);
                    }

                    100% {
                        transform: translateX(0);
                    }
                }

                @keyframes move2 {
                    0% {
                        transform: translateY(-150px);
                    }

                    100% {
                        transform: translateY(0);
                    }
                }

                @keyframes move3 {
                    0% {
                        transform: rotate(360deg);
                    }

                    100% {
                        transform: rotate(0);
                    }
                }

                @keyframes move4 {
                    0% {
                        transform: translateX(360deg);
                    }

                    100% {
                        transform: translateX(0);
                    }
                }
            </style>
        </defs>

        <path class="cls-1 item05"
            d="M289.24,405.65h-5.73l-10,30.78h-1.85v.86h9.49v-.86h-4.34l2.53-7.81h9.87l3.22,7.67H289v1h15.8v-1h-2.14Zm-5.69,9.75,4.76,11.23h-8.4Z"
            transform="translate(-231.11 -404.71)"/>
        <path class="cls-1 item06"
            d="M332.46,424.29h0c-2.72,6.87-6.48,10.85-10.72,12h-2.88V408.82l3.81-2.31h-17l3.81,2.31v27.45h-3.58v1h26.63v-1h0Z"
            transform="translate(-231.11 -404.71)"/>
        <path class="cls-1 item07"
            d="M363.89,415.7c0-5.3-4.83-9.19-15.35-9.19h-13.9l3.81,2.31v27.32h-3.78v1.15h17.17v-1.15h-4V425.79C358.12,425.7,363.89,422,363.89,415.7Zm-16-8.51h.47c3.42,0,5.73,2.95,5.73,8.55,0,5.82-2.48,9.32-6.2,9.37Z"
            transform="translate(-231.11 -404.71)"/>
        <polygon class="cls-2 item01" points="18.52 23.1 24.84 10.94 12.21 10.94 18.52 23.1" />
        <polygon class="cls-2 item02" points="11.55 12.08 0 32.09 13.34 32.09 17.86 24.24 11.55 12.08" />
        <polygon class="cls-2 item03" points="25.5 12.08 19.18 24.24 23.71 32.09 37.05 32.09 25.5 12.08" />
        <polygon class="cls-2 item04" points="24.2 9.83 18.52 0 12.85 9.83 24.2 9.83"/>
    </svg>

</body>

</html>

全文を載せたので、長ーくてごめんなさい。こちらのコードに関する詳しいご説明は省略いたします。勉強してみたい方いらっしゃいましたら、講師のピヨ彦さんが、私が作ったロゴを動かす方法を書いてくださっていますので、ぜひご一読ください。

◆ 実際に動く様子を確認する

実際にロゴが動く様子を、皆さんにどんな方法で見ていただけばよいだろうと思案した結果、Nota株式会社様の Gyazo（無料）を利用させていただくことにしました。リンクのプレビューで動きを表示出来ていることも、楽しいイメージとして伝わりましたら嬉しいです。
※ クリック後の画面では、Nota株式会社様がご提供されている広告の表示がある場合があります。ご了承下さい。

Nota株式会社様の Gyazo のサービス内容については、公式サイトにてご確認ください。

今回、ロゴを利用させていただきました 有限会社アルプ様 の Webサイトとロゴ（リニューアル）は、私が所属している Project Oct にて、制作しています。

この記事が気に入ったらサポートをしてみませんか？