WEBで役立つ画像「SVG」とは【保存形式】

今回はますます使いたい拡張子「SVG」をご紹介します。

劣化するのが当たり前、と思っていたWEB用の画像。

PNGやJPEG・・・それぞれの特性を理解して自分の保存したい画像と照らし合わせれば、いつもより綺麗に保存できますよね。

「SVG」は近年出てきたRetinaディスプレイ対応でも必ず役立つ、WEBにもってこいの画像保存形式なのです。

「SVG」って一体何？どうしてWEB制作にもってこいなの？

SVG（Scalable Vector Graphics）とは、ベクター形式の画像フォーマットです。
ベクター画像って何？という方もいらっしゃるかもしれません。

ビットマップ画像

まず、普段から馴染みのあるJPEGやPNGをはじめとしたビットマップ画像は、ピクセルで形成されています。

ピクセルの色・濃度の値の配列情報としてコンピュータは取り扱っているため、拡大して見ると、ひと升のピクセルに色が塗られているのが分かりますよね。それが集合して画像になっています。

ベクター画像

これに対して、ベクター画像とは、幾何図形を形成するために情報を数値や式として表現しています。

つまり、ビットマップ画像と違ってピクセルの概念がない！

イラストレーターを使う方には良く分かるかもしれません。Photoshopとの違いとして、Illustratorはパスで形成されていますよね。それがSVGにも当てはまるのです。

近年のブラウザではSVGはほとんど対応されている

巷ではまだ流通しきってないようにも見えますが、実は近年じわじわと増えているのです。

それもそのはず、先ほども申し上げた通り、SVGはWEB制作にもってこいなのです。

近年増えてきた理由としては、冒頭でも少し触れたとおり、スマホの普及などからあらゆるデバイス対応が必要になってきたから。
ではどうしてそこでSVGが有力とされるのか？

今回はSVGをWEBで使いたい理由を５つピックアップ！

実はこんなにメリット盛りだくさんなんですよ。

SVGをWEBで使いたい理由①「拡大縮小」が自由にできる！

上記でご紹介した通り、SVGにはピクセルの概念がありません。なので、拡大縮小しても画像が劣化することがないのです！

フォトショと違ってイラレはどれだけ拡大しても劣化しませんよね。それと同じです。

WEB制作では近年推奨されるレスポンシブデザインではパーセンテージで横幅縦幅を指定することが増えてきたと思います。

そんな時画像が伸び縮みをすることで、ぼやけたり荒れたりする恐れがありました。

しかしSVGならどんなに拡大縮小してもへっちゃら！！

これはすっごく便利ですよね。

SVGをWEBで使いたい理由②　どんなディスプレイでも綺麗に表示！

また、ピクセルの概念がないということは、SVGは解像度にも左右されません。

近年増えているスマホなどで主に搭載されているRetinaディスプレイ。

この高精細ディスプレイによって、載せたいサイズのまま画像を作成するとぼやけてしまい、スマホサイト用に画像を作成の際には、２倍のサイズで作成しないといけないのでした。

しかしSVGなら自由に拡大縮小でき、解像度の概念もない。

一つの画像があればどんなデバイスでも対応した画像となるのです！！

SVGをWEBで使いたい理由③　マークアップ言語だからHTMLに埋め込める！

SVGはHTMLと同じく「タグ」で構成されています。

だから、HTMLコードに埋め込んで表示することが可能なのです！

保存の際にSVGコードを開くと一目瞭然。ずらーっと数字があがっています。

これはパスの座標などを示しており、そういえば私も高校時代、こういった座標を元にBasicなどで数字を使ってベクター画像を作ったのを思い出しました。昔はこれがベクターというものなのか、なんてわかっていませんでしたが、今はやっとあの数字の数々で絵を描いていたのがなんとなくわかります。

その時は勉強のため手打ちで何をどう指示したらどんな形になるか考えて作っていましたが…うーん、コンピュータって、本当にスゴイです。

CSSだけじゃ作れない複雑な曲線を含めた画像も、SVGなら簡単に表示できちゃいますね！

SVGをWEBで使いたい理由④　アニメーションにも対応

上記のことから、アニメーションにも対応しちゃうわけです。

しかもGIFアニメーションのような何枚も画像を合わせるパラパラ漫画形式と違って、パスを活かすのでとっても滑らかで美しいアニメーションに変化します。

最近ではアルファベットをアニメーションさせたサイトを見かけるかと思いますが、あれはSVGとjQueryを利用して動かすことができるんです。

SVGをWEBで使いたい理由⑤　imgタグでも簡単表示！

HTMLコードに埋め込むことも可能ですが、imgタグにも対応しています。

普通にsvgファイルをアップロードし、いつものコードに拡張子がsvgのファイルを指定するだけで大丈夫ですよ。

なんだか数字とかたくさん出て来ちゃうとよくわからなくなってしまいますが、いつものタグでいつもと同じように使えてこれまでご紹介したメリットがあるのなら、とっても気軽に利用できますよね！

SVGは簡単に、イラレで作れる。

SVG画像はイラストレーターで作成が可能です。

ちなみにアウトラインをかけてから保存するのがおすすめ。

とくに文字には必ずアウトラインをかけてください！

また、写真のような画像ではなく、パスで作られたベクター画像に利用してくださいね！

いつものように保存する際に、SVGを選ぶだけでできますが・・・

各アートボードごとに保存すればあっという間に素材を量産できちゃいます。

使い方はこちらから

www.misallychan.com

www.misallychan.com 

まとめ

SVGって聞き慣れない方も多いはず。そして、利用している方もまだ多くはありません。

大きな理由としては、Internet ExplorerがSVGをサポートしていなかった、というのが挙げられます。

しかしIE9〜は既にサポートされており、IE8のサポートも終わり。保守ももうそろそろ目をつむってよい所。

Androidでは苦戦しますが（Androidについては後日）、これだけのメリットが挙げられるからには、ぜひぜひ積極的に使っていって頂きたい！！

これまでビットマップ画像だけでは対応しきれなかった、例えばレスポンシブデザインなどでも凄まじい力を発揮してくれること間違いなし。

小さな画像も大きな画像も、これで気にせず作成・利用できちゃいますね！

参考URL： いまさら聞けないSVG——Web制作に便利な3つの理由 SVGの書き出しおよび表示方法 Scalable Vector Graphics - Wikipedia

問題「サーバによってSVGが表示されない？」

以前SVGを表示させようとしたところ、画像がアップロードしても表示されない。 一体なぜ？と思った時、思い当たるところがありました。

利用していたサーバに結構古いものがあり、ひょっとしたらサーバのせいかも？と思い調べてみました。

やっぱりそういう事象は起こるようで、しかし、ちゃんと解決する方法がありましたので、ご報告！

AddType image/svg+xml .svg AddType image/svg+xml .svgz

上記コードを「.htaccess」に入力してアップロード！！

ディレクトリに関してですが、私はWPのフォルダの一番上にある.htaccessに追記する形でアップロードしました。（ちなみにWP以外でも.htaccessってあるのかな？わからなくてできなかった）

これで、無事表示されますので、ご安心ください（＾＾）★