BETA

svgでアイコンを作ってみる

投稿日:2019-07-30
最終更新:2019-07-30

はじめに

svgを使って、アイコンを作ってみました。今回はそれに使ったツール等を紹介したいと思います。

便利なエディタ

もちろん今はAdobeのillustrator等を使うことで簡単にsvgに書き出すのが簡単になっていますが、今回はコードで書いていくのでVScodeを用いました。VScodeにも便利な機能があり、それを使うことでsvgの作成がすこし楽になります。それがSVG Viewer

これを使うとどうなるのかというと、svgを変更したら自動でviewが変更されます。

作ってみる

まずは、作業フォルダでtest.svgを作成して以下のコードを記入します。

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">  
  <text x="250" y="250" font-family="Verdana" font-size="35" style="text-anchor:middle" >  
    Hello World!!  
  </text>  
</svg>  

次に、ファイルの上の虫眼鏡のようなアイコンをクリックすると...


右側にHello Worldと表示されたビューが出力されました!!

アイコンを描いてみる

何を描くか考えたんですけど、デザインがシンプルで最近お世話になっているReactのロゴを作ってみます。
60°回転した楕円3つに一つの円なのでこれくらいで描くことができます。

ちょっと工夫してみる

これでアイコンは一応完成とします。これをhtmlでイメージとして読み込めばWebページ等に表示することが可能になります。

アニメーションを追加してみる

上でも言ったように、htmlにはイメージとしてsvgを取り込むのでアニメーションを実装するのは困難です。今回はhtmlに直接svgを書いてアニメーションを実装してみました。

<!DOCTYPE html>  
<html>  
    <head>  
        <title>Drawing icons by SVG</title>  
        <style>  
            body{  
                text-align: center;  
            }  

            svg g .rotation1{  
                animation: rotate 2s linear 0s infinite normal none;  
            }  
            svg g .rotation2{  
                animation: rotate 3s ease 0s infinite normal none;  
            }  
            svg g .rotation3{  
                animation: rotate 3s ease 0s infinite normal none;  
            }  

            @keyframes rotate{  
                0%{  
                    transform: rotate(0deg);  
                }  
                100%{  
                    transform: rotate(180deg);  
                }  
            }  
        </style>  
    </head>  
    <body>  
        <svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">  
            <g transform="translate(250, 250)">  
                <g class="rotation1">  
                    <ellipse rx="220" ry="100" fill="#003355"></ellipse>   
                    <ellipse rx="220" ry="100" fill="#003355" transform="rotate(60)"></ellipse>   
                    <ellipse rx="220" ry="100" fill="#003355" transform="rotate(120)"></ellipse>   
                </g>  
                <g class="rotation2">  
                    <ellipse rx="200" ry="70" fill="none" stroke="#00aaaa" stroke-width="8"></ellipse>   
                    <ellipse rx="200" ry="70" fill="none" stroke="#00aaaa" stroke-width="8" transform="rotate(60)"></ellipse>   
                    <ellipse rx="200" ry="70" fill="none" stroke="#00aaaa" stroke-width="8" transform="rotate(120)"></ellipse>   
                </g>  
                <g class="rotation3">  
                    <ellipse rx="200" ry="70" fill="none" stroke="white" stroke-width="2"></ellipse>   
                    <ellipse rx="200" ry="70" fill="none" stroke="white" stroke-width="2" transform="rotate(60)"></ellipse>   
                    <ellipse rx="200" ry="70" fill="none" stroke="white" stroke-width="2" transform="rotate(120)"></ellipse>   
                </g>  
                <circle r="20" fill="#00aaaa"></circle>  
                <circle r="5" fill="white" transform="translate(-5, -5)"></circle>  
            </g>  
        </svg>  
    </body>  
</html>  

動作結果

こんなのがページにあったらやかましいだけですね。

さいごに

今回はsvgをコードで作成するツールの紹介と簡単なイントロダクションをしました。
自分のオリジナルアイコンを作ってみるのも楽しいかもしれないですね。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@syakooのブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!