スマフォだけではなく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の表示もらくらくですね。