SVG(スケーラブル・ベクター・グラフィックス Scalable Vector Graphics)
SVGの基本的なこと 10分でわかるSVGの基本的なこと2 SVG入門
SVG point
- HTMLを標準化しているW3Cが策定している
- 中身はXMLベースのテキストファイル
- GIF, PNG, JPEGがビットマップ形式なのに対し、座標情報によるベクター形式のデータ
- 極度に拡大したり、Retinaなどの高解像度ディスプレイで表示しても、ビットマップデータに見られるようなジャギーが目立たない。
- 解像度に合わせて、スマホ用、高解像度用の画像ファイルをそれぞれ用意する必要がない。
- 直線や曲線を組み合わせて描画する画像に向いている。写真データには不向き。
- 透過やアニメーションにも対応している。
- XMLを手入力するのは酷なので、Illustratorなどのドローソフトで描いてSVGファイルに出力することが多い。
SVG歴史
実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer(以降IE)からのサポートが得られず、利用が広がらなかった。 しかし、そのIEも最新のIE9でSVGに正式対応し、利用環境が整いつつある。 拡大してもジャギーが出ないSVGのベクトルグラフィックスは、さまざまな解像度への対応が望まれるモバイル機器向けのサイトや、最近はやりのレスポンシブデザインに適している。
ベクター形式とは
XMLをベースにした2次元ベクターデータで画像を描く ベクターデータとは画像を点の座標とそれを結ぶ線(ベクター、ベクトル)などの数値データをもとにして演算によって再現する方式
ラスターデータ
JPEGやPNGはラスターデータに分類される。 ラスターデータはドット状のピクセルや要素が固まってひとつの画像を表現しており、拡大すると粗くなることが特徴
ベクターデータ
一方、SVGは『ベクターデータ』に分類されます。 点の座標で表現でき、数値のデータで構成されているため、画像を拡大・縮小しても画質を損ねません。また、テキストデータとして編集することも可能
SVGが向いていないこと
しかし、どんな場合でも万能に使えるわけではなく多くの色を必要とする写真などはSVGの利用に向いていない。 多くの色調を使用している風景写真を、ベクターデータで滑ら かに表示させようとすれば、膨大なデータ量を必要としてしまいます。Web上で写真を表示させたい場合、ラスターデータを利用するのが普通。
SVG名前空間の宣言について
<svg>
はSVGのルート要素で、HTMLにおける <html>
に相当する
このタグ内のxmlns属性の値に、SVGの名前空間http://www.w3.org/2000/svg
が宣言されることで <svg>
要素の配下でSVG固有のタグが利用できるようになる。
たとえば <a>
要素は通常のhtml、svg両方存在するが、このネームスペース配下に置くことでhtmlと混ざることなくSVGの <a>
要素として使うことができる。
ちなみに、SVGの名前空間で使われているhttp://www.w3.org/2000/svg
はURLですが、ただの識別子の文字列です。 URLの参照先自体には意味はありません。
URLは1つの場所しか示さないので、ID(名字)として利用されているのが慣習のようです。
SVG モーフィング
モーフィングとは、ある図形から別の図形へと自然に変形の中で、中間の画像を補正して映像を見せる技法
Flashではシェイプトゥイーンでモーフィングを表現していた 。
CSS3のアニメーションだと、画像の移動・回転なんかはできるが、形そのものを変形させるのは難しい SVGを使えば、そんなアニメーションも作成可能
viewPortとviewBox
svgにはviewPortとviewBoxという概念がある。 viewPortはSVGの世界を見るための窓で、窓の大きさはsvg要素の width と height 属性で決まる。 viewBoxは、窓の中にSVGのどこからどこまでを収めるか を指定します。
viewPort
viewPortの大きさはwidth、height属性で絶対単位での指定で決まる。 ※別途CSSで指定・上書きが可能
viewBoxについて
viewBoxについてもっと詳しくいうと、viewBoxはSVGの内容を表示させる「表示領域」と 図形の配置や大きさの基準となる「座標系」を定義します。 viewBoxの指定は下記のように、viewBox="X座標の最小値Y座標の最小値X軸の幅Y軸の高さ" と記述します ※単位は指定しない
SVGの表示方法(HTMLでの表示方法)
SVGを表示するのには、さまざまな書き方がある。 1, 2は画像要素となり、SVGタグ内のpathに対してcss, jsが効きません 4はiframeのように別documentになりcss, jsはそのdocumentに対して適用させる必要があります
- imgタグでsvg画像ファイル読み込み
- cssでsvg画像ファイル読み込み(background-imageプロパティでファイルを読み込む)
- インライン(htmlにインラインで直接SVGタグを記述する)
- object要素のdata属性でファイルを読み込む
Nuxtでは <use></use>
タグの挙動を奇妙だといっており推奨されていない。
<!-- <img>のsrcでファイルを読み込む -->
<img src="hoge.svg">
/* cssでsvg画像ファイル読み込み(background-imageプロパティでファイルを読み込む) */
div {
background-image:url("hoge.svg");
}
<!-- インライン(htmlにインラインで直接SVGタグを記述する) -->
<div>
<svg width="" height="" viewBox="">
<!-- 略 -->
</svg>
</div>
<!-- object要素のdata属性でファイルを読み込む -->
<object id="mySvg" data="hoge.svg" type="image/svg+xml"></object>
<script>
// 4を操作するjs
var svg_doc = document.getElementById('mySvg').contentDocument;
var $svg = $(svg_doc).find('svg');
</script>
1 もっとも基本なobjectタグ HTML内のSVG画像を表示したい箇所にobjectタグを挿入し、type属性に「image/svg+xml」を、data属性に表示するSVGファイルのURLを指定します。この方法はもっとも互換性が高く、SVGをサポートしたほぼすべてのWebブラウザで動作します。JavaScriptによるSVGドキュメントへのアクセスも可能です。とくに理由がなければ、外部SVGファイルの表示にはこの方法を使用するのが無難
<object type="image/svg+xml" data="sample/sample01.svg">