この記事のまとめ
- SVG画像はテキストでも表現できる
- SVGファイルでアニメーションも可能
- SVG画像は拡大しても画像が粗くならないことが大きなメリット
ウェブサイトに表示されている画像は見た目は同じですが様々な画像ファイルがあります。
PNG、JPEGなどの画像ファイルは耳にしたことはあるのではないでしょうか。
その中にSVGファイルという画像ファイルがあります。
SVGファイルは他の画像ファイルとは一層変わったファイル形式となっているので今回はご紹介致します。
目次
SVGとは？
SVGファイルとはファイルの拡張子が『.svg』となる画像ファイルのことです。
SVGとは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で大きさを変えられるベクター画像という意味です。
ベクター画像とは、曲線を描いたり一定の範囲を塗りつぶすといった処理を座標と数式によって行えるので、Adobe Illustratorなどの画像編集ソフトで扱うことができます。
テキストで画像を表現できる
SVGファイルはXMLに準拠しているためテキストエディタでも開くことができ、作成することも可能です。
以下のエディターをご覧ください。
See the Pen
wvGjMwj by yuuuuuuuuuuuuuuuuki (@yuuuuuuuuuuuuu4)
on CodePen.
上のエディターでは<svg>タグを使いコードのみで簡単な画像を作成しています。
エディターを使って画像を編集したり、Illustrator などの画像編集ソフトを使ってでも簡単に画像を編集することがSVGファイルの大きな特徴です。
SVGファイルの３つのメリット
SVGファイルには以下の３つのメリットがあります。
- 縮小・拡大しても画像が乱れることがない
- アニメーション表現も可能
- フィルター効果を活かした表現
①縮小・拡大しても画像が乱れることがない
SVG画像を使う大きな理由は画像サイズを大きくしたり小さくしたりしても画像の乱れることがないということです。
一般的にウェブサイトで使われるPNGやJPEGなどの画像ファイルは画像ファイルの大きさ以上のサイズで表示させると画質が粗くなり表示が乱れることがあります。
しかし、SVG画像はベクター画像であることから拡大縮小をしても画質が粗くなることなく表示させることが可能です。
②アニメーション表現も可能
SVG画像はテキストでも編集が可能でき、内部にCSSやJavaScriptなどを組みことが可能です。
そのため、簡単なアニメーションも作成することができます。
JavaScriptを使って動かす、CSSを使って動かすなど方法はいくつかありますが、簡単にアニメーション付きのSVGファイルを作成する方法として、アニメーション制作ソフトを利用しSVGファイルとして書き出す方法です。
これであればCSSやJavaScriptの知見がなくてもアニメーションをSVGファイルで表現することができます。
③ フィルター効果を活かした表現
SVGではCSSと同様のフィルター効果をかけることも可能です。
色彩の調整やモノクロ化、ぼかし・シャドウなど様々な彩色効果を与えることができます。
SVGのフィルター効果はCSSのフィルターよりも前に実在しており、そのメリットとしてSVGののフィルターに対応しているブラウザが多いというメリットがあります。
対応ブラウザに注意する
SVGファイルを利用する際に最も気をつけるべきことは『対応ブラウザを確認しておく』ことです。
現在のブラウザの種類の中で一般的に知られているブラウザであればSVG画像は表示されます。
しかし、一部のブラウザでは表示は出来ているものの表示崩れを起こしてしまうことがあるんですね。
特にサポートは既に終了していますが、未だに利用されているInternet Exploer（IE）では度々が表示崩れを私自身経験しています。
なので、IEブラウザでSVG画像を利用することがある場合は必ずIEブラウザで表示崩れがないかを確認するのをオススメします。
まとめ
SVGファイルは画像サイズによって表示崩れをおこさないことが大きなメリットです。
モニターの進化によってモニターの解像度もどんどん上がっており、5Kモニターで画像が乱れていると報告を受けることも私自身経験しています。
『画像の表示が粗い』
などの場合はSVGファイルにするということで対処可能なこともあるので、ぜひSVGファイルを使うことも検討にいれてみてはいかがでしょうか。
SVGファイルについて紹介しました。
