SVGファイルを使ってみようの巻 | グリニッジ株式会社

こんにちは、三橋です。もうすっかり夏ですね。

今日は最近よく聞くSVGファイルについて調べてみようと思います。

こちらの記事参照。

SVGとは？

SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術だそうです。 Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。

SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになったそうです。

高解像度のディスプレイや、様々なデバイスが登場してる昨今、便利な技術だと私は思います。

いちいちフォトショやイラレでサイズを微修正する手間もはぶけるかと思います。

対応ブラウザ(2014年6月)
Internet Explorer 9以上
Firefox 3.0以上
Chrome 4.0以上
Mac OS X Safari 3.2以上
Opera 9.0以上
iOS Safari 3.2以上
Androidブラウザ 3.0以上

とりあえずSVGファイルを作ってみます。イラレでベクター画像ペンギン君を描いてみました。

ファイル→保存→別名保存のところにファイルの種類：SVG　という欄があったのでそちらで保存。

いよいよペン太君をブラウザに表示させてみます。方法はいくつかあるそうなのですが

ここでは一番シンプルな方法を使います。

<img src="penta.svg">

いつもどうりの画像表示で、.svgにすれば大丈夫みたいです。とりあえずウエスト100pxのSVGペン太君を表示してみます。

ペン太君のウエストを500pxにしてみます。

<img src="penta.svg" width="500px" >

おお、劣化しない。。

古いブラウザで使えない。

CSSスプライトの代わりとなる技術がない。

という理由でもう少し先かもしれませんが皆さんどう思いますか。

しかしスマホサイトの案件などでは使えるのかもしれません。

以上、SVGファイル研究会でした。完。