知ってた?レスポンシブサイトでの画像は、SVGを使えば軽くてキレイで最高に便利。


ホームページで使う画像といえば、jpgやpngファイルが一般的ですね。
写真とかにはjpg、色数の少ないシンプルなものや透過が必要な画像はPNGと使い分けていますが、
PNGの一部はこれから説明するsvgで置き換えるともっと便利になります。

SVGって何?
svgファイルはブラウザ上で、jpgやpngと同じように画像として扱えるもので、
svgファイル自体はxmlという言語で図形の情報を持ったファイル。
ブラウザ上で図形情報を解釈して表示する。
jpgやpngのような色の配列ではなくて、図形の描画指示が書かれたものと考えるといいです。
アイコン素材を探していて、jpgやpngとかと並んでsvgってあるのを見たことありませんか。

ホームページで使うのも簡単。
jpgやpngファイルと同じように扱えます。

<img src="./images/sample.svg" alt="SVG画像">

SVGって何がすごいの?

SVGのいいところは、どんなサイズで表示してもきれいに表示されるってことです。
jpgやpngのような画像は用意したサイズ以外では画質が落ちてしまいます。
特に、元のサイズより大きいサイズで表示させようとすると画質が落ちてしまうので、
そのたびに新しいサイズで画像を用意しないといけません。

PNGファイルだとこんな感じになってしまいます。
小さい西宇はまだいいですが大きいサイズはどんどん粗くなってますね。

PNG画像 PNG画像 PNG画像 PNG画像 PNG画像

SVGは図形情報を持ってるので、拡大しようが縮小しようがきれいに表示されます。
こんな感じ。

SVG画像 SVG画像 SVG画像 SVG画像 SVG画像

これ見ただけで、これからSVG使おうって思うでしょ。

これからのホームページではSVGを活用しよう

これからのホームページはiPadとかiPhoneとか、複数のデバイスに対応したものでないといけなくなってきますが、
サイズが固定でない中で、画像の扱いは結構面倒だったりします。
高解像度になればなるほど画像も大きなものを用意しておかなければならないですし、
そうするとスマホでも大金画像を読み込まなといけなくなって、読み込み速度に影響します。
いろんなデバイスで、様々なサイズの画像が必要になると、それぞれに画像を用意するなど面倒です。
SVGではサイズを気にせずに使用することができるのと、ファイルサイズも大きくないのでとても使いやすいです。

実はSVGってこのサイズのメリットだけじゃないんです。
他にもいろいろとあるのですが、それについてはまた今度。

まだSVGを使ったことがないという方は、ぜひ一度使ってみましょう。

[RelService] [Service]