社員ブログ

SVGファイルを使ってみようの巻

2014年06月24日 火曜日

pentaThum

 

 

 

 

 

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

今日は最近よく聞く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ファイルを作ってみます。 イラレでベクター画像ペンギン君を描いてみました。

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

penta

 

 

 

 

SVGファイルを表示させてみよう

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

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

<img src="penta.svg">

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

ペンたくん

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

ペンたくん

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

おお、劣化しない。。

SVGはもう業務で使えるのか?

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

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

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

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

 

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

文字サイズサイズ小サイズ中サイズ大