こんにちは、ケーネットスタッフTです。
ブログに書く内容を考えている間にあっという間に月日が過ぎてしまい、今年の上半期がもう終わるのだという驚いています。

さて、今日はSVG形式で保存された画像について少しだけお話をさせて頂きます。
今まで、ケーネットでもホームページを作成する際に利用していた画像フォーマット（保存形式）は
もっぱら『jpg（jpeg）』『png』の2種類をよく利用しておりました。

しかし、『jpg』『png』のどちらも、ホームページの表示によって縮尺が起き、
文字や画像の縁がにじむと言う事が多々ありました。
もちろん、それぞれの特性があり、必要に応じて使い分けていたのですが、ここ最近よく使用する画像フォーマットとして『SVG』を選択することが増えてまいりました。

それぞれの特徴

『jpg（jpeg）』
色数の多い写真やグラデーションのように色が細かく変化する画像の保存に適した保存形式で、色の境界がはっきりしているイラストやアイコンだと色の境目が区別されずにあいまいな表現になることがあります。

『png』
透過も可能で画像の透明度も設定できる保存形式です。jpgが得意とする写真やイラスト・アイコンでも使用できるため、使用頻度としても高めです。

『SVG』
SVGはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で日本語に置き換えると、「大きさを変えられるベクター画像」となります。開発された当初は対応しているブラウザなどが多くなかったため、保存形式としては存在していたものの、ホームページの画像として利用することはあまりありませんでした。
また、写真などには適しておらず、イラストやアイコンなどに適した保存形式とされています。

SVGが活きる表現

SVG画像を利用するとちょっとしたアニメーションを組み込む事も出来ますし、フィルターといって、調整やモノクロ、ぼかしや影をつけるなど幅広い表現を追加することができます。
先だって弊社が手掛けてリリースした【株式会社シンコー】様の本サイト（HP）の「データで見るシンコー」のページはすべてSVG画像です。
また、株式会社シンコー様のリクルートサイト（HP）でも「シンコーを知る」ページで多く利用しています。
このように私たちは必要に応じてSVG画像を使用しております。

CSSアニメーションと共に出てくる画像の一部はSVG形式にしており、実際にコーディングしたものと遜色ない状態で大きな画面からスマホまで表示されています。
特に私が気を付けている点としては文字を画像として保存する際に、にじんでしまうと読みにくさがどうしても出てくること、この問題を解決する際にSVGを利用する場合が多いです。

そういえば、このサイトパソコンやタブレットで見てもスマホで見てもはっきりと見やすいアイコンや画像があるなと思われたら、もしかするとSVG画像を利用されているサイトかもしれません。