【SVG実践】SVG画像を使ってみる - シアトルコンサルティングサービス開発ブログ

こんにちは iijmyaです。

今回は先日お話ししましたSVGの実践編として、
SVGで画像を作成して実際にHTMLページに載せてみたいと思います。

=============================== 目　次 ===============================

1．SVGファイルの作成
2．HTMLのページにSVGファイルを載せる
3．SVGライフを充実させるために

====================================================================

前回お話ししたように、SVGファイルはAdobeのIllustratorやオープンソースソフトのInkscapeなどの
画像編集ソフトを利用することによって作成することが出来ます。

今回はIllustratorを使ってSVGファイルを作成し、HTMLのページに載せてみます。

1．SVGファイルの作成

■ アイコンを描く

まずはIllustratorでアイコンを描きましょう。
（今回はIllustrator CCを使用しています）

f:id:seattleservice:20140130115351p:plain

■ SVG形式で書き出す

作成したアイコンを、SVGファイルとして書き出します。
[ファイル > 保存]を開き、[ファイル形式]の部分で「SVG(svg)」または「SVG 圧縮(svgz)」を選択し、[保存]をクリックします。
今回は「SVG(svg)」形式で保存しました。

f:id:seattleservice:20140130120945p:plain

[保存]をクリックするとSVGオプションダイアログが表示され、色々設定をいじることが出来ますが、
今回はそのまま[OK]をクリックします。

f:id:seattleservice:20140130121025p:plain

これでSVGファイルは作成され保存出来たので、あとは実際にHTMLに載せてあげます。

2．HTMLのページにSVGファイルを載せる

今回は、前回紹介した方法の一つである、objectタグを用いてSVG画像を読み込みたいと思います。
比較用にPNG画像のアイコンも載せておきます。

■ HTMLの記述

<body>
  <header>
    <!-- 省略 -->
  </header>

  <div class="main">
    <div class="left_pane top">
      <object type="image/svg+xml" data="icon.svgz"></object>
    </div>
    <div class="right_pane top">
      <!-- 省略 -->
    </div>

    <div class="left_pane bottom">
      <!-- 省略 -->
    </div>
    <div class="right_pane bottom">
      <img src="icon.svgz">
    </div>
  </div>

  <footer>
    <!-- 省略 -->
  </footer>
</body>

■ ブラウザで表示を確認してみる

ブラウザ(今回はGoogle Chrome)で確認してみると、以下のように表示されました。

f:id:seattleservice:20140130132915p:plain

左上のアイコンがSVG画像で、右下のアイコンがPNG画像です。

このページの表示を300%にしてみると以下のようになりました。
f:id:seattleservice:20140130135123p:plain

SVG画像の方はくっきり鮮明なままですが、PNG画像の方はぼやけてしまっていますね。

これをiOSシミュレーターを使ってRetina環境を再現して確認したところ、
シンプルなアイコンにしたためあまり大きな差はありませんでしたが、
それでもやはりPNG画像の方は若干がたついていました。

3．SVGライフを充実させるために

SVG画像は何も考え無しに作ってしまったり、複雑な構成や多色の図を作ろうとすると、
PNG画像やJPG画像などのラスタ画像と比べてファイル容量が大きくなってしまう場合があります。

例えば、今回作成したアイコンだとSVGファイルの方が半分も軽いですが、
f:id:seattleservice:20140130181436p:plain

以下の画像を見てみると、SVGファイルの方が倍以上容量が大きくなっています。
f:id:seattleservice:20140131145058p:plain

そのため、SVG画像の軽量化が必要になる場合が出て来ると思いますが、以下のような方法があります。

1) SVGZ形式で保存する

SVGZは、先ほどIllustratorでアイコンを作成し、保存するときに出てきましたね。
SVGZはSVGを圧縮したファイル形式になるため、軽量化が期待出来ます。

例えば、先ほど例に出したSVG画像をSVGZ形式で保存してみると、かなり軽量化することが出来ました。
f:id:seattleservice:20140131154157p:plain

2) 軽量化ツールの使用

軽量化ツールのひとつに「SVGO」があります。
SVGOはターミナル上で以下のコマンドを打つだけでインストール可能です。

sudo npm install -g svgo

使い方は簡単で、軽量化したい対象SVGファイルのあるディレクトリまで移動し、以下のようなコマンドを打つだけです。

svgo ファイル名

例えば今回作成したtest.svgに対して軽量化を行ったところ、以下のようになりました。

$svgo test.svg

Done in 171 ms!
169.186 KiB - 16.5% = 141.276 KiB

SVGファイルをSVGZファイルに変換することも出来るようなので試してみたところ、

$svgo test.svg -o - | gzip -cfq9 > test2.svgz
$du -a -h

12K	./test2.svgz

先ほど1) でIllustratorで保存したSVGZファイルより、5KB軽い結果になりました。

他にも指定ディレクトリ内にある全てのSVGファイルの軽量化や、
SVGZファイルからSVGファイルへの変換など、色々なことが出来るようなので、
詳しくは以下のリンク先で確認してみてください。

SVGO - GitHub

今後どんどんSVGに対応するブラウザやサイトが増えていくと良いですね。