SVGの概要
SVGサンプル
SVGはxml形式の画像である。
ライン（線）を基本とした画像であり、ドット（点）を基本とした一般画像(bmp,jpg,pngなど）とは異なる。
ドット画像は拡大縮小するとぼやけるが、SVGは拡大縮小時してもぼやけることがない。
SVGは図形やシンプルイラストなど、ライン（線）を主体にした画像に向いている。
xmlなのでJavaScriptなどプログラムで制御するのが容易である。
画像データはsvgファイルとするほか、HTMLに直接埋め込むことも可能である。
SVGはphotoshopなどいくつかのグラフィックソフトでもサポートされている。
他にもSVGに変換するWebツールも多数ある。
SVGには文字列やリンクを埋め込むことが可能である。
これにより、クリカッブルマップを実現することも可能。
デメリット
写真や複雑なイラストなどドットを主体にしている画像には向かない。canvasとの違い
svgはxmlで記述する静的画像である。canvasはJavaScriptで動的に画像を描画する。
そのため、canvasは、毎回ページを呼び出すたびに描画することになるので、静的画像には向かない。
canvasはアニメーションやゲームなどには向いている。
参考リンク
SVGの基本
SVGはXML形式のデータである。htmlに表示させる方法は2通りある。
svgファイルを読み込む方法と、直接HTMLに埋め込む方法である。
svgファイルを読み込む方法
sample1.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="20" width="100" height="120" fill="#00599b" />
</svg>
html側
img要素にsample1.svgを指定して画像表示する
<img src="img/svg_note/sample1.svg" />svgプレビュー（四角形）
直接HTMLに埋め込む方法
下記をhtmlに直接記述する。
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="20" width="100" height="120" fill="#00599b" />
</svg>
svgプレビュー
角が円い枠線を描画する
SVGソースコード
<svg width="200" height="200" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="100" height="50" rx="5"
fill="none" stroke="#8ca934" stroke-width="4" />
</svg>
角が円い枠線は以下のようにして実現している。
- rx="5" で角を丸くする
- fill="none" で塗りつぶしなしにする
- stroke="#8ca934" で枠線の色を指定する
- stroke-width="4"で枠の太さを指定する
SVGのプレビュー
文字とリンクを埋め込む
SVGに文字を埋め込むことができる。htmlに直接記述する場合、文字選択やリンクを埋め込むことも可能である。
SVGソースコード
<svg width="200" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="150" height="80" rx="5"
fill="none" stroke="#8ca934" stroke-width="4" />
<text x="20" y="30" fill="red" >
いろはにほへと
</text>
<text x="25" y="50" >
<a xlink:href="http://www.yahoo.co.jp/" fill="green">Yahoo</a>
</text>
</svg>
SVGプレビュー
SVGをjQueryで位置移動させてみる
SVGはDOMなのでjQueryでいろいろ操作できる。サンプル
ソースコード
<script>
function test4(){
var rect = $('#rect4');
console.log(rect.attr('x') + ',' + rect.attr('y'));
// 位置を取得 (1乗算は暗黙の数値変換)
var x = rect.attr('x') * 1;
var y = rect.attr('y') * 1;
// 位置を変えてみる。
rect.attr('y',y+10);
// アニメーションさせて動かかしてみる。
rect.animate({"x": "+=10"}, "slow");
console.log(rect.attr('x') + ',' + rect.attr('y'));
}
</script>
～省略～
<svg width="200" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect id="rect4" x="20" y="20" width="100" height="50" rx="5"
fill="none" stroke="#8ca934" stroke-width="4" />
<text x="0" y="30" fill="blue" >
<a href="http://www.yahoo.co.jp/">Yahoo</a>
</text>
</svg>
<br>
<input type="button" value="TEST4" class="btn btn-primary" onclick="test4()" />
SVGのクリック位置を取得
SVG要素のクリック位置を取得することができる。下記サンプルは、SVG要素内をクリックした時、クリック位置を取得し、矩形へセットする。
サンプル
ソースコード
<script>
$(function(){
$('#svg1').click(function(e){
// 絶対座標系のSVG要素位置
var offset =$(this).offset();
// 相対位置 = 絶対座標系のクリック位置 - 絶対座標系のSVG要素位置
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
console.log(x);
console.log(y);
// 矩形へ相対位置をセット
var rect = $('#rect4');
rect.attr('x',x);
rect.attr('y',y);
});
});
</script>
～ 省略 ～
<svg id="svg1" width="200" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect id="rect4" x="20" y="20" width="100" height="50" rx="5"
fill="none" stroke="#8ca934" stroke-width="4" />
</svg>
SVGの再読み込み
jQueryでSVGを操作するとき、SVG画像が更新されないことがある。以下の方法で、SVGの再読み込みと更新ができる。
JavaScript/jQuery
$('#svg_rap').html($('#svg_rap').html(););
HTML/SVG
<div id="svg_rap">
<svg width="200" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect id="rect4" x="20" y="20" width="100" height="50" rx="5"
fill="none" stroke="#8ca934" stroke-width="4" />
</svg>
</div>
外部SVGファイルをjQueryで扱う
外部SVGファイルをjQueryで扱う方法はいくつかある。下記の方法は、外部SVGのソースを指定要素内に埋め込むという方法である。
SVGソースを一度埋め込んでしまえば、jQueryで自在に操作できるようになる。
サンプル
JavaScript
$("#sample3").load("sample3.svg", function(){
});
HTML
<div id="sample3">
<img src="sample3.svg" />
</div>
Raster image in SVG | SVGにjpgなどのラスターイメージを埋め込む
サンプルソースコード
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg"> <image width="320" height="200" xlink:href="imori_md.jpg" ></image> <rect id="rect4" x="20" y="20" width="100" height="50" rx="5" fill="none" stroke="#8ca934" stroke-width="4" /> <text x="0" y="30" fill="blue" > <a href="http://www.yahoo.co.jp/">Yahoo</a> </text> </svg>
注意
外部SVGファイルにラスタイメージを埋め込んでいる場合、img要素では表示できなくなる。<div id="svg2"> <img src="sample2.svg" /> </div>
この場合、以下のSVGを読み込むコードを実行すると、SVGがラスタイメージ付で表示されるようになる。
<script>
function test2(){
// 外部SVGを読み込み
$("#svg2").load("sample2.svg", function(){});
}
</script>
横ライン3本、縦線４本の格子図形
<svg baseProfile="tiny" height="200" width="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="50" x2="200" y2="50" stroke="#000"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="#000"/>
<line x1="0" y1="150" x2="200" y2="150" stroke="#000"/>
<line x1="50" y1="0" x2="50" y2="200" stroke="#000"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="#000"/>
<line x1="150" y1="0" x2="150" y2="200" stroke="#000"/>
<line x1="200" y1="0" x2="200" y2="200" stroke="#000"/>
</svg>