SVGとは

もともと自分の目的はSVGでWebアニメーションを作るというものでした。ブログも立ち上げたので、そもそもSVGとは何なのかをざっくりと解説したいと思います。

書き出し方については他の記事でご覧ください。

SVGとは何なのか

SVG とは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、2次元ベクターイメージ用の画像形式の1つです。つまりざっくり言うとJPEGとかGIFみたいに画像を表す拡張子の仲間です。

普通の画像と違い、アニメーションやユーザインタラクションもサポートしています。JavaScriptなどを埋め込めるのでいろいろ動きをつけることができます。

SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

とウィキペディアにありますが、つまりこれからいろんなブラウザで使えるメジャーな形式にするよという意気込みだと思います。

SVGの各ブラウザ対応

Internet Explorer、Firefox、Chrome、Safari、Operaなど主要なブラウザが現在 SVGの形式に対応しています。

Can I use…というサイトで対応具合を調べることができます。2021年12月現在の時点では以下のような対応状況です。

上画面を見ても、ほぼ対応しているんですが、 Internet Explorer 8以下が対応していないのと、11でもアニメーションのサポートがないというのがちょっと厳しいところだなと思います。

ただ画像を表示させるだけならできるのか、というと、現時点ではIE11でも正確に画像を拡大・縮小されないことがあると記載されています。viewBoxやwidth, heightをきちんと設定すれば回避されるともあるので、きちんとすれば、画像の表示はほぼ全ブラウザ対応！と言うことができるのではないでしょうか。（2021年　国内ブラウザシェアでIEは5％弱です）

アニメーションを使う場合、IEユーザーを無視することになるかと言うと現在はそうですが、今後おそらくIEユーザーは減っていくと思われるし、SVGはメジャーな形式になっていくと言われています。

なので、SVGは現在すべてのブラウザに完璧に対応しているわけではないけれど、将来的にはおそらく主流になるだろう形式です。今勉強する意義はあると自分は思います。

SVGのメリット

SVG形式を使うメリットを述べていきたいと思います。画質が良いということと容量の軽さ、それとアニメーションなどをプログラムできることです。

画質が変わらない

SVGはベクターイメージ用の画像形式です。JPEGなどはラスター形式なのですが、その違いで大きいのは、SVGは拡大縮小したときに画質が変質しないということです。

以下このブログのヘッダー部分に使っている画像を使って説明します。

上の図は左がラスター形式のpngファイル、右が同じ画像ですがベクター形式svgファイルです。

SVG形式の画像はWindowsではこのようなアイコン表示となっております。

2つの画像を開いて拡大していくと

• 

• 

左　SVG画像：500％拡大

右　PNG画像：500％拡大

PNG画像の方はぼやぼやしていますが、SVG画像はどんなに拡大してもボケません。サイズを小さくしても大きくしても画質が劣化しないので、いつでも綺麗な画像をキープできます。

サイトやブログはスマホやPCで見る場合で表示サイズが変わりがちです。なのでSVGはそれらレスポンシブデザインにもきっちり対応できるという強みがあります。

容量が軽い

SVGは他の画像形式と違い、どこの座標にパスを描いたかの記録をデータとして持っています。画像を描いたパスや円のデータを持っているので劣化しないし、それはただの文章データなので容量がとても軽くなるのです。

上の画像は、ファビコンとして使用しているものと同じデザインですが、大きさを500×500ピクセルでPNG形式で保存すると8.68㎅、SVG形式で保存すると4.98㎅、約半分ほどに省エネできます。

PNG形式で保存：8.68㎅　→　SVG形式で保存：4.98㎅

上のPの画像はSVGファイルの中に以下のようなコードで書かれています。

こんなシンプルな画像ですが、結構複雑に書いてありますね。でも結局文章のデータということになるので容量が軽くて済むのです。もっと大きいデータになると、PNGなら大きければ大きいほど容量を食いますが、SVGならずっとこの軽い容量のままデータが使えます。

ただ、複雑な画像になればなるほどコードが増えてPNGより容量を食うことになってしまったりうまく表示されなくなってしまうことになるので、ロゴやマークなどのシンプルな画像のときに使うようにしてください。文字なども大丈夫です。写真だったらJPEGなどの方がやはり適しています。

アニメーションが使える

上記のように、SVGファイルの中身はコードが書かれています。この中にはアニメーションの動きをつけるタグもあり、移動させたり、拡大縮小させたり、さまざまなことが可能です。

また、JavaScriptなどと連携し、クリックしたら画像が変化するなど、インタラクティブな仕掛けを作ることもできます。これらの機能を使いこなせば、印象的で、より分かりやすいサイトを作ることにもつながります。

アニメーションについては今後このブログを書きながら自分が学習しようと思っているので、今後の記事で解説していきたいと思っています。

SVGを使うデメリット

これまで述べてきたようにSVG形式の画像はWebでの表示に非常に適しているため、近年はサイト制作でもSVG画像が推奨されるようになってきていますが、WordPressはセキュリティの問題でSVG形式の画像をアップロードすることができません。なのでヘッダー部分の画像はPNGのものを使っています。

ちなみにWordPressの編集画面でカスタムHTMLの中にインラインSVGを書き込めば表示することはできます。

ですがSVG画像をアップロードすることができないので、サムネ画像やヘッダー画像に使うことは難しいです。SVG画像をアップロードするプラグインがあるのですが、他のSNSでその画像が表示されなかったりとトラブルもあるらしいので詳しくは調べてみてください。

また、デメリットとして、扱いが難しいということがあります。ただ表示させるだけでしたらSVG形式で保存すればいいだけなのですが、Adobe Illustrator など、ベクター形式の画像を扱うソフトでないとSVG形式で保存できなかったり、画像ソフトが限定されます。無料のベクター画像を扱えるソフトもありますが、まずベクター画像ソフトを習得しなければならないのもちょっとめんどくさいところです。

また、アニメーションをつけるにも、SVGコードを勉強しなければいけません。自分も今から勉強です。

というわけで、扱いは他の画像形式と比べると少し敷居が高いです。

ただ、SVG形式で保存するだけでしたら簡単だと思うので、ボヤかしたくない画像があるときは、このSVG形式をぜひ使ってみてください。