Retinaディスプレイ時代に簡単対応するために簡単にSVGをつかう

スマフォだけではなくRetinaディスプレイ搭載のPCもあふれる昨今。
SVGの需要がますます高くなってくるのではないでしょうか。
そこで今回は、きたるべく大SVG時代に乗り遅れないように簡単にブラウザにSVGを表示させてみましょう。

SVGとは

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

Scalable Vector Graphics - Wikipedia より引用

簡単に言うと、ベクターデータなので拡大縮小してもジャギジャギにならないという特徴を持った画像です。

imgタグをつかって表示

imgタグをつかう場合は、scr属性にSVGを指定するだけでOKです。
JavaScriptからベクターの操作はできません。

svgタグを使って表示

JavaScriptからベクターデータを操作することができます。

他にもobjectタグをつかったり、CSSで背景画像に使ったりできるのですが、基本的に上記2点を覚えておけば、まあ大丈夫かと思われます。

これでSVG Girlの表示もらくらくですね。