【SVGの基本】SVGファイルを作ってサイトのロゴに設定しよう

SVGとはScalable Vector Graphicsの略でずばりスケーラブルなベクトルのグラフィックのことです。（さっぱりわからん）

つまりJPEGとかPNG、GIFみたいなビットマップ（ラスタ）形式ではなく、イラストレーターなんかで扱うベクトル形式のベクター画像で描画する方式です。

・・・・・・。

ベクター画像ってのは簡単に言うと、拡大縮小しても汚くなったり荒くなったりしない画像です。

それでSVGファイルはそのベクター画像をWEBで表示することができるのです。

SVGファイル作ってみよう

illustratorでSVGファイルを作っていきましょう。まぁ作るといってもサイトのロゴ画像なんかはすでにあると思うのでもう作ってる人はそのファイル（aiファイル）を開いても大丈夫です。

そんなのないよ～って人はillustratorで新規ファイルで適当に作ってください。

新しいファイルを作成

illustratorの【ファイル】>【新規】を選択して、名称とドキュメントのサイズを設定したら【作成】ボタンを押してください。今回は名称「svg_01」の幅「300px」、高さ「300px」に設定してます。

イメージを作成

アートボード内にお好きなようにロゴなり、アイコンなりを作成してください。
ここでは「Webdings」Fontでパトカーのアイコンを選びました。

テキストオブジェクトのままでもSVGファイルにはできますが、今回はアウトラインに変換してSVGファイルとして保存します。

アウトラインに変換するテキストオブジェクトを選択し、【書式】>【アウトラインを作成】を選択。これでテキストオブジェクトがアウトラインに変換されます。

SVGファイルとして保存する

さて今作ったイメージをSVGファイルとして保存してみましょう。【ファイル】>【別名で保存】を選択。別名で保存ダイアログの【ファイルの種類】で【SVG(*.SVG)】を選択して【保存】ボタンをクリックすると、SVGオプションダイアログが表示されますが、そのまま【OK】を押しましょう。

これでSVGファイルができました。

※保存のオプションは基本的にデフォルトでOKですが、保存時のオプションの設定について詳しく知りたい方はこちらに詳しく書いてありますのでチェックしてみてください。
SVG 形式で書き出す方法 （Illustrator CC）

SVGファイルをWEBで表示させる

いよいよ先ほど作ったSVGファイルをWEBで表示させてみましょう。

SVGファイルを表示させる方法は3つあります。

1. SVGファイルをimgタグやobjectタグで表示
2. 直接HTMLコードに埋め込んで表示
3. 複数のSVGファイルを一つのファイルにまとめて個別に呼び出して表示

それぞれの用途に合わせてお使いくださいと言いたいですが、基本的に1と2の表示方法しか使ったことがないのでそれらを説明します。

これが一番簡単で、コードも少ないです。

JPEGやPNGなどの画像ファイルを読み込むのと同じように<img>タグを利用します。

実際に表示するとこんな感じ

拡大してみてください。ドンドン拡大しても画像が荒くないのが確認できると思います。

次にHTMLコードにSVGコードに直接埋め込んで表示する方法ですが、こちらはSVG画像をアニメーションさせたりする時に、JavaScriptやCSSを適用させる場合にこの方法を使います。
それ以外、ただSVG画像を表示するだけなら先ほどの<img>タグでの表示方法の方がソースがすっきりします。

それでは表示方法について説明します。

先ほどillustratorで作成したファイル(ai)を開き、SVGファイルで保存したときの手順と同様に進め、【SVGオプション】ダイアログが表示されたら今度は【SVGコード】ボタンをクリック。

エディタが立ち上がり

このようなソースコードが表示されたかと思います。この中の<svg>タグと<path>タグの部分だけを使用します。その他の<?xml ～とかは消してもOK。

これをHTMLコードに張り付ければSVG画像が表示されます。

最後～

恥ずかしながらつい最近まではSVGの存在は知っていましたが、めんどくさそうなので手を出さずにいたんですが、やってみると以外に簡単にSVGファイルを表示することができました。

今回説明したのは表示の仕方までですが、SVGと言ったらアニメーションなのでそのうちアニメーションのさせ方も勉強して記事にしてみます。

以上！へばっ！